From 0b0290209b5f74d6dd27fcf50fd677e8156912a9 Mon Sep 17 00:00:00 2001
From: zhao <123>
Date: Sun, 19 May 2024 14:12:43 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E5=8A=A8=E6=80=81=E8=B7=AF=E7=94=B1pinia?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 "\350\265\265\346\254\243/0513.md" | 108 +++++++++++++++++++++++++++++
 1 file changed, 108 insertions(+)
 create mode 100644 "\350\265\265\346\254\243/0513.md"

diff --git "a/\350\265\265\346\254\243/0513.md" "b/\350\265\265\346\254\243/0513.md"
new file mode 100644
index 0000000..a02df60
--- /dev/null
+++ "b/\350\265\265\346\254\243/0513.md"
@@ -0,0 +1,108 @@
+Vue 3 + Pinia + 动态路由：集成与使用指南
+============================
+
+1\. 安装依赖
+--------
+
+首先确保已安装Vue 3、Vue Router和Pinia。在`package.json`中添加：
+
+    "dependencies": {
+      "vue": "^3.2.0",
+      "vue-router": "^4.0.15",
+      "pinia": "^2.0.0"
+    }
+    
+
+2\. 设置Vue和Pinia
+---------------
+
+在`main.js`或`vite.config.js`（如果是Vite）中，配置Vue和Pinia：
+
+    import { createApp } from 'vue';
+    import { createPinia } from 'pinia';
+    import App from './App.vue';
+    
+    const app = createApp(App);
+    app.use(createPinia());
+    
+    // 如果使用Vite，添加以下配置
+    if (process.env.NODE_ENV === 'production') {
+      createApp(App).use(createPinia());
+    }
+    
+    app.mount('#app');
+    
+
+3\. 创建Pinia Store
+-----------------
+
+创建一个名为`routerStore.js`的文件，用于存储动态路由相关数据：
+
+    import { defineStore } from 'pinia';
+    
+    export const useRouterStore = defineStore('routerStore', {
+      state: () => ({
+        routes: [], // 存放动态路由配置
+      }),
+      actions: {
+        addRoute(route) {
+          this.routes.push(route);
+        },
+        removeRoute(routeKey) {
+          this.routes = this.routes.filter(r => r.key !== routeKey);
+        },
+      },
+    });
+    
+
+4\. 动态路由配置
+----------
+
+在Vue Router的配置文件（例如`router/index.js`）中，使用`createRoutes`动态生成路由：
+
+    import { createRouter, createWebHistory } from 'vue-router';
+    import { useRouterStore } from './routerStore';
+    
+    const router = createRouter({
+      history: createWebHistory(),
+      routes: routerStore.routes, // 从store中读取
+      // 使用动态生成的路由
+      dynamic: {
+        path: '/user/:userId',
+        component: (route) => import(/* webpackChunkName: "user" */ '@/views/User.vue'),
+        // 使用store中的数据
+        props: (route) => ({ userId: route.params.userId }),
+      },
+    });
+    
+    router.beforeEach((to, from, next) => {
+      // 在每次路由变化前，更新store中的路由信息
+      useRouterStore().addRoute(to);
+    });
+    
+    export default router;
+    
+
+5\. 在组件中访问store
+---------------
+
+在需要使用动态路由数据的组件中，使用`useStore`方法：
+
+    <template>
+      <div>
+        <router-link :to="{ name: 'user', params: { userId: '123' }}">User</router-link>
+        <p>User details: {{ userId }}</p> <!-- userId将从store获取 -->
+      </div>
+    </template>
+    
+    <script>
+    import { useRouterStore } from '@/store/routerStore';
+    
+    export default {
+      setup() {
+        const routerStore = useRouterStore();
+        const userId = routerStore.read((state) => state.routes.find(r => r.key === 'user').params.userId);
+        return { userId };
+      },
+    };
+    </script>
\ No newline at end of file
-- 
Gitee


From 59c883def24d24a74432ffa747dc839ef397b783 Mon Sep 17 00:00:00 2001
From: zhao <123>
Date: Sun, 19 May 2024 14:14:31 +0800
Subject: [PATCH 2/3] =?UTF-8?q?webapi=E6=A6=82=E5=BF=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 "\350\265\265\346\254\243/0514.md" | 54 ++++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 "\350\265\265\346\254\243/0514.md"

diff --git "a/\350\265\265\346\254\243/0514.md" "b/\350\265\265\346\254\243/0514.md"
new file mode 100644
index 0000000..34940bb
--- /dev/null
+++ "b/\350\265\265\346\254\243/0514.md"
@@ -0,0 +1,54 @@
+* * *
+
+Web API 概念笔记
+============
+
+1\. 定义
+------
+
+Web API（Web Application Programming Interface）是一组定义了如何在网络上进行数据交换的规范。它允许不同的软件系统相互通信，通常是通过HTTP协议。
+
+2\. 类型
+------
+
+*   **浏览器API**：内置于浏览器中，如DOM API、Canvas API等，用于增强网页功能和交互性。
+*   **服务器API**：部署在服务器上，如RESTful API、SOAP API等，用于提供数据和服务给客户端。
+
+3\. 关键特性
+--------
+
+*   **无状态**：每个请求都是独立的，服务器不保存客户端状态。
+*   **可缓存**：客户端可以缓存响应以提高性能。
+*   **统一接口**：使用标准的HTTP方法（GET, POST, PUT, DELETE等）。
+
+4\. 常见用途
+--------
+
+*   **数据交换**：允许应用程序之间共享数据。
+*   **服务集成**：集成第三方服务，如支付、地图、社交网络等。
+*   **应用扩展**：通过API扩展应用功能，如插件、扩展等。
+
+5\. 开发注意事项
+----------
+
+*   **安全性**：确保API的安全性，如使用OAuth、API密钥等。
+*   **文档**：提供详细的API文档，包括请求和响应的示例。
+*   **版本控制**：管理API的版本，确保向后兼容性。
+
+6\. 示例代码
+--------
+
+    // 使用Fetch API调用RESTful API
+    fetch('https://api.example.com/data', {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': 'Bearer your_token'
+      }
+    })
+    .then(response => response.json())
+    .then(data => console.log(data))
+    .catch(error => console.error('Error:', error));
+    
+
+* * *
\ No newline at end of file
-- 
Gitee


