From 9edefbb215220816ac5dbf0c66fb807bb31846ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AE=B8=E6=99=A8?=
 <11820282+xu-chenlll@user.noreply.gitee.com>
Date: Sun, 19 May 2024 12:58:49 +0000
Subject: [PATCH 1/2] =?UTF-8?q?=E7=AC=94=E8=AE=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 许晨 <11820282+xu-chenlll@user.noreply.gitee.com>
---
 .../20240516-\345\244\215\344\271\240Vue.md"  | 300 ++++++++++++++++++
 1 file changed, 300 insertions(+)
 create mode 100644 "\350\256\270\346\231\250/20240516-\345\244\215\344\271\240Vue.md"

diff --git "a/\350\256\270\346\231\250/20240516-\345\244\215\344\271\240Vue.md" "b/\350\256\270\346\231\250/20240516-\345\244\215\344\271\240Vue.md"
new file mode 100644
index 0000000..0e19da9
--- /dev/null
+++ "b/\350\256\270\346\231\250/20240516-\345\244\215\344\271\240Vue.md"
@@ -0,0 +1,300 @@
+## 复习Vue
+
+
+## 前端
+```
+
+<script setup>
+import { onMounted,ref } from 'vue';
+import axios from 'axios';
+let list=ref([]);
+let searchInput=ref('');
+let isShow=ref(false);
+let bookinfo=ref({});
+onMounted(()=>{
+getData(); 
+})
+
+async function getData(){
+  let res=await axios.get('http://localhost:3000/book');
+ console.log(res);
+  list.value=res.data.data
+}
+
+async function find(){
+  console.log(searchInput.value);
+  let res=await axios.get('http://localhost:3000/book?keyword='+searchInput.value);
+  
+  list.value=res.data.data
+}
+
+async function del(id){
+let res=await axios.delete('http://localhost:3000/book/'+id)
+console.log(res);
+location.reload() // 刷新一次当前页面
+}
+
+
+function add(){
+isShow.value=!isShow.value;
+bookinfo.value= []
+}
+
+
+function cancel(){
+isShow.value=!isShow.value
+}
+
+ async function edit(id){
+  isShow.value=!isShow.value;
+  console.log(id);
+  let res=await axios.get('http://localhost:3000/book/'+id);
+  bookinfo.value=res.data.data;
+
+
+}
+
+async function save(){
+  if(bookinfo.value.id){
+    let res=await axios.put('http://localhost:3000/book/'+bookinfo.value.id,bookinfo.value);
+console.log(res);
+if(res.data.code==3000){
+getData()
+isShow.value=!isShow.value;
+ }
+  }
+  else{
+    let res=await axios.post('http://localhost:3000/book',bookinfo.value)
+    console.log(res);
+    if(res.data.code==3000){
+      getData();
+      isShow.value=!isShow.value;
+    }
+  }
+}
+
+</script>
+
+<template>
+<div class="top">
+  <input type="text" placeholder="请输入关键字" v-model="searchInput">
+<button @click="find">查找</button>
+<button @click="add">新增</button>
+</div>
+<div class="content">
+  <table class="tb" @click="go">
+    <tr>
+      <th>id</th>
+      <th>书名</th>
+      <th>作者</th>
+      <th>价格</th>
+      <th>出版社</th>
+      <th>操作</th>
+    </tr>
+    <tr v-for="item in list" :key="item.id">
+      <td>{{ item.id }}</td>
+      <td>{{item.bookname }}</td>
+      <td>{{ item.author }}</td>
+      <td>{{ item.price }}</td>
+      <td>{{ item.publish }}</td>
+      <td>
+        <button @click="edit(item.id)">编辑</button>
+      <button @click="del(item.id)">删除</button> 
+      </td>
+     
+    </tr>
+  </table>
+</div>
+
+<div class="modal" v-if="isShow">
+<div class="modal-center">
+<table>
+  <tr>
+    <td>书名：</td>
+    <td><input type="text" v-model="bookinfo.bookname"></td>
+  </tr>
+  <tr>
+    <td>作者：</td>
+    <td><input type="text" v-model="bookinfo.author"></td>
+  </tr>
+  <tr>
+    <td>价钱：</td>
+    <td><input type="text" v-model="bookinfo.price"></td>
+  </tr>
+  <tr>
+    <td>出版社：</td>
+    <td><input type="text" v-model="bookinfo.publish"></td>
+  </tr>
+
+  <tr>
+    <td></td>
+    <td>
+      <button @click="save">保存</button>
+      <button @click="cancel">取消</button>
+    </td>
+  </tr>
+</table>
+</div>
+</div>
+</template>
+
+<style scoped>
+.content .tb,tr,td,th{
+  border: 1px solid;
+  border-collapse: collapse;
+}
+.modal{
+  position: fixed;
+  top:0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, .2);
+
+}
+.modal .modal-center{
+  background-color: #fff;
+  width: 400px;
+  height: 200px;
+  margin: 300px auto;
+  border-radius: 30px;
+  padding: 30px 30px;
+}
+</style>
+
+```
+
+## 后端
+
+```
+import Koa from 'koa';
+import Router from 'koa-router';
+import cors from 'koa2-cors';
+import bodyParser from 'koa-bodyparser';
+import { Sequelize,DataTypes,Op } from 'sequelize';
+
+const app=new Koa();
+const router=new Router();
+
+const sequelize=new Sequelize('BookDb','sa','123456',{
+    host:'localhost',
+    dialect:'mssql'
+    
+})
+
+const booklist=sequelize.define('booklist',{
+    bookname:{type:DataTypes.STRING},
+    author:{type:DataTypes.STRING},
+    price:{type:DataTypes.STRING},
+    publish:{type:DataTypes.STRING},
+})
+
+booklist.sync();
+
+router.get('/book/:id?',async(ctx)=>{
+    let keyword=ctx.query.keyword;
+    let id=ctx.params.id * 1 || 0;
+    let data;
+    if(keyword){
+        data=await booklist.findAll({
+            where:{
+                [Sequelize.Op.or]:[
+                    {id:{[Sequelize.Op.like]:'%'+keyword+'%'}},
+                    {bookname:{[Sequelize.Op.like]:'%'+keyword+'%'}},
+                    {price:{[Sequelize.Op.like]:'%'+keyword+'%'}},
+                    {publish:{[Sequelize.Op.like]:'%'+keyword+'%'}},
+                ]
+            }
+        })
+    }else if(id){
+        data=await booklist.findByPk(id)
+    }else{
+        data=await booklist.findAll()
+    }
+    ctx.body={
+        msg:'查找成功',
+        code:3000,
+        data:data,
+    }
+})
+
+router.delete('/book/:id',async(ctx)=>{
+    let id=ctx.params.id * 1 || 0;
+if(id>0){
+    let data=await booklist.destroy({
+        where:{
+            id:id
+        }
+    })
+    ctx.body={
+        msg:'删除成功',
+        code:3000,
+        data:data
+    }
+}else{
+    ctx.body={
+        msg:'删除失败',
+        code:1000,
+        data:data
+    }
+}
+ 
+   
+
+
+})
+
+router.put('/book/:id',async(ctx)=>{
+    let id=ctx.params.id * 1 || 0;
+    let obj=ctx.request.body;
+    let item=booklist.findByPk(id);
+    let data;
+    if(item){
+        data=await booklist.update(obj,{
+            where:{
+                id:id
+            }
+        })
+        ctx.body={
+            msg:'修改成功',
+            code:3000,
+            data:data
+        }
+    }else{
+        ctx.body={
+            msg:'修改失败',
+            code:1000,
+            data:data
+        }
+    }
+})
+
+router.post('/book',async(ctx)=>{
+    let obj=ctx.request.body;
+    let data;
+    if(obj){
+        data=await booklist.create(obj)
+        ctx.body={
+            msg:'新增成功',
+            code:3000,
+            data:data
+        }
+    }else{
+        ctx.body={
+            msg:'新增失败',
+            code:1000,
+            data:data
+        }
+    }
+    
+})
+
+app.use(bodyParser());
+app.use(cors());
+app.use(router.routes());
+
+let port=3000;
+app.listen(port);
+console.log(`服务运行地址如下 http://localhost:${port}`);
+
+```
\ No newline at end of file
-- 
Gitee


From f251e008c8644951afab09795b51066d5adf7c7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AE=B8=E6=99=A8?=
 <11820282+xu-chenlll@user.noreply.gitee.com>
Date: Sun, 19 May 2024 13:24:59 +0000
Subject: [PATCH 2/2] =?UTF-8?q?=E7=AC=94=E8=AE=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: 许晨 <11820282+xu-chenlll@user.noreply.gitee.com>
---
 ...20240513-\350\256\244\350\257\206pinia.md" | 107 ++++++++++++++++++
 1 file changed, 107 insertions(+)
 create mode 100644 "\350\256\270\346\231\250/20240513-\350\256\244\350\257\206pinia.md"

diff --git "a/\350\256\270\346\231\250/20240513-\350\256\244\350\257\206pinia.md" "b/\350\256\270\346\231\250/20240513-\350\256\244\350\257\206pinia.md"
new file mode 100644
index 0000000..c245788
--- /dev/null
+++ "b/\350\256\270\346\231\250/20240513-\350\256\244\350\257\206pinia.md"
@@ -0,0 +1,107 @@
+## 认识pinia
+Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。如果你熟悉组合式 API 的话，你可能会认为可以通过一行简单的 export const state = reactive({}) 来共享一个全局状态。对于单页应用来说确实可以，但如果应用在服务器端渲染，这可能会使你的应用暴露出一些安全漏洞。 而如果使用 Pinia，即使在小型单页应用中，你也可以获得如下功能：
+
+1.Devtools 支持
+
+- 追踪 actions、mutations 的时间线
+- 在组件中展示它们所用到的 Store
+- 让调试更容易的 Time travel
+
+2.热更新
+- 不必重载页面即可修改 Store
+- 开发时可保持当前的 State
+
+3.插件：可通过插件扩展 Pinia 功能
+
+4.为 JS 开发者提供适当的 TypeScript 支持以及自动补全功能
+
+5.支持服务端渲染
+
+## 定义一个Store
+在深入了解核心概念之前，我们需要知道 Store 是使用 defineStore() 定义的，并且它需要一个唯一名称，作为第一个参数传递：
+```
+
+import { defineStore } from 'pinia'
+
+// useStore 可以是 useUser、useCart 之类的任何东西
+// 第一个参数是应用程序中 store 的唯一 id
+export const useStore = defineStore('main', {
+  // other options...
+})
+这个 name，也称为 id，是必要的，Pinia 使用它来将 store 连接到 devtools。 将返回的函数命名为 use... 是跨可组合项的约定，以使其符合你的使用习惯。
+
+
+```
+
+## 使用store
+我们正在 定义 一个 store，因为在 setup() 中调用 useStore() 之前不会创建 store：
+
+```
+import { useStore } from '@/stores/counter'
+
+export default {
+  setup() {
+    const store = useStore()
+
+    return {
+      // 您可以返回整个 store 实例以在模板中使用它
+      store,
+    }
+  },
+}
+
+```
+
+您可以根据需要定义任意数量的 store ，并且**您应该在不同的文件中定义每个 store **以充分利用 pinia（例如自动允许您的包进行代码拆分和 TypeScript 推理）。
+
+如果您还没有使用 setup 组件，您仍然可以将 Pinia 与 map helpers 一起使用。
+
+一旦 store 被实例化，你就可以直接在 store 上访问 state、getters 和 actions 中定义的任何属性。 我们将在接下来的页面中详细介绍这些内容，但自动补全会对您有所帮助。
+
+请注意，store 是一个用reactive 包裹的对象，这意味着不需要在getter 之后写.value，但是，就像setup 中的props 一样，我们不能对其进行解构：
+
+```
+export default defineComponent({
+  setup() {
+    const store = useStore()
+    // ❌ 这不起作用，因为它会破坏响应式
+    // 这和从 props 解构是一样的
+    const { name, doubleCount } = store
+
+    name // "eduardo"
+    doubleCount // 2
+
+    return {
+      // 一直会是 "eduardo"
+      name,
+      // 一直会是 2
+      doubleCount,
+      // 这将是响应式的
+      doubleValue: computed(() => store.doubleCount),
+      }
+  },
+})
+
+```
+
+为了从 Store 中提取属性同时保持其响应式，您需要使用storeToRefs()。 它将为任何响应式属性创建 refs。 当您仅使用 store 中的状态但不调用任何操作时，这很有用：
+
+```
+import { storeToRefs } from 'pinia'
+
+export default defineComponent({
+  setup() {
+    const store = useStore()
+    // `name` 和 `doubleCount` 是响应式引用
+    // 这也会为插件添加的属性创建引用
+    // 但跳过任何 action 或 非响应式（不是 ref/reactive）的属性
+    const { name, doubleCount } = storeToRefs(store)
+
+    return {
+      name,
+      doubleCount
+    }
+  },
+})
+
+```
\ No newline at end of file
-- 
Gitee