From 61cbd43b31251389b2d2357306444cb7627e8120 Mon Sep 17 00:00:00 2001
From: xiao <xiao>
Date: Sun, 19 May 2024 21:24:42 +0800
Subject: [PATCH] tj

---
 .../20240513 \345\244\215\344\271\240.md"     | 311 ++++++++++++++++++
 .../20240514 pinia.md"                        |  56 ++++
 2 files changed, 367 insertions(+)
 create mode 100644 "\350\202\226\346\226\207\346\205\247/20240513 \345\244\215\344\271\240.md"
 create mode 100644 "\350\202\226\346\226\207\346\205\247/20240514 pinia.md"

diff --git "a/\350\202\226\346\226\207\346\205\247/20240513 \345\244\215\344\271\240.md" "b/\350\202\226\346\226\207\346\205\247/20240513 \345\244\215\344\271\240.md"
new file mode 100644
index 0000000..4c3513e
--- /dev/null
+++ "b/\350\202\226\346\226\207\346\205\247/20240513 \345\244\215\344\271\240.md"	
@@ -0,0 +1,311 @@
+```js
+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}`);
+})
+前端
+
+<template>
+  <div>
+    <label for="">
+      <input type="text" v-model="cxk"><input type="button" value="查询" @click=find><input type="button" value="增加" @click = add>
+    </label>
+    <table>
+      <tr>
+        <th>序号</th>
+        <th>名称</th>
+      <th>标签</th>
+      <th>作者</th>
+      <th>年龄</th>
+      <th>操作</th>
+      </tr>
+      <tr v-for="item,index in arr">
+        <td>{{ index+1 }}</td>
+        <td>{{ item.title }}</td>
+        <td>{{ item.type }}</td>
+        <td>{{ item.name }}</td>
+        <td>{{ item.age }}</td>
+        <td>
+          <input type="button" value="修改" @click="edit(item.id)">
+          <input type="button" value="删除" @click="del(item.id)">
+        </td>
+      </tr>
+    </table>
+    
+  </div>
+  <div v-show="xs" class="mtk">
+      <table>
+        <tr>
+          <td>修改 <label for=""></label></td>
+        </tr>
+        <tr>
+          <td>名称 <label for=""><input type="text" v-model="title"></label></td>
+        </tr>
+        <tr>
+          <td>标签 <label for=""><input type="text" v-model="type"></label></td>
+        </tr>
+        <tr>
+          <td>
+            作者 <label for=""><input type="text" v-model="name"></label>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            年龄 <label for=""><input type="text" v-model="age"></label>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <input type="button" value="取消" @click=qx>
+          <input type="button" value="保存" @click =save1(id)>
+          </td>
+        </tr>
+      </table>
+    </div>
+    
+  <div v-show="xss" class="mtk">
+      <table>
+        <tr>
+          <td>修改 <label for=""></label></td>
+        </tr>
+        <tr>
+          <td>名称 <label for=""><input type="text" v-model="title"></label></td>
+        </tr>
+        <tr>
+          <td>标签 <label for=""><input type="text" v-model="type"></label></td>
+        </tr>
+        <tr>
+          <td>
+            作者 <label for=""><input type="text" v-model="name"></label>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            年龄 <label for=""><input type="text" v-model="age"></label>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <input type="button" value="取消" @click=qx>
+          <input type="button" value="保存" @click =save2>
+          </td>
+        </tr>
+      </table>
+    </div>
+</template>
+<script setup>
+  import { ref,reactive } from "vue";
+  import axios from 'axios'
+  let arr = reactive([])
+  let xs = ref(false)
+  let xss = ref(false)
+  let title = ref('')
+  let name= ref('')
+  let age = ref('')
+  let type = ref('')
+  let idarr = []
+  let cxk = ref('')
+  axios.get('http://localhost:3000/book').then(res=>{
+    let data = res.data
+    data.data.forEach(item => {
+      // console.log(item);
+      arr.push(item)
+    });
+  })
+  function edit(params) {
+    idarr.push(params)
+    xs.value = true
+    console.log(params);
+    axios.get(`http://localhost:3000/book/${params}`).then(res=>{
+    let data = res.data
+      title.value = data.data.title
+      name.value = data.data.name
+      age.value = data.data.age
+      type.value = data.data.type
+    
+    
+  })
+  }
+  function del(params) {
+    axios.delete(`http://localhost:3000/del/${params}`).then(res=>{
+      location.reload()
+    })
+    
+  }
+  function qx() {
+    xs.value = false
+    xss.value = false
+  }
+  function save1() {
+    let id = idarr[idarr.length-1]
+    console.log(id);
+    let obj = {
+      title:title.value,
+      type:type.value,
+      name:name.value,  
+      age:age.value
+    }
+    axios.put(`http://localhost:3000/edit/${id}`,obj).then(res=>{
+      location.reload()
+    })
+    xs.value = false
+  }
+  function save2 (){
+    let obj = {
+      title:title.value,
+      type:type.value,
+      name:name.value,  
+      age:age.value
+    }
+    axios.post(`http://localhost:3000/add`,obj).then(res=>{
+      location.reload()
+    }
+    )
+    xss.value =false
+  }
+  function add() {
+    xss.value = true
+  }
+  function find() {
+    let keyword = cxk.value
+    console.log(keyword);
+    if (keyword == '') {
+      location.reload()
+    }
+    axios.get(`http://localhost:3000/sel?keyword=${keyword}`).then(res=>{
+      arr = []
+      let data = res.data
+      console.log(data.data);
+      data.data.forEach(item=>{
+        arr.push(item)
+      })
+      cxk.value = ""
+    })
+  }
+</script>
+
+<style>
+table,th,tr,td{
+  border: 1px solid;
+  border-spacing: 0px;
+}
+.mtk{
+  width: 100%;
+  height:100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  border: 1px solid black;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+}
+.mtk table{
+  width: 200px;
+  position: relative;
+  top: 30%;
+  left: 35%;
+}
+</style>
+```
\ No newline at end of file
diff --git "a/\350\202\226\346\226\207\346\205\247/20240514 pinia.md" "b/\350\202\226\346\226\207\346\205\247/20240514 pinia.md"
new file mode 100644
index 0000000..7cf1b8c
--- /dev/null
+++ "b/\350\202\226\346\226\207\346\205\247/20240514 pinia.md"	
@@ -0,0 +1,56 @@
+### Pinia 是一个为 Vue 3 设计的状态管理库，具有简单易用的 API 和出色的性能。
+
+ 安装 Pinia
+ 可以通过 npm 或 yarn 安装 Pinia：
+```js
+npm install pinia
+或
+
+yarn add pinia
+```
+
+### 创建 Pinia Store
+要创建一个 Pinia Store，需要引入 defineStore 函数，并定义一个 Store 类。例如：
+
+```js
+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：
+
+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：
+
+import { defineComponent } from 'vue';
+import { useCounterStore } from './store';
+
+export default defineComponent({
+  setup() {
+    const counterStore = useCounterStore();
+
+    return {
+      counterStore,
+    };
+  },
+});
+```
\ No newline at end of file
-- 
Gitee