From 63dffe80fc602dcfef5f3ebdd39316bd6f734401 Mon Sep 17 00:00:00 2001
From: zhao <123>
Date: Sun, 19 May 2024 14:15:11 +0800
Subject: [PATCH 3/3] =?UTF-8?q?router=E5=A2=9E=E5=88=A0=E6=94=B9=E6=9F=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 "\350\265\265\346\254\243/0516.md" | 177 +++++++++++++++++++++++++++++
 1 file changed, 177 insertions(+)
 create mode 100644 "\350\265\265\346\254\243/0516.md"

diff --git "a/\350\265\265\346\254\243/0516.md" "b/\350\265\265\346\254\243/0516.md"
new file mode 100644
index 0000000..95167f1
--- /dev/null
+++ "b/\350\265\265\346\254\243/0516.md"
@@ -0,0 +1,177 @@
+## 路由增删改查
+1. main.js代码
+```js
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+import userList from './components/userList.vue'
+import userEdit from './components/userEdit.vue'
+let app = createApp(App);
+import { createRouter, createWebHistory } from 'vue-router'
+let router = createRouter({
+    history: createWebHistory(),
+    routes: [
+        {
+            path: '/',
+            component: userList
+        },
+        {
+            path: '/edit',
+            component: userEdit
+        }
+    ]
+});
+app.use(router);
+app.mount('#app');
+```
+2. App.vue代码
+```html
+<template>
+    <router-view></router-view>
+</template>
+<script setup>
+
+</script>
+
+```
+2. UserList.vue代码
+```html
+<template>
+    <div class="content">
+        <div class="top">
+            <input type="text" placeholder="请输入查询的关键字" v-model="find">
+            <input type="button" value="查找" @click="btnFind">
+            <input type="button" value="新增" @click="btnAdd">
+        </div>
+        <div class="listV">
+            <table class="tb">
+                <tr>
+                    <th>id</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.username }}</td>
+                    <td>{{ item.sex }}</td>
+                    <td>{{ item.age }}</td>
+                    <td>
+                        <input type="button" value="编辑" @click="btnEdit(item.id)">
+                        <input type="button" value="删除" @click="btnDel(item.id)">
+                    </td>
+                </tr>
+            </table>
+        </div>
+
+    </div>
+</template>
+<script setup>
+import { ref, reactive, onMounted } from 'vue'
+import axios from 'axios';
+import { useRouter } from 'vue-router'
+let router = useRouter();
+let list=reactive([])
+//挂载后的操作
+onMounted(async() => {
+    let dataList=await axios.get('http://localhost:3000/logs')
+    dataList.data.data.forEach(item => {
+        list.push(item);
+    });
+})
+async function btnDel(id) {
+    if (confirm('确定删除？')) {
+        let idx=list.findIndex(item=>item.id===id);
+        list.splice(idx,1);
+        axios.delete(`http://localhost:3000/logs/${id}`);
+    }
+}
+function btnAdd() {
+    router.push('/edit')
+}
+function btnEdit(id) {
+    router.push({path:`/edit`,query:{id:id}})
+}
+let find=ref('')
+async function btnFind() {
+    let findList=await axios.get(`http://localhost:3000/logs/${find.value}`)
+    list.splice(0);
+    findList.data.data.forEach(item=>{
+        list.push(item)
+    })
+}
+</script>
+
+<style scoped>
+.add {
+    width: 100%;
+    border: 1px solid;
+    border-radius: 20px;
+    position: absolute;
+    top: 25px;
+    background-color: aliceblue;
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+.bgcclass {
+    width: 100%;
+    height: 100px;
+    background-color: #888;
+}
+</style>
+```
+3. UserEdit.vue代码
+```html
+<template>
+    <div class="add">
+        <p>姓名：<input type="text" v-model="editData.username"></p>
+        <p>性别：<input type="text" v-model="editData.sex"></p>
+        <p>年龄：<input type="text" v-model="editData.age"></p>
+        <p>
+            <input type="button" value="保存" @click="btnSave">
+            <input type="button" value="取消" @click="btnNot">
+        </p>
+    </div>
+</template>
+<script setup>
+import axios from 'axios';
+import { reactive,onMounted } from 'vue';
+import { useRouter,useRoute } from 'vue-router'
+let router = useRouter();
+let route=useRoute()
+let editData = reactive({
+    username: '',
+    age: '',
+    sex:''
+})
+onMounted(async ()=>{
+    let id=route.query.id;
+    if (id) {
+        let edit=await axios.put(`http://localhost:3000/logs/${id}`)
+        let editArr=edit.data.data
+        editData.id=editArr.id
+        editData.username=editArr.username
+        editData.age=editArr.age
+        editData.sex=editArr.sex
+    }else{
+    }
+})
+async function btnSave(){
+    if (editData.id>0) {
+        await axios.put(`http://localhost:3000/logs/${editData.id}`,editData)
+    }else{
+        await axios.post('http://localhost:3000/logs',editData)
+    }
+    router.push('/')
+}
+function btnNot(){
+    router.push('/')
+}
+</script>
+```
-- 
Gitee