From 5a0b827eb6602973873dc1bb5b6a370baadb8cbe Mon Sep 17 00:00:00 2001
From: 13551345092 <1435483502@qq.com>
Date: Sun, 19 May 2024 20:43:53 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AC=AC=E5=85=AD=E5=91=A8=E7=AC=94=E8=AE=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
...03\350\257\225\345\206\205\345\256\271.md" | 314 ++++++++++++++++++
...20240514-Pinia\345\210\235\345\247\213.md" | 69 ++++
2 files changed, 383 insertions(+)
create mode 100644 "\351\203\255\345\205\201\346\226\214/20240513-\345\244\215\344\271\240vue\350\200\203\350\257\225\345\206\205\345\256\271.md"
create mode 100644 "\351\203\255\345\205\201\346\226\214/20240514-Pinia\345\210\235\345\247\213.md"
diff --git "a/\351\203\255\345\205\201\346\226\214/20240513-\345\244\215\344\271\240vue\350\200\203\350\257\225\345\206\205\345\256\271.md" "b/\351\203\255\345\205\201\346\226\214/20240513-\345\244\215\344\271\240vue\350\200\203\350\257\225\345\206\205\345\256\271.md"
new file mode 100644
index 0000000..4972e5e
--- /dev/null
+++ "b/\351\203\255\345\205\201\346\226\214/20240513-\345\244\215\344\271\240vue\350\200\203\350\257\225\345\206\205\345\256\271.md"
@@ -0,0 +1,314 @@
+后端
+```
+import koa from 'koa'
+import bodyparser from 'koa-bodyparser'
+import cors from 'koa2-cors'
+import { DataTypes, Sequelize, Op } from 'sequelize'
+import Router from 'koa-router'
+
+
+let app = new koa()
+let router = new Router()
+let prop = 3000
+
+let sql = new Sequelize('blog','sa','123456',{
+ host:'localhost',
+ dialect:'mssql'
+})
+
+let data = sql.define('blogs',{
+ title:{type:DataTypes.STRING},
+ type:{type:DataTypes.STRING},
+ name:{type:DataTypes.STRING},
+ age:{type:DataTypes.INTEGER}
+})
+await data.sync()
+
+app.use(cors())
+app.use(bodyparser())
+router.get('/book/:id?',async (cxk)=>{
+ let id = cxk.params.id||0
+ let xs
+ if (id>0) {
+ let item = await data.findByPk(id)
+ xs= item
+ }else{
+ let item = await data.findAll()
+ xs= item
+ }
+ cxk.body={
+ code:200,
+ data:xs,
+ msg:'获取成功'
+ }
+})
+router.get('/sel',async (cxk)=>{
+ let keyword = cxk.request.query.keyword.trim()
+ let sel = await data.findAll({
+ where:{
+ [Op.or]:{
+ title:{[Op.like]:`%${keyword}%`},
+ type:{[Op.like]:`%${keyword}%`},
+ name:{[Op.like]:`%${keyword}%`}
+ }
+ }
+ })
+ cxk.body={
+ code:200,
+ data:sel,
+ msg:'查询成功'
+ }
+
+})
+router.post('/add',async (cxk)=>{
+ let obj = cxk.request.body
+ let add = await data.create(obj)
+ cxk.body={
+ code:200,
+ data:add,
+ msg:'获取成功'
+ }
+})
+
+router.put('/edit/:id?',async (cxk)=>{
+ let id = cxk.params.id
+ let obj = cxk.request.body
+ await data.update(obj,{
+ where:{
+ id:id
+ }
+ })
+ cxk.body={
+ code:200,
+ data:obj,
+ msg:'修改成功'
+ }
+})
+router.delete('/del/:id',async (cxk)=>{
+ let id = cxk.params.id
+
+ await data.destroy({
+ where:{
+ id:id
+ }
+ })
+ cxk.body={
+ code:200,
+ data:[],
+ msg:'删除成功'
+ }
+})
+app.use(router.routes())
+
+
+
+app.listen(prop,()=>{
+ console.log(`http://localhost:${prop}`);
+})
+```
+
+前端
+```
+
+
+
+
+
+
+
+
+
+```
\ No newline at end of file
diff --git "a/\351\203\255\345\205\201\346\226\214/20240514-Pinia\345\210\235\345\247\213.md" "b/\351\203\255\345\205\201\346\226\214/20240514-Pinia\345\210\235\345\247\213.md"
new file mode 100644
index 0000000..5a39b44
--- /dev/null
+++ "b/\351\203\255\345\205\201\346\226\214/20240514-Pinia\345\210\235\345\247\213.md"
@@ -0,0 +1,69 @@
+Pinia 是一个为 Vue 3 设计的状态管理库，具有简单易用的 API 和出色的性能。
+
+## 安装 Pinia
+
+可以通过 npm 或 yarn 安装 Pinia：
+
+```bash
+npm install pinia
+```
+
+或
+
+```bash
+yarn add pinia
+```
+
+## 创建 Pinia Store
+
+要创建一个 Pinia Store，需要引入 `defineStore` 函数，并定义一个 Store 类。例如：
+
+```javascript
+import { defineStore } from 'pinia';
+
+export const useCounterStore = defineStore({
+ id: 'counter',
+ state: () => ({
+ count: 0,
+ }),
+ actions: {
+ increment() {
+ this.count++;
+ },
+ decrement() {
+ this.count--;
+ },
+ },
+});
+```
+
+## 在 Vue 组件中使用 Pinia Store
+
+在 Vue 组件中使用 Pinia Store 非常简单。首先需要在应用程序的入口处安装 Pinia：
+
+```javascript
+import { createApp } from 'vue';
+import App from './App.vue';
+import { createPinia } from 'pinia';
+
+const app = createApp(App);
+app.use(createPinia());
+app.mount('#app');
+```
+
+然后可以在组件中使用 `useStore` 方法访问 Pinia Store：
+
+```javascript
+import { defineComponent } from 'vue';
+import { useCounterStore } from './store';
+
+export default defineComponent({
+ setup() {
+ const counterStore = useCounterStore();
+
+ return {
+ counterStore,
+ };
+ },
+});
+```
\ No newline at end of file
--
Gitee