From db4c0cbf55b6e63c2a6009ec6c860c2e49081e8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E9=B8=BF=E5=A6=82?= <1826474438@qq.com>
Date: Sun, 19 May 2024 20:21:38 +0800
Subject: [PATCH] www

---
 ...66\346\200\201\347\256\241\347\220\206.md" |  54 +++
 .../20240516\350\267\257\347\224\261.md"      | 407 ++++++++++++++++++
 2 files changed, 461 insertions(+)
 create mode 100644 "\351\231\210\351\270\277\345\246\202/Vue\347\254\224\350\256\260/20240513pinia\347\212\266\346\200\201\347\256\241\347\220\206.md"
 create mode 100644 "\351\231\210\351\270\277\345\246\202/Vue\347\254\224\350\256\260/20240516\350\267\257\347\224\261.md"

diff --git "a/\351\231\210\351\270\277\345\246\202/Vue\347\254\224\350\256\260/20240513pinia\347\212\266\346\200\201\347\256\241\347\220\206.md" "b/\351\231\210\351\270\277\345\246\202/Vue\347\254\224\350\256\260/20240513pinia\347\212\266\346\200\201\347\256\241\347\220\206.md"
new file mode 100644
index 0000000..fe2c47a
--- /dev/null
+++ "b/\351\231\210\351\270\277\345\246\202/Vue\347\254\224\350\256\260/20240513pinia\347\212\266\346\200\201\347\256\241\347\220\206.md"
@@ -0,0 +1,54 @@
+### pinia 
+Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。如果你熟悉组合式 API 的话，你可能会认为可以通过一行简单的 export const state = reactive({}) 来共享一个全局状态。对于单页应用来说确实可以，但如果应用在服务器端渲染，这可能会使你的应用暴露出一些安全漏洞。 而如果使用 Pinia，即使在小型单页应用中，你也可以获得如下功能：
+
+```
+Devtools 支持
+追踪 actions、mutations 的时间线
+在组件中展示它们所用到的 Store
+让调试更容易的 Time travel
+热更新
+不必重载页面即可修改 Store
+开发时可保持当前的 State
+插件：可通过插件扩展 Pinia 功能
+为 JS 开发者提供适当的 TypeScript 支持以及自动补全功能。
+支持服务端渲染
+```
+
+下载
+```
+yarn add pinia
+```
+
+使用
+```
+// stores/counter.js
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore('counter', {
+  state: () => {
+    return { count: 0 }
+  },
+  // 也可以这样定义
+  // state: () => ({ count: 0 })
+  actions: {
+    increment() {
+      this.count++
+    },
+  },
+})
+```
+```
+<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>
+```
\ No newline at end of file
diff --git "a/\351\231\210\351\270\277\345\246\202/Vue\347\254\224\350\256\260/20240516\350\267\257\347\224\261.md" "b/\351\231\210\351\270\277\345\246\202/Vue\347\254\224\350\256\260/20240516\350\267\257\347\224\261.md"
new file mode 100644
index 0000000..316bfa4
--- /dev/null
+++ "b/\351\231\210\351\270\277\345\246\202/Vue\347\254\224\350\256\260/20240516\350\267\257\347\224\261.md"
@@ -0,0 +1,407 @@
+## 增删改查完整代码
+### 后端
+/back/app.js
+```js
+import Koa from 'koa';
+import Router from 'koa-router';
+import bodyParser from 'koa-bodyparser';
+import cors from 'koa2-cors';
+import { Op,DataTypes, Sequelize } from 'sequelize';
+
+const app = new Koa();
+const router = new Router();
+
+app.use(cors());
+app.use(bodyParser());
+
+let sequelize = new Sequelize('myData','sa','123456',{
+    host:'localhost',
+    dialect:"mssql"
+})
+
+const Blogs = sequelize.define('Blogs',{
+    Title:{type:DataTypes.STRING},
+    Author:{type:DataTypes.STRING},
+    Flag:{type:DataTypes.STRING}
+})
+await Blogs.sync();
+const blogsData=[
+    {
+        Title:"111",
+        Author:"111",
+        Flag:"11111"
+    },
+    {
+        Title:"222",
+        Author:"222",
+        Flag:"22222"
+    },
+    {
+        Title:"333",
+        Author:"3333",
+        Flag:"33333"
+    },
+    {
+        Title:"444",
+        Author:"555",
+        Flag:"44444"
+    },
+    {
+        Title:"555",
+        Author:"1155551",
+        Flag:"555555"
+    },
+    {
+        Title:"166611",
+        Author:"66666",
+        Flag:"6666666"
+    },
+]
+
+// Blogs.bulkCreate(blogsData).then(()=>{
+//     console.log("初始数据插入成功");
+// })
+
+router.get('/blogs/:id?',async(ctx)=>{
+    let id = ctx.params.id || 0;
+    let keyword = ctx.request.query.keyword;
+    let data ;
+    if(id>0){
+        data = await Blogs.findByPk(id);
+        ctx.body = {
+            code:1000,
+            msg:"查找指定数据成功",
+            data:data
+        }
+    }else{
+        if(keyword){
+            let arr = await Blogs.findAll({
+                where:{
+                    [Op.or]:[
+                        {Title:{[Op.like]:`%${keyword}%`}},
+                        {Author:{[Op.like]:`%${keyword}%`}},
+                        {Flag:{[Op.like]:`%${keyword}%`}}
+                    ]
+                }
+            });
+            ctx.body={
+                code:1000,
+                msg:"关键词查找成功",
+                data:arr
+            }
+        }else{
+            data = await Blogs.findAll();
+            ctx.body={
+                code:1000,
+                msg:"查找全部数据成功",
+                data:data
+            }
+        }
+    }
+})
+
+router.delete(`/blogs/:id`,async(ctx)=>{
+    let id = ctx.params.id;
+    let row = await Blogs.findByPk(id);
+    if(row){
+        Blogs.destroy({
+            where:{
+                id:id
+            }
+        })
+        ctx.body={
+            code:1000,
+            data:null,
+            msg:"删除成功"
+        }
+    }else{
+        ctx.body={
+            code:4000,
+            msg:"找不到",
+            data:null
+        }
+    }
+})
+
+router.post('/blogs',async(ctx)=>{
+    let obj = ctx.request.body;
+    console.log(obj);
+    let data = await Blogs.create(obj);
+    ctx.body={
+        code:1000,
+        data:data,
+        msg:"创建成功"
+    }
+});
+router.put('/blogs/:id',async (ctx)=>{
+    let id = ctx.params.id || 0;
+    let obj = ctx.request.body;
+    let item = await Blogs.findByPk(id);
+    if(item){
+        let data = await Blogs.update(obj,{
+            where:{
+                id:id
+            }
+        });
+        ctx.body={
+            code:1000,
+            data:data,
+            msg:"修改成功"
+        }
+    }else{
+        ctx.body={
+            code:4000,
+            msg:"修改失败"
+        }
+    }
+})
+app.use(router.routes());
+
+let port = 3000;
+app.listen(port);
+console.log(`http://localhost:${port}`);
+```
+
+### 前端
+/front/main.js
+```js
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+
+import Home from './components/Home.vue';
+import EditAndAdd from './components/EditAndAdd.vue';
+import {createRouter,createWebHistory} from 'vue-router'
+
+let router = createRouter({
+    history:createWebHistory(),
+    routes:[
+        {
+            path:'/',
+            component:Home
+        },{
+            path:'/editandadd',
+            component:EditAndAdd
+        }
+    ]
+})
+
+let app = createApp(App);
+app.use(router)
+app.mount('#app')
+
+```
+
+/front/App.vue
+```js
+<template>
+<router-view></router-view>
+</template>
+
+<script setup>
+
+</script>
+
+<style scoped>
+
+</style>
+```
+
+/front/components/Home.vue
+```vue
+<template>
+<div class="big">
+    <div class="top">
+        <input type="text" placeholder="请输入要查询的内容" name="" id="" v-model="find">
+        <input type="button" value="查找" name="" id="" @click="btnFind()">
+        <input type="button" value="新增" name="" id="" @click="btnAdd()">
+    </div>
+    <div class="center">
+      <table class="tb">
+        <tr>
+          <td>ID</td>
+          <td>标题</td>
+          <td>作者</td>
+          <td>标签</td>
+          <td>操作</td>
+        </tr>
+        <tr v-for="(item,index) in list" :key="item.id">
+          <td>{{ index+1 }}</td>
+          <td>{{item.Title}}</td>
+          <td>{{item.Author}}</td>
+          <td>{{item.Flag}}</td>
+          <td>
+            <input type="button" value="删除" name="" id="" @click="btnDel(item.id)">
+            <input type="button" value="编辑" name="" id="" @click="btnEdit(item.id)">
+          </td>
+        </tr>
+
+      </table>
+    </div>
+</div>
+</template>
+
+<script setup>
+import { onMounted, reactive,ref } from 'vue';
+import {useRouter} from 'vue-router'
+import axios from 'axios';
+let find = ref('')
+let list = reactive([]);
+let router = useRouter()
+onMounted(async()=>{
+  let data = await axios.get(`http://localhost:3000/blogs`);
+  console.log(data);
+  data.data.data.forEach(item => {
+    list.push(item)
+  });
+})
+
+
+async function btnFind(){
+  // console.log('1111');
+  let findList = await axios.get(`http://localhost:3000/blogs?keyword=${find.value}`);
+  // console.log(findList);
+  list.splice(0);
+  findList.data.data.forEach(item=>{
+    list.push(item)
+  })
+}
+function btnAdd(){
+  // console.log('1111');
+  router.push('/editandadd')
+}
+async function btnDel(id){
+  console.log(id);
+  if(confirm('确认删除？')){
+    const index = list.findIndex(item=>item.id===id)
+    list.splice(index,1)
+    let res = await axios.delete(`http://localhost:3000/blogs/${id}`)
+    console.log(res);
+  }
+}
+function btnEdit(id){
+  // console.log('1111');
+  router.push(
+    {path:`/editandadd`,query:{id:id}}
+  )
+}
+</script>
+
+<style scoped>
+.big{
+  height:400px;
+  width:500px;
+  border: 1px solid;
+  /* display:flex;
+  justify-content: center; */
+  position:relative
+}
+.top{
+  position: absolute;
+  top: 10px;
+  left: 150px;
+}
+.center{
+  position: absolute;
+  top: 45px;
+  left: 30px;
+}
+.tb{
+  /* display: flex; */
+  height:300px;
+  width:450px;
+  border: 1px solid;
+  border-radius:5px;
+  
+}
+</style>
+```
+/front/components/EditAndAdd.vue
+
+```vue
+<template>
+    <div class="add">
+        <table class="tb">
+            <tr>
+                <td><label for="">标题：</label></td>
+                <td><input type="text" v-model="edata.Title"></td>
+            </tr>
+            <tr>
+                <td><label for="">作者：</label></td>
+                <td><input type="text" v-model="edata.Author"></td>
+            </tr>
+            <tr>
+                <td><label for="">标签：</label></td>
+                <td><input type="text" v-model="edata.Flag"></td>
+            </tr>
+            <tr>
+                <td><input type="button" value="保存" @click="btnSave"></td>
+                <td><input type="button" value="取消" name="" id="" @click="btnCancel"></td>
+            </tr>
+
+        </table>
+    </div>
+
+</template>
+
+<script setup>
+import {useRouter,useRoute} from 'vue-router'
+import {reactive,onMounted} from 'vue';
+import axios from 'axios'
+let router = useRouter()
+let route = useRoute()
+let edata = reactive({
+    Title:"",
+    Author:"",
+    Flag:"",
+
+})
+onMounted(async()=>{
+    let id = route.query.id;
+    // console.log(id);
+    if(id>0){
+        let editdata = await axios.get(`http://localhost:3000/blogs/${id}`)
+        console.log(editdata);
+        edata.Title=editdata.data.data.Title;
+        edata.Author=editdata.data.data.Author;
+        edata.Flag=editdata.data.data.Flag
+        edata.id=editdata.data.data.id
+
+    }
+})
+async function btnSave(){
+    console.log(edata);
+   let obj = {
+    Title:edata.Title,
+    Author:edata.Author,
+    Flag:edata.Flag
+   }
+   console.log(obj);
+    if(edata.id>0){
+        await axios.put(`http://localhost:3000/blogs/${edata.id}`,obj);
+    }else{
+        await axios.post(`http://localhost:3000/blogs`,obj)
+    }
+router.push('/')
+}
+function btnCancel(){
+    // console.log(111);
+    router.push('/')
+}
+
+</script>
+
+<style scoped>
+.add {
+    width: 600px;
+    height: 400px;
+    border: 1px solid;
+    display: flex;
+}
+.tb{
+    
+    padding-left: 150px;
+    padding-top: 50px;
+}
+</style>
+```
\ No newline at end of file
-- 
Gitee