From 0be6753498b09784ede87b8cac54fbcb69349ff7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E9=9B=AA=E8=8A=B3=EF=BC=88Charlie=EF=BC=89?=
 <2332958287@qq.com>
Date: Mon, 13 May 2024 19:17:32 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=E7=8A=B6=E6=80=81=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...66\346\200\201\347\256\241\347\220\206.md" | 187 ++++++++++++++++++
 1 file changed, 187 insertions(+)
 create mode 100644 "\351\273\204\351\233\252\350\212\263/20240523_\347\212\266\346\200\201\347\256\241\347\220\206.md"

diff --git "a/\351\273\204\351\233\252\350\212\263/20240523_\347\212\266\346\200\201\347\256\241\347\220\206.md" "b/\351\273\204\351\233\252\350\212\263/20240523_\347\212\266\346\200\201\347\256\241\347\220\206.md"
new file mode 100644
index 0000000..6df3115
--- /dev/null
+++ "b/\351\273\204\351\233\252\350\212\263/20240523_\347\212\266\346\200\201\347\256\241\347\220\206.md"
@@ -0,0 +1,187 @@
+### 一、什么是状态管理
+- 对于大项目来说，组件多，状态零散分布在许多组件和组件之间的交互操作中，这时候就需要状态管理，理论上来说，每一个 Vue 组件实例都已经在“管理”它自己的响应式状态了
+- 示例如下：
+~~~html
+<!-- 计数器 -->
+<script setup>
+import { ref } from 'vue'
+
+// 状态
+const count = ref(0)
+
+// 动作
+function add() {
+  count.value++
+}
+</script>
+
+<!-- 视图 -->
+<template>{{ count }}</template>
+~~~
+- 上面代码中，当add方法不断被调用时，count的值就会不断增加显示在页面上，这样叫做“状态自管理”，由以下几个部分组成：
+  - 状态(state)：驱动整个应用的数据源
+  - 视图(view)：对状态的一种声明式映射
+  - 交互(actions)：状态根据用户在视图中的输入而作出相应变更的可能方式 
+
+  但是以上只是一个单向数据流，即从view上出发action改变state，state的改变最终回到view上，然而，当我们有多个组件共享一个共同的状态时，就会出现以下问题：
+     - 多个组件依赖于同一状态
+     - 来自不同视图的交互也可能需要更改同一份状态
+
+### 二、使用Pinia实现状态管理
+#### 1.安装
+~~~js
+npm install pinia
+~~~
+#### 2.创建pinia实例
+~~~js
+// main.js
+import {createPinia} from 'pinia';
+let app = createApp(App);
+const pinia = createPinia();
+app.use(pinia);
+~~~
+#### 3.pinia的基本用法
+##### 1.创建store实例
+~~~js
+// stores/counter.js
+import { defineStore } from 'pinia';
+
+// Option对象写法
+export const useCountStore = defineStore('count',{
+  state:()=>{
+    return {count:0}
+  },
+  // 也可以写为
+  // state: () => ({ count: 0 })，这里用大括号是为了让他以对象的形式返回出来
+  actions:{
+    onClick(){
+      this.count++
+    }
+  }
+})
+
+// Setup函数写法
+export const useCountStore = defineStore('count',()=>{
+    let count = ref(0);
+    function onClick(){
+        count.value++;
+    };
+    return{count,onClick}
+})
+~~~
+store的参数：
+ - 第一个参数要求不可重复
+ - 第二个参数可以接受两种类型的值：Setup函数或Option对象
+    - Setup：
+      - ref() 就是 state 属性，computed() 就是 getters，computed() 就是 getters
+      - 在 setup store 中返回 state 的所有属性
+    - Option：state 是 store 的数据 (data)，getters 是 store 的计算属性 (computed)，而 actions 则是方法 (methods)
+##### 2.在组件中使用store
+~~~html
+<template>
+  <div>
+    count: {{ counter.count }}
+    <button @click="counter.onClick()">点击+1</button>
+  </div>
+</template>
+<script setup>
+import { useCountStore } from './stores/counter';
+// 可以在组件中的任意位置访问 `store` 变量
+const counter = useCountStore();
+// 可以直接使用counter.count访问
+</script>
+~~~
+从store解构
+为了从 store 中提取属性时保持其响应性，需要使用 storeToRefs()，但是可以直接从 store 中解构 action
+~~~js
+import {storeToRefs} from 'pinia';
+const counter = useCountStore();
+// 并且会跳过所有的 action 或非响应式 (不是 ref 或 reactive) 的属性
+const {count} = storeToRefs(counter);
+// 作为 action 的 onClick 可以直接解构
+const {onClick} = counter
+~~~
+
+### 三、State
+#### 1.概念
+state是 store 的核心,被定义为一个返回初始状态的函数
+#### 2.访问
+~~~js
+const counter = useCountStore();
+// 访问的是state的初始状态
+// 也可以直接对其读写
+const data = counter.count;
+~~~
+#### 3.重置
+通过调用 store 的 $reset() 方法将 state 重置为初始值
+~~~js
+// counter.js
+export const useCountStore = defineStore('count',()=>{
+    let count = ref(0);
+    function onClick(){
+        count.value++;
+    };
+    // 创建自己的 $reset() 方法
+    function $reset(){
+        count.value=0;
+    }
+    return{count,onClick,$reset}
+})
+~~~
+~~~html
+<!-- app.vue -->
+<template>
+  <div>
+    count: {{ counter.count }}
+    <button @click="counter.onClick">点击+1</button>
+    <button @click="reset">重置</button>
+  </div>
+</template>
+
+<script setup>
+import { useCountStore } from './stores/counter';
+const counter = useCountStore();
+const reset = ()=>{
+  counter.$reset();
+}
+</script>
+~~~
+#### 4.变更
+用 store.count++ 直接改变 store，还可以调用 $patch 方法
+#### 5.替换
+不能完全替换掉 store 的 state，因为那样会破坏其响应性，还是使用patch
+
+### 四、Getter
+Getter 完全等同于 store 的 state 的计算属性
+~~~js
+export const useCountStore = defineStore('count',{
+  state:()=>{
+    return {count:1}
+  },
+  actions:{
+    onClick(){
+      this.count++
+    }
+  },
+  getters: {
+    doubleCount: (state) => state.count * 2,
+  },
+})
+~~~
+- 大多数时候，getter 仅依赖 state，不过，有时它们也可能会使用其他 getter,通过 this，你可以访问到其他任何 getter
+- getter 只是幕后的计算属性，所以不可以向它们传递任何参数。不过，你可以从 getter 返回一个函数，该函数可以接受任意参数
+~~~js
+export const useUsersStore = defineStore('users', {
+  getters: {
+    getUserById: (state) => {
+      // 可以返回函数,这个返回的函数可以接受容易参数
+      return (userId) => state.users.find((user) => user.id === userId)
+    },
+  },
+})
+  // 调用
+  
+~~~
+
+### 五、Action
+Action 相当于组件中的方法，也可通过 this 访问整个 store 实例，而且是可以异步的
\ No newline at end of file
-- 
Gitee


