From 8c8252136f5b2e9795f843657e14de28f307cbec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=A2=E5=BB=BA=E7=A5=A5?= <958464639@qq.com>
Date: Thu, 16 May 2024 16:39:15 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E7=AC=94=E8=AE=B0=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...6\200\201\350\267\257\347\224\261pinia.md" |   1 +
 ...0240514-Webapi\346\246\202\345\277\265.md" |  23 +++
 ...36\345\210\240\346\224\271\346\237\245.md" | 176 ++++++++++++++++++
 ...46\225\260\346\215\256\345\272\223CRUD.md" |   8 +-
 4 files changed, 204 insertions(+), 4 deletions(-)
 create mode 100644 "\345\215\242\345\273\272\347\245\245/20240513-\345\212\250\346\200\201\350\267\257\347\224\261pinia.md"
 create mode 100644 "\345\215\242\345\273\272\347\245\245/20240514-Webapi\346\246\202\345\277\265.md"
 create mode 100644 "\345\215\242\345\273\272\347\245\245/20240516-\350\267\257\347\224\261\345\256\236\347\216\260\345\242\236\345\210\240\346\224\271\346\237\245.md"

diff --git "a/\345\215\242\345\273\272\347\245\245/20240513-\345\212\250\346\200\201\350\267\257\347\224\261pinia.md" "b/\345\215\242\345\273\272\347\245\245/20240513-\345\212\250\346\200\201\350\267\257\347\224\261pinia.md"
new file mode 100644
index 0000000..7915b6e
--- /dev/null
+++ "b/\345\215\242\345\273\272\347\245\245/20240513-\345\212\250\346\200\201\350\267\257\347\224\261pinia.md"
@@ -0,0 +1 @@
+## 动态路由pinia
diff --git "a/\345\215\242\345\273\272\347\245\245/20240514-Webapi\346\246\202\345\277\265.md" "b/\345\215\242\345\273\272\347\245\245/20240514-Webapi\346\246\202\345\277\265.md"
new file mode 100644
index 0000000..60723bd
--- /dev/null
+++ "b/\345\215\242\345\273\272\347\245\245/20240514-Webapi\346\246\202\345\277\265.md"
@@ -0,0 +1,23 @@
+## Web API 概念笔记
+- Web API 是一种通过网络（通常是 HTTP 协议）提供的应用程序编程接口，允许不同的客户端（如网页、移动应用等）与服务器进行交互和获取数据。
+### 主要特点：
+- 基于标准协议：通常使用 HTTP 协议进行通信。
+- 数据交换：以各种格式（如 JSON、XML 等）提供数据。
+- 独立于平台：可以在不同的操作系统和编程语言中使用。
+- 松耦合：客户端和服务器可以独立开发和演化。
+### 好处：
+- 促进系统集成：不同的应用程序可以方便地集成。
+- 提高开发效率：重用已有服务，减少重复开发。
+- 增强灵活性：易于扩展和修改服务。
+### 设计要点：
+- 明确的接口定义：包括请求方法、参数和响应格式。
+- 错误处理：提供清晰的错误反馈。
+- 安全性：考虑授权、认证等安全措施。
+### 使用场景：
+- 构建单页应用：获取数据并动态更新页面。
+- 移动端开发：与后端服务交互。
+- 第三方应用集成：共享数据和功能。
+### 开发注意事项：
+- 性能优化：减少不必要的数据传输和处理。
+- 文档完善：提供详细的 API 文档。
+- 通过合理设计和使用 Web API，可以提高应用的可扩展性和互操作性。
\ No newline at end of file
diff --git "a/\345\215\242\345\273\272\347\245\245/20240516-\350\267\257\347\224\261\345\256\236\347\216\260\345\242\236\345\210\240\346\224\271\346\237\245.md" "b/\345\215\242\345\273\272\347\245\245/20240516-\350\267\257\347\224\261\345\256\236\347\216\260\345\242\236\345\210\240\346\224\271\346\237\245.md"
new file mode 100644
index 0000000..5332a04
--- /dev/null
+++ "b/\345\215\242\345\273\272\347\245\245/20240516-\350\267\257\347\224\261\345\256\236\347\216\260\345\242\236\345\210\240\346\224\271\346\237\245.md"
@@ -0,0 +1,176 @@
+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>
+```
diff --git "a/\345\215\242\345\273\272\347\245\245/work-4-\350\277\236\346\216\245\346\225\260\346\215\256\345\272\223CRUD.md" "b/\345\215\242\345\273\272\347\245\245/work-4-\350\277\236\346\216\245\346\225\260\346\215\256\345\272\223CRUD.md"
index 9e16209..5332a04 100644
--- "a/\345\215\242\345\273\272\347\245\245/work-4-\350\277\236\346\216\245\346\225\260\346\215\256\345\272\223CRUD.md"
+++ "b/\345\215\242\345\273\272\347\245\245/work-4-\350\277\236\346\216\245\346\225\260\346\215\256\345\272\223CRUD.md"
@@ -1,4 +1,4 @@
-2. main.js代码贴
+1. main.js代码贴
 ```js
 import { createApp } from 'vue'
 import './style.css'
