From 14c9081389c6cfee0c15a9aa2c8f5c4fac03b075 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sun, 19 May 2024 17:42:35 +0800
Subject: [PATCH 1/3] n

---
 .../2024.05.13-Pinia.md"                      |  96 +++++
 .../2024.05.16-\345\244\215\344\271\240.md"   | 341 ++++++++++++++++++
 2 files changed, 437 insertions(+)
 create mode 100644 "\344\276\257\345\235\244\351\241\272/\347\254\224\350\256\260/2024.05.13-Pinia.md"
 create mode 100644 "\344\276\257\345\235\244\351\241\272/\347\254\224\350\256\260/2024.05.16-\345\244\215\344\271\240.md"

diff --git "a/\344\276\257\345\235\244\351\241\272/\347\254\224\350\256\260/2024.05.13-Pinia.md" "b/\344\276\257\345\235\244\351\241\272/\347\254\224\350\256\260/2024.05.13-Pinia.md"
new file mode 100644
index 0000000..0b53573
--- /dev/null
+++ "b/\344\276\257\345\235\244\351\241\272/\347\254\224\350\256\260/2024.05.13-Pinia.md"
@@ -0,0 +1,96 @@
+```
+安装：pinia: yarn add pinia
+```
+
+#### 简介
+
+```
+通过 Mastering Pinia 的免费视频掌握更多内容
+Pinia 起始于 2019 年 11 月左右的一次实验，其目的是设计一个拥有组合式 API 的 Vue 状态管理库。从那时起，我们就倾向于同时支持 Vue 2 和 Vue 3，并且不强制要求开发者使用组合式 API，我们的初心至今没有改变。除了安装和 SSR 两章之外，其余章节中提到的 API 均支持 Vue 2 和 Vue 3。虽然本文档主要是面向 Vue 3 的用户，但在必要时会标注出 Vue 2 的内容，因此 Vue 2 和 Vue 3 的用户都可以阅读本文档。
+```
+
+#### 基础示例
+```
+下面就是 pinia API 的基本用法 (为继续阅读本简介请确保你已阅读过了开始章节)。你可以先创建一个 Store：
+
+js
+// stores/counter.js
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore('counter', {
+  state: () => {
+    return { count: 0 }
+  },
+  // 也可以这样定义
+  // state: () => ({ count: 0 })
+  actions: {
+    increment() {
+      this.count++
+    },
+  },
+})
+
+然后你就可以在一个组件中使用该 store 了：
+
+vue
+<script setup>
+import { useCounterStore } from '@/stores/counter'
+const counter = useCounterStore()
+counter.count++
+// 自动补全！ ✨
+counter.$patch({ count: counter.count + 1 })
+// 或使用 action 代替
+counter.increment()
+</script>
+<template>
+  <!-- 直接从 store 中访问 state -->
+  <div>Current Count: {{ counter.count }}</div>
+</template>
+```
+
+#### 更真实的示例
+这是一个更完整的 Pinia API 示例，在 JavaScript 中也使用了类型提示。对于某些开发者来说，可能足以在不进一步阅读的情况下直接开始阅读本节内容，但我们仍然建议你先继续阅读文档的其余部分，甚至跳过此示例，在阅读完所有核心概念之后再回来。
+
+```
+js
+import { defineStore } from 'pinia'
+
+export const useTodos = defineStore('todos', {
+  state: () => ({
+    /** @type {{ text: string, id: number, isFinished: boolean }[]} */
+    todos: [],
+    /** @type {'all' | 'finished' | 'unfinished'} */
+    filter: 'all',
+    // 类型将自动推断为 number
+    nextId: 0,
+  }),
+  getters: {
+    finishedTodos(state) {
+      // 自动补全！ ✨
+      return state.todos.filter((todo) => todo.isFinished)
+    },
+    unfinishedTodos(state) {
+      return state.todos.filter((todo) => !todo.isFinished)
+    },
+    /**
+     * @returns {{ text: string, id: number, isFinished: boolean }[]}
+     */
+    filteredTodos(state) {
+      if (this.filter === 'finished') {
+        // 调用其他带有自动补全的 getters ✨
+        return this.finishedTodos
+      } else if (this.filter === 'unfinished') {
+        return this.unfinishedTodos
+      }
+      return this.todos
+    },
+  },
+  actions: {
+    // 接受任何数量的参数，返回一个 Promise 或不返回
+    addTodo(text) {
+      // 你可以直接变更该状态
+      this.todos.push({ text, id: this.nextId++, isFinished: false })
+    },
+  },
+})
+```
\ No newline at end of file
diff --git "a/\344\276\257\345\235\244\351\241\272/\347\254\224\350\256\260/2024.05.16-\345\244\215\344\271\240.md" "b/\344\276\257\345\235\244\351\241\272/\347\254\224\350\256\260/2024.05.16-\345\244\215\344\271\240.md"
new file mode 100644
index 0000000..4b9d337
--- /dev/null
+++ "b/\344\276\257\345\235\244\351\241\272/\347\254\224\350\256\260/2024.05.16-\345\244\215\344\271\240.md"
@@ -0,0 +1,341 @@
+```
+在app.js文件里写：
+
+import Koa from 'koa';
+
+import Router from 'koa-router';
+
+import bodyparser from 'koa-bodyparser';
+
+import cors from 'koa2-cors';
+
+import { Sequelize , DataTypes , Op } from 'sequelize';
+
+const app=new Koa();
+
+let router=new Router(); 
+
+let sequelize=new Sequelize('Good_project','sa','YLJW6195',
+{
+    host:'localhost',
+    dialect:'mssql'
+});
+
+let Goods=sequelize.define('Goods',
+{
+    title:{type:DataTypes.STRING},
+    author:{type:DataTypes.STRING},
+    flag:{type:DataTypes.STRING},
+});
+
+await Goods.sync();
+
+router.get('/goods',async(ctx)=>
+{
+    let keyword = ctx.request.query.keyword || '';
+    keyword = keyword.trim();
+    if (keyword) {
+        let list = await Goods.findAll
+            ({
+                where:
+                {
+                    [Op.or]:
+                    [
+                        { title: { [Op.like]: '%' + keyword + '%' } },
+                        { author: { [Op.like]: '%' + keyword + '%' } },
+                        { flag: { [Op.like]: '%' + keyword + '%' } },
+                    ]
+                }
+            });
+        ctx.body =
+        {
+            code: 1000,
+            data: list,
+            msg: '查找数据成功'
+        };
+    }
+    else {
+        let list = await Goods.findAll();
+        ctx.body =
+        {
+            code: 1000,
+            data: list,
+            msg: '获取所有商品成功'
+        };
+    };
+});
+
+router.get('/goods/:id',async(ctx)=> 
+{
+    let id = ctx.params.id * 1 || 0;
+    let row = await Goods.findAll
+        ({
+            where:
+            {
+                id: id
+            }
+        });
+    let res =
+    {
+        code: 1000,
+        data: row[0],
+        msg: `获取指定id为${id}的商品成功`
+    }
+    ctx.body = res;
+});
+
+router.post('/goods',async(ctx)=>
+{
+    let obj = ctx.request.body;
+    let row = await Goods.create(obj);
+    ctx.body =
+    {
+        code: 1000,
+        data: row,
+        msg: '创建商品成功'
+    };
+});
+
+router.put('/goods/:id',async(ctx)=>
+{
+    let id = ctx.params.id * 1 || 0;
+    let obj = ctx.request.body;
+    let item = Goods.findByPk(id);
+    if (item) 
+    {
+        let data = await Goods.update(obj,
+        {
+            where: { id: id }
+        });
+        ctx.body =
+        {
+            code: 1000,
+            data: data,
+            msg: '修改成功'
+        };
+    }
+    else
+    {
+        ctx.body =
+        {
+            code: 4000,
+            data: null,
+            msg: '找不到'
+        };
+    };
+});
+
+router.delete('/goods/:id',async(ctx)=> 
+{
+    let id = ctx.params.id || 0;
+    let row = await Goods.findByPk(id);
+    if (row) {
+        Goods.destroy
+            ({
+                where: { id: id }
+            });
+        ctx.body =
+        {
+            code: 1000,
+            msg: '删除成功'
+        };
+    }
+    else {
+        ctx.body =
+        {
+            code: 4000,
+            msg: '找不到你要删除的商品，请确认后重试'
+        };
+    };
+});
+
+// 解决跨域问题
+app.use(cors());
+
+// 解决post、put请求拿到表单数据的问题
+app.use(bodyparser());
+
+// 解决路由问题
+app.use(router.routes());
+
+let port=3000;
+
+app.listen(port);
+
+console.log(`http服务器运行与如下地址：http://localhost:${port}`);
+在App.vue文件里写：
+
+<script setup>
+import { onMounted, reactive, ref } from 'vue';
+import axios from 'axios';
+let modelIsShow=ref(false);
+let goods=reactive([]);
+let search=ref('');
+let good=reactive({id:0,title:'',author:'',flag:''});
+onMounted(()=>
+{
+  axios.get('http://localhost:3000/goods').then(res=>
+  {
+    res.data.data.forEach(item => 
+    {
+      goods.push(item);
+    });
+  });
+});
+async function btnDel(id)
+{
+  if(confirm(`请确认是否要删除id为${id}的博客嘛？`))
+  {
+    axios.delete(`http://localhost:3000/goods/${id}`).then(res=>
+    {
+      if (res.data.code === 1000)
+      {
+        axios.get('http://localhost:3000/goods').then(res=>
+        {
+          goods.splice(0, goods.length);
+          res.data.data.forEach(item => 
+          {
+            goods.push(item);
+          });
+        });
+      };
+    });
+  };
+};
+function btnAdd()
+{
+  good.title='';
+  good.author='';
+  good.flag='';
+  modelIsShow.value=true;
+};
+function btnCancel()
+{
+  modelIsShow.value=false;
+};
+async function btnSave()
+{
+  let obj = { title: good.title, author: good.author, flag: good.flag };
+  if(good.id)
+  {
+    let res = await axios.put(`http://localhost:3000/goods/${good.id}`, obj);
+    let data = res.data;
+    console.log(data);
+    if (data.code === 1000) 
+    {
+      let updateBlog = goods.findIndex(item => item.id === good.id);
+      if (updateBlog !== -1)
+      {
+        goods[updateBlog] = { id: good.id, title: good.title, author: good.author, flag: good.flag };
+      }
+      modelIsShow.value = false;
+    };
+  }
+  else
+  {
+    let res = await axios.post('http://localhost:3000/goods', obj);
+    let data = res.data;
+    console.log(data);
+    if (data.code === 1000) 
+    {
+      goods.push(data.data);
+      good.title = '';
+      good.author = '';
+      good.flag = '';
+      modelIsShow.value = false;
+    };
+  }
+};
+function btnEdit(id)
+{
+  let tmpGood=goods.filter((item)=>
+  {
+    return item.id===id;
+  })[0];
+  good.id=tmpGood.id;
+  good.title=tmpGood.title;
+  good.author=tmpGood.author;
+  good.flag=tmpGood.flag;
+  modelIsShow.value=true;
+};
+async function btnQuery()
+{
+
+  let res = await axios.get('http://localhost:3000/goods?keyword=' + search.value);
+  console.log(res.data);
+  goods.splice(0,goods.length);
+  res.data.data.forEach(item =>
+  {
+    goods.push(item);
+  });
+};
+</script>
+
+<template>
+  <div>
+    <div>
+    <input type="text" placeholder="请输入关键字" v-model="search">
+    <input type="button" value="查找" @click="btnQuery()">
+    <input type="button" value="新增" @click="btnAdd()">
+  </div>
+  <div>
+    <table class="tb">
+      <tr>
+        <th>序号</th>
+        <th>标题</th>
+        <th>作者</th>
+        <th>标签</th>
+        <th>操作</th>
+      </tr>
+      <tr v-for="good in goods" :key="good.id">
+        <td>{{ good.id }}</td>
+        <td>{{ good.title }}</td>
+        <td>{{ good.author }}</td>
+        <td>{{ good.flag }}</td>
+        <td>
+          <input type="button" value="编辑" @click="btnEdit(good.id)">
+          <input type="button" value="删除" @click="btnDel(good.id)">
+        </td>
+      </tr>
+    </table>
+  </div>
+  <div v-show="modelIsShow" class="modelBox-Outer">
+    <div class="modelBox">
+      <div class="content-top">
+        <span>标题</span>
+      </div>
+      <hr>
+      <div class="content-middle">
+        <table>
+          <tr>
+            <td><label for="">标题：</label></td>
+            <td><input type="text" v-model="good.title"></td>
+          </tr>
+          <tr>
+            <td><label for="">作者：</label></td>
+            <td><input type="text" v-model="good.author"></td>
+          </tr>
+          <tr>
+            <td><label for="">标签：</label></td>
+            <td><input type="text" v-model="good.flag"></td>
+          </tr>
+        </table>
+      </div>
+      <hr>
+      <div class="content-bottom">
+        <input type="button" value="取消" @click="btnCancel()">
+        <input type="button" value="保存" @click="btnSave()">
+      </div>
+    </div>
+  </div>
+  </div>
+</template>
+
+<style scoped>
+table,tr,th,td
+{
+  border: 1px solid black;
+  border-spacing: 0px;
+}
+</style>
+```
\ No newline at end of file
-- 
Gitee


From 8a178588dbb89dea6f6eb9eedf93518229018177 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Mon, 20 May 2024 11:03:48 +0800
Subject: [PATCH 2/3] c

---
 .../readme.md"                                                    | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename "\344\276\257\345\235\244\351\241\272/\347\254\224\350\256\260/readme.md" => "\344\276\257\345\235\244\351\241\272/readme.md" (100%)

diff --git "a/\344\276\257\345\235\244\351\241\272/\347\254\224\350\256\260/readme.md" "b/\344\276\257\345\235\244\351\241\272/readme.md"
similarity index 100%
rename from "\344\276\257\345\235\244\351\241\272/\347\254\224\350\256\260/readme.md"
rename to "\344\276\257\345\235\244\351\241\272/readme.md"
-- 
Gitee


From 5cfd43a1aa8494843c72740c280edcdd3116c911 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Mon, 20 May 2024 11:06:24 +0800
Subject: [PATCH 3/3] s

---
 "\344\276\257\345\235\244\351\241\272/readme.md" => readme.md | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename "\344\276\257\345\235\244\351\241\272/readme.md" => readme.md (100%)

diff --git "a/\344\276\257\345\235\244\351\241\272/readme.md" b/readme.md
similarity index 100%
rename from "\344\276\257\345\235\244\351\241\272/readme.md"
rename to readme.md
-- 
Gitee