From 1d22c3ba1a88375931bd9c48671bde31bb566158 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E9=9B=AA=E8=8A=B3=EF=BC=88Charlie=EF=BC=89?=
 <2332958287@qq.com>
Date: Mon, 13 May 2024 20:26:19 +0800
Subject: [PATCH 2/4] =?UTF-8?q?=E5=9B=9B=E4=B8=AA=E5=8E=9F=E5=9E=8B?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...37\346\210\220\350\241\250\345\215\225.md" | 116 ++++++++++++++
 ...76\344\271\246\347\256\241\347\220\206.md" |  99 ++++++++++++
 ...05\345\212\236\344\272\213\351\241\271.md" | 150 ++++++++++++++++++
 .../\350\264\255\347\211\251\350\275\246.md"  |  22 +++
 ...\344\271\240(\346\224\271\350\211\257).md" |  13 --
 5 files changed, 387 insertions(+), 13 deletions(-)
 create mode 100644 "\351\273\204\351\233\252\350\212\263/20240512_\345\233\233\344\270\252\345\216\237\345\236\213\347\232\204\345\256\236\347\216\260/\345\212\250\346\200\201\347\224\237\346\210\220\350\241\250\345\215\225.md"
 create mode 100644 "\351\273\204\351\233\252\350\212\263/20240512_\345\233\233\344\270\252\345\216\237\345\236\213\347\232\204\345\256\236\347\216\260/\345\233\276\344\271\246\347\256\241\347\220\206.md"
 create mode 100644 "\351\273\204\351\233\252\350\212\263/20240512_\345\233\233\344\270\252\345\216\237\345\236\213\347\232\204\345\256\236\347\216\260/\345\276\205\345\212\236\344\272\213\351\241\271.md"
 create mode 100644 "\351\273\204\351\233\252\350\212\263/20240512_\345\233\233\344\270\252\345\216\237\345\236\213\347\232\204\345\256\236\347\216\260/\350\264\255\347\211\251\350\275\246.md"
 delete mode 100644 "\351\273\204\351\233\252\350\212\263/20240512_\345\233\233\344\270\252\347\273\203\344\271\240(\346\224\271\350\211\257).md"