@@ -24,7 +24,7 @@ app.use(router);
 app.mount('#app');
 ```
 2. App.vue代码贴
-```vue
+```html
 <template>
     <router-view></router-view>
 </template>
@@ -34,7 +34,7 @@ app.mount('#app');
 
 ```
 2. UserList.vue代码贴
-```vue
+```html
 <template>
     <div class="content">
         <div class="top">
@@ -126,7 +126,7 @@ async function btnFind() {
 </style>
 ```
 3. UserEdit.vue代码贴
-```vue
+```html
 <template>
     <div class="add">
         <p>姓名：<input type="text" v-model="editData.username"></p>
-- 
Gitee


From d7f9245e6dd17dc140e77c7c0ad9d100c9949141 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=A2=E5=BB=BA=E7=A5=A5?= <958464639@qq.com>
Date: Thu, 16 May 2024 16:48:15 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E4=BD=9C=E4=B8=9A=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...6\200\201\350\267\257\347\224\261pinia.md" | 40 +++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git "a/\345\215\242\345\273\272\347\245\245/20240513-\345\212\250\346\200\201\350\267\257\347\224\261pinia.md" "b/\345\215\242\345\273\272\347\245\245/20240513-\345\212\250\346\200\201\350\267\257\347\224\261pinia.md"
index 7915b6e..52ff7e2 100644
--- "a/\345\215\242\345\273\272\347\245\245/20240513-\345\212\250\346\200\201\350\267\257\347\224\261pinia.md"
+++ "b/\345\215\242\345\273\272\347\245\245/20240513-\345\212\250\346\200\201\350\267\257\347\224\261pinia.md"
@@ -1 +1,41 @@
 ## 动态路由pinia
+- Pinia 是一个用于管理 Vue 应用状态的轻量级状态管理库。
+1. 安装 Pinia：
+    - npm install pinia
+    - yarn add pinia
+
+
+2. 创建 store：定义状态、 getter、 mutation 和 action。
+
+```js
+// 创建 store
+const store = createStore({
+  state: {
+    count: 0
+  },
+  mutations: {
+    increment(state) {
+      state.count++
+    }
+  },
+  actions: {
+    incrementAction(context) {
+      context.commit('increment')
+    }
+  }
+})
+```
+
+
+3. 在组件中使用 store：通过注入 store 实例来访问和操作状态。
+```js
+const app = createApp(App)
+app.use(store)
+
+// 在组件中访问 store
+const { count, incrementAction } = useStore()
+```
+```html
+<button onclick="incrementAction()">Increment</button>
+<p>{{ count }}</p>
+```
\ No newline at end of file
-- 
Gitee