diff --git "a/\351\273\204\351\233\252\350\212\263/20240512_\345\233\233\344\270\252\345\216\237\345\236\213\347\232\204\345\256\236\347\216\260/\345\212\250\346\200\201\347\224\237\346\210\220\350\241\250\345\215\225.md" "b/\351\273\204\351\233\252\350\212\263/20240512_\345\233\233\344\270\252\345\216\237\345\236\213\347\232\204\345\256\236\347\216\260/\345\212\250\346\200\201\347\224\237\346\210\220\350\241\250\345\215\225.md"
new file mode 100644
index 0000000..e90e5ec
--- /dev/null
+++ "b/\351\273\204\351\233\252\350\212\263/20240512_\345\233\233\344\270\252\345\216\237\345\236\213\347\232\204\345\256\236\347\216\260/\345\212\250\346\200\201\347\224\237\346\210\220\350\241\250\345\215\225.md"
@@ -0,0 +1,116 @@
+### 效果图
+![生成表单-2024-5-1320:24:04.gif](https://gitee.com/huangxuefang0929/xiu_img/raw/master/%E7%94%9F%E6%88%90%E8%A1%A8%E5%8D%95-2024-5-1320:24:04.gif)
+
+### 部分代码
+~~~html
+<form action="">
+  <h2>生成表单</h2>
+  <table>
+    <template v-for="(item, index) in arrForms" :key="index">
+      <tr v-if="item.type === 'text' || item.type === 'textarea'">
+        <td>
+          <label>{{ item.label }}：</label>
+        </td>
+        <td>
+          <input v-if="item.type === 'text'" type="text" v-model="formData[item.name]" class="input">
+          <textarea v-else-if="item.type === 'textarea'" v-model="formData[item.name]" class="input"></textarea>
+        </td>
+      </tr>
+      <tr v-else-if="item.type === 'radio'">
+        <td>
+          <label>{{ item.label }}：</label>
+        </td>
+        <td>
+          <div class="redio" style="width: 100px;">
+            <label v-for="(option, idx) in item.options" :key="idx">
+            <input type="radio" :value="option" v-model="formData[item.name]">
+            {{ option }}
+          </label>
+          </div>
+          
+        </td>
+      </tr>
+      <tr v-else-if="item.type === 'checkbox'">
+        <td>
+          <label>{{ item.label }}：</label>
+        </td>
+        <td>
+          <label v-for="(option, idx) in item.options" :key="idx">
+            <input type="checkbox" :value="option" v-model="formData[item.name][option]">
+            {{ option }}
+          </label>
+        </td>
+      </tr>
+      <tr v-else-if="item.type === 'select'">
+        <td>
+          <label>{{ item.label }}：</label>
+        </td>
+        <td>
+          <select v-model="formData[item.name]">
+            <option v-for="(option, idx) in item.options" :key="idx" :value="option">
+              {{ option }}
+            </option>
+          </select>
+        </td>
+      </tr>
+    </template>
+    <tr>
+      <td></td>
+      <td v-if="isShow">
+        <input type="button" value="提交表单" @click="save" class="save">
+        
+      </td>
+    </tr>
+  </table>
+</form>
+<script setup>
+ import { reactive, ref } from 'vue';
+ // 用来保存字符串类型的值，这里它用来存储表单配置的JSON字符串
+ let forms = ref('');
+ // 用来存储表单的输入数据
+ let formData = reactive({});
+ // 用来存储构建好的表单结构
+ let arrForms = reactive([]);
+ let isShow = ref(false);
+ 
+ function save() {
+  const selectedData = {};
+  for (const key in formData) {
+    if (Object.prototype.hasOwnProperty.call(formData, key)) {
+      // 判断当前遍历的 formData 属性是否是一个对象
+      if (typeof formData[key] === 'object') {
+        // 如果当前属性是一个对象（例如复选框组的选项），则在 selectedData 对象中为这个属性创建一个新的对象，用来存储用户的选择
+        selectedData[key] = {};
+        for (const subKey in formData[key]) {
+          if (Object.prototype.hasOwnProperty.call(formData[key], subKey) && formData[key][subKey]) {
+            selectedData[key][subKey] = true;
+          }
+        }
+      } else {
+        selectedData[key] = formData[key];
+      }
+    }
+  }
+  console.log(selectedData);
+ }
+
+ function build() {
+  isShow.value = true;
+  // 将 forms 的值（一个JSON字符串）解析为一个数组 arr
+  let arr = JSON.parse(forms.value);
+  arrForms.splice(0, arrForms.length); // 清空原有表单项
+  arr.forEach(item => {
+    // 如果表单项类型是复选框（checkbox），它会为 formData 创建一个对应的新对象
+    if (item.type === 'checkbox') {
+      formData[item.name] = {};
+      item.options.forEach(option => {
+        formData[item.name][option] = false; // 初始化每个选项的状态为 false
+      });
+    } else {
+      formData[item.name] = ''; // 初始化其他类型的表单项
+    }
+    arrForms.push(item); // 添加新的表单项
+  });
+ }
+</script>
+~~~
\ No newline at end of file
diff --git "a/\351\273\204\351\233\252\350\212\263/20240512_\345\233\233\344\270\252\345\216\237\345\236\213\347\232\204\345\256\236\347\216\260/\345\233\276\344\271\246\347\256\241\347\220\206.md" "b/\351\273\204\351\233\252\350\212\263/20240512_\345\233\233\344\270\252\345\216\237\345\236\213\347\232\204\345\256\236\347\216\260/\345\233\276\344\271\246\347\256\241\347\220\206.md"
new file mode 100644
index 0000000..4cc3457
--- /dev/null
+++ "b/\351\273\204\351\233\252\350\212\263/20240512_\345\233\233\344\270\252\345\216\237\345\236\213\347\232\204\345\256\236\347\216\260/\345\233\276\344\271\246\347\256\241\347\220\206.md"
@@ -0,0 +1,99 @@
+### 效果图
+![图书管理-2024-5-1320:24:07.gif](https://gitee.com/huangxuefang0929/xiu_img/raw/master/%E5%9B%BE%E4%B9%A6%E7%AE%A1%E7%90%86-2024-5-1320:24:07.gif)
+
+### 部分代码
+1.home.vue
+~~~html
+<script setup>
+  import { reactive,ref,onMounted,computed } from 'vue';
+  import axios from 'axios';
+  const keyWord = ref('');
+  const blogs = reactive([]);
+  const blog = reactive({
+    id: 0,
+    title: '',
+    author: '',
+    flag: ''
+  });
+  onMounted(async()=>{
+    let res = await axios.get('http://localhost:3000/blog');
+    let blogData = res.data;
+    blogData.data.forEach( item => {
+      blogs.push(item);
+    })
+  });
+  // 编辑
+  function edit(id){
+      let tmpblog = blogs.filter((item) => {
+        return item.id === id;
+      })[0];
+      blog.id = tmpblog.id;
+      blog.title = tmpblog.title;
+      blog.author = tmpblog.author;
+      blog.flag = tmpblog.flag;
+  }
+  // 删除
+  async function del(id){
+    if(confirm('是否删除？')){
+      let res = await axios.delete(`http://localhost:3000/blog/${id}`);
+      if(res.data.code === 1000){
+        const index = blogs.findIndex(item => item.id === id); // 查找要删除元素的索引
+        if (index !== -1) { // 确保找到了要删除的元素
+          blogs.splice(index, 1); // 使用splice删除元素
+        }
+      }
+    }
+  }
+  // 查询
+  async function search() {
+    const keyword = keyWord.value.trim();
+    const res = await axios.get(`http://localhost:3000/blog?keyword=${keyword}`);
+    if (res.data.code === 1000) {
+      const searchData = res.data.data;
+      blogs.forEach(item => {
+        item.hide = true; // 先隐藏所有条目
+        searchData.forEach(searchItem => {
+          if (item.id === searchItem.id) {
+            item.hide = false; // 显示匹配到的条目
+          }
+        });
+      });
+    }
+  }
+</script>
+~~~
+2.add.vue
+~~~js
+async function save(){
+  let obj ={
+    title:blog.title,
+    author:blog.author,
+    flag:blog.flag
+  }
+    let res = await axios.post('http://localhost:3000/blog', obj);
+    if (res.data.code === 1000) {
+      blogs.push(res.data.data);
+      router.push('/home');
+    }
+  
+}
+function cancel(){
+  router.push('/home');
+}
+~~~
+3.edit.vue
+~~~js
+onMounted(async () => {
+  // 获取编辑的博客数据
+  const blogId = router.currentRoute.value.params.id;
+  const res = await axios.get(`http://localhost:3000/blog/${blogId}`);
+  Object.assign(blog, res.data.data);
+  // 使用 Object.assign 方法将数据合并到 blog 对象中
+});
+async function save() {
+  let res = await axios.put(`http://localhost:3000/blog/${blog.id}`, blog);
+  if (res.data.code === 1000) {
+    router.push('/home');
+  }
+}
+~~~
\ No newline at end of file
diff --git "a/\351\273\204\351\233\252\350\212\263/20240512_\345\233\233\344\270\252\345\216\237\345\236\213\347\232\204\345\256\236\347\216\260/\345\276\205\345\212\236\344\272\213\351\241\271.md" "b/\351\273\204\351\233\252\350\212\263/20240512_\345\233\233\344\270\252\345\216\237\345\236\213\347\232\204\345\256\236\347\216\260/\345\276\205\345\212\236\344\272\213\351\241\271.md"
new file mode 100644
index 0000000..09fd990
--- /dev/null
+++ "b/\351\273\204\351\233\252\350\212\263/20240512_\345\233\233\344\270\252\345\216\237\345\236\213\347\232\204\345\256\236\347\216\260/\345\276\205\345\212\236\344\272\213\351\241\271.md"
@@ -0,0 +1,150 @@
+### 效果图
+![待办事项-2024-5-1320:23:49.gif](https://gitee.com/huangxuefang0929/xiu_img/raw/master/%E5%BE%85%E5%8A%9E%E4%BA%8B%E9%A1%B9-2024-5-1320:23:49.gif)
+
+### 部分代码
+1.app.vue
+~~~html
+<template>
+    <div>
+       
+        <router-view v-slot="{ Component }">
+            <keep-alive>
+                <component :is="Component" 
+                :deletedItems="deletedItems" 
+                @delete-item="handleDel" 
+                @restore-item="handleRestoreItem" 
+                @clear-deleted-items="handleClearDeletedItems" />
+            </keep-alive>
+        </router-view>
+    </div>
+</template>
+<script setup>
+ import { defineEmits, reactive } from 'vue';
+ const emit = defineEmits(['delete-item', 'restore-item', 'clear-deleted-items']);
+ const deletedItems = reactive([]);
+ const handleDel = (item) => {
+     deletedItems.push(item);
+ }
+ const handleRestoreItem = (item) => {
+     const index = deletedItems.indexOf(item);
+     if (index !== -1) {
+         deletedItems.splice(index, 1); // 从 deletedItems 数组中删除指定的项目
+         todos.push(item); // 添加到 todos 中
+     }
+ };
+ const handleClearDeletedItems = () => {
+     deletedItems.splice(0, deletedItems.length); // 清空 deletedItems 数组
+ }
+ </script>
+~~~
+2.recycle.vue
+~~~js
+<template>
+    <div class="clear">清空</div>
+    <div class="title">
+        <router-link to="/todolist">事项列表</router-link>
+        <span>|</span>
+        <router-link to="/recycle">回收站</router-link>
+    </div>
+    <h2>回收站</h2>
+    <ul>
+      <li v-for="item in deletedItems" :key="item.id">
+        {{ item.name }} 
+        <button @click="restoreItem(item)">恢复</button> 
+      </li>
+    </ul>
+    <button @click="clearDeletedItems">清空</button>
+</template>
+
+<script setup>
+  import { defineProps, defineEmits } from 'vue';
+  const emit = defineEmits(['restore-item', 'clear-deleted-items']); // 声明要接收的自定义事件
+  const props = defineProps(['deletedItems']);
+  const restoreItem = (item) => { 
+      const index = props.deletedItems.indexOf(item);
+      if(index !== -1){
+          const restoredItem = props.deletedItems.splice(index,1)[0]; // 从 deletedItems 中移除被恢复的项目，并返回该项目
+          todos.push(restoredItem); // 将被恢复的项目添加回 todos 中
+          emit('restore-item', restoredItem); // 触发 restore-item 事件通知父组件
+      }
+  };
+  const clearDeletedItems = () => {
+      if (confirm('确定要清空？')) {
+          props.deletedItems.splice(0, props.deletedItems.length);
+          emit('clear-deleted-items'); // 触发 clear-deleted-items 事件通知父组件
+      }
+  };
+</script>
+~~~
+3.todolist.vue
+~~~html
+<script setup>
+import { ref, defineEmits, reactive } from 'vue';
+
+const emit = defineEmits(['delete-item', 'restore-item']);
+const deletedItems = reactive([]);
+let modalIsShow = ref(false);
+let modalType = ref('add'); // 'add' or 'edit'
+let editIndex = ref(-1); // Index of todo being edited
+let todos = reactive([
+  { name: "事项1", bgTime: '2024-05-05', lastTime: '2024-05-11', completed: false, editing: false },
+  { name: "事项2", bgTime: '2024-05-05', lastTime: '2024-05-11', completed: true, editing: false }
+]);
+let Todo = reactive({
+  name:'',
+  bgTime:'',
+  lastTime:''
+})
+// 显示编辑模态框
+const showModal = (index) => {
+  modalIsShow.value = true;
+  editIndex.value = index; // 更新编辑索引
+  if (index >= 0) {
+    // 如果 index 大于等于 0，则是编辑操作，将数据赋值给 Todo
+    const tmpTodo = todos[index];
+    Todo.name = tmpTodo.name;
+    Todo.bgTime = tmpTodo.bgTime;
+    Todo.lastTime = tmpTodo.lastTime;
+  } else {
+    // 否则是新增操作，清空 Todo 对象的值
+    Todo.name = '';
+    Todo.bgTime = '';
+    Todo.lastTime = '';
+  }
+};
+
+// 保存操作
+const saveTodo = () => {
+  if (editIndex.value >= 0) {
+    // 如果 editIndex 大于等于 0，表示当前是编辑操作
+    // 更新编辑后的数据
+    const editedTodo = {
+      name: Todo.name,
+      bgTime: Todo.bgTime,
+      lastTime: Todo.lastTime,
+      completed: todos[editIndex.value].completed,
+      editing: false
+    };
+    todos.splice(editIndex.value, 1, editedTodo); // 更新原数据
+  } else {
+    // 否则是新增操作，将新数据添加到 todos 数组中
+    todos.push({
+      name: Todo.name,
+      bgTime: Todo.bgTime,
+      lastTime: Todo.lastTime,
+      completed: false, 
+      editing: false
+    });
+  }
+  modalIsShow.value = false; // 保存完成后隐藏模态框
+};
+const removeTodo = (index) => {
+  const removedItem = todos.splice(index, 1)[0];
+  deletedItems.push(removedItem);
+  emit('delete-item', removedItem); // 触发 delete-item 事件通知父组件
+};
+const cancelModal = () => {
+  modalIsShow.value = false;
+};
+</script>
+~~~
\ No newline at end of file
diff --git "a/\351\273\204\351\233\252\350\212\263/20240512_\345\233\233\344\270\252\345\216\237\345\236\213\347\232\204\345\256\236\347\216\260/\350\264\255\347\211\251\350\275\246.md" "b/\351\273\204\351\233\252\350\212\263/20240512_\345\233\233\344\270\252\345\216\237\345\236\213\347\232\204\345\256\236\347\216\260/\350\264\255\347\211\251\350\275\246.md"
new file mode 100644
index 0000000..5300491
--- /dev/null
+++ "b/\351\273\204\351\233\252\350\212\263/20240512_\345\233\233\344\270\252\345\216\237\345\236\213\347\232\204\345\256\236\347\216\260/\350\264\255\347\211\251\350\275\246.md"
@@ -0,0 +1,22 @@
+### 效果图
+![购物车-2024-5-1320:24:00.gif](https://gitee.com/huangxuefang0929/xiu_img/raw/master/%E8%B4%AD%E7%89%A9%E8%BD%A6-2024-5-1320:24:00.gif)
+
+### 部分代码
+~~~js
+// 增加
+const add = (index) => {
+  products[index].quantity++;
+}
+// 减少
+const sub = (index) => {
+  if(products[index].quantity > 0){
+    products[index].quantity--;
+  }
+}
+// 总计
+const total = computed(()=>{
+  return products.reduce((account,product)=>{
+    return account+(product.price*product.quantity);
+  },0)
+})
+~~~
\ No newline at end of file
diff --git "a/\351\273\204\351\233\252\350\212\263/20240512_\345\233\233\344\270\252\347\273\203\344\271\240(\346\224\271\350\211\257).md" "b/\351\273\204\351\233\252\350\212\263/20240512_\345\233\233\344\270\252\347\273\203\344\271\240(\346\224\271\350\211\257).md"
deleted file mode 100644
index 96efe2b..0000000
--- "a/\351\273\204\351\233\252\350\212\263/20240512_\345\233\233\344\270\252\347\273\203\344\271\240(\346\224\271\350\211\257).md"
+++ /dev/null
@@ -1,13 +0,0 @@
-### 一、待办事项
-![待办事项1-2024-5-1222:19:30.png](https://gitee.com/huangxuefang0929/xiu_img/raw/master/%E5%BE%85%E5%8A%9E%E4%BA%8B%E9%A1%B91-2024-5-1222:19:30.png)
-
-![待办事项2-2024-5-1222:19:37.png](https://gitee.com/huangxuefang0929/xiu_img/raw/master/%E5%BE%85%E5%8A%9E%E4%BA%8B%E9%A1%B92-2024-5-1222:19:37.png)
-
-### 二、图书管理
-![图书管理-2024-5-1222:20:06.png](https://gitee.com/huangxuefang0929/xiu_img/raw/master/%E5%9B%BE%E4%B9%A6%E7%AE%A1%E7%90%86-2024-5-1222:20:06.png)
-
-### 三、购物车清单
-![购物车-2024-5-1222:19:54.png](https://gitee.com/huangxuefang0929/xiu_img/raw/master/%E8%B4%AD%E7%89%A9%E8%BD%A6-2024-5-1222:19:54.png)
-
-### 四、动态生成表单
-![动态生成表单-2024-5-1222:19:41.png](https://gitee.com/huangxuefang0929/xiu_img/raw/master/%E5%8A%A8%E6%80%81%E7%94%9F%E6%88%90%E8%A1%A8%E5%8D%95-2024-5-1222:19:41.png)
\ No newline at end of file
-- 
Gitee


From 21d2fc4bc17e87528e4282b564d08bc6b056e8ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E9=9B=AA=E8=8A=B3=EF=BC=88Charlie=EF=BC=89?=
 <2332958287@qq.com>
Date: Sun, 19 May 2024 17:01:26 +0800
Subject: [PATCH 3/4] =?UTF-8?q?=E5=A2=9E=E5=88=A0=E6=94=B9=E6=9F=A5?=
 =?UTF-8?q?=EF=BC=88=E8=B7=AF=E7=94=B1=E7=89=88=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...66\346\200\201\347\256\241\347\220\206.md" |  0
 ...57\347\224\261\345\272\224\347\224\250.md" | 34 +++++++++++++++++++
 2 files changed, 34 insertions(+)
 rename "\351\273\204\351\233\252\350\212\263/20240523_\347\212\266\346\200\201\347\256\241\347\220\206.md" => "\351\273\204\351\233\252\350\212\263/20240513_\347\212\266\346\200\201\347\256\241\347\220\206.md" (100%)
 create mode 100644 "\351\273\204\351\233\252\350\212\263/20240516_\350\267\257\347\224\261\345\272\224\347\224\250.md"

diff --git "a/\351\273\204\351\233\252\350\212\263/20240523_\347\212\266\346\200\201\347\256\241\347\220\206.md" "b/\351\273\204\351\233\252\350\212\263/20240513_\347\212\266\346\200\201\347\256\241\347\220\206.md"
similarity index 100%
rename from "\351\273\204\351\233\252\350\212\263/20240523_\347\212\266\346\200\201\347\256\241\347\220\206.md"
rename to "\351\273\204\351\233\252\350\212\263/20240513_\347\212\266\346\200\201\347\256\241\347\220\206.md"
diff --git "a/\351\273\204\351\233\252\350\212\263/20240516_\350\267\257\347\224\261\345\272\224\347\224\250.md" "b/\351\273\204\351\233\252\350\212\263/20240516_\350\267\257\347\224\261\345\272\224\347\224\250.md"
new file mode 100644
index 0000000..4da751f
--- /dev/null
+++ "b/\351\273\204\351\233\252\350\212\263/20240516_\350\267\257\347\224\261\345\272\224\347\224\250.md"
@@ -0,0 +1,34 @@
+### 通过路由方式实现增删改查
+#### 思路：
+1. 配置路由：
+~~~js
+// src/router/router.js
+ import { createRouter, createWebHistory } from 'vue-router';
+ import Home from './components/Home.vue';
+ import ManageItem from './components/Edit.vue';
+ const router = createRouter({
+  history: createWebHistory(),
+  routes:[
+      {path:'/home',component:Home},
+      { path: '/edit/:id?', 
+        name: 'Edit', 
+        component: Edit,
+       },
+      {path:'/',component:App},
+      // 这里也可以加上redirect:'/home' 表示一打开就跳转到列表页，但是不推荐
+  ]
+ } );
+ export default router;
+~~~
+2. 配置入口文件：
+~~~js
+ import router from '.Router/router';
+ const app = createApp(App);
+ app.use(router);
+~~~
+3. 创建视图组件：Home.vue(列表页面)、Edit.vue(新增编辑页)、
+  - 列表页部分代码如下：
+  - ![code-2024-5-1916:59:14.png](https://gitee.com/huangxuefang0929/xiu_img/raw/master/code-2024-5-1916:59:14.png)
+
+  - 编辑页部分代码如下：
+  - ![edit-2024-5-1916:59:02.png](https://gitee.com/huangxuefang0929/xiu_img/raw/master/edit-2024-5-1916:59:02.png)
\ No newline at end of file
-- 
Gitee


From 31169f9fb31897faa662a16d09ca98f7a619c22c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E9=9B=AA=E8=8A=B3=EF=BC=88Charlie=EF=BC=89?=
 <2332958287@qq.com>
Date: Fri, 24 May 2024 21:09:27 +0800
Subject: [PATCH 4/4] =?UTF-8?q?=E5=B5=8C=E5=A5=97=E8=B7=AF=E7=94=B1?=
 =?UTF-8?q?=E3=80=81=E8=B7=AF=E7=94=B1=E5=91=BD=E5=90=8D=E5=92=8C=E8=A7=86?=
 =?UTF-8?q?=E5=9B=BE=E5=91=BD=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...\214\345\245\227&\345\221\275\345\220\215.md" | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git "a/\351\273\204\351\233\252\350\212\263/20240510_\345\265\214\345\245\227&\345\221\275\345\220\215.md" "b/\351\273\204\351\233\252\350\212\263/20240510_\345\265\214\345\245\227&\345\221\275\345\220\215.md"
index 2875166..5889b1f 100644
--- "a/\351\273\204\351\233\252\350\212\263/20240510_\345\265\214\345\245\227&\345\221\275\345\220\215.md"
+++ "b/\351\273\204\351\233\252\350\212\263/20240510_\345\265\214\345\245\227&\345\221\275\345\220\215.md"
@@ -4,7 +4,19 @@
   - 层次结构
   - 模块化
   - 嵌套视图
-~~~html
+~~~js
+{
+    path: '/user',
+    name: 'User',
+    component: User,
+    children: [
+      {
+        path: 'password',
+        name: 'UserPwd',
+        component: UserPassword,
+      }
+    ],
+  },
 ~~~
 
 ### 二、命名路由
@@ -27,7 +39,7 @@ const router = createRouter({
 ~~~
 
 ### 三、命名视图
-给不同的router-view设置name，实现不同的router-view显示不同的内容，呈现多个视图
+给不同的router-link设置name，实现不同的router-view显示不同的内容，呈现多个视图
 ~~~js
 const router = createRouter({
     history: createWebHistory(),
-- 
Gitee