From 3a23e93aab18734a96c37536b92adcc076088eb2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9E=97=E7=8E=89=E6=95=8Fa?= <2647486093@qq.com>
Date: Sun, 19 May 2024 12:45:12 +0800
Subject: [PATCH] vue

---
 ...32\347\224\250\347\273\204\344\273\266.md" |   1 +
 .../20240514_pinia.md"                        |  37 ++++
 .../20240516_curd.md"                         | 187 ++++++++++++++++++
 3 files changed, 225 insertions(+)
 create mode 100644 "\346\236\227\347\216\211\346\225\217/20240513_\351\200\232\347\224\250\347\273\204\344\273\266.md"
 create mode 100644 "\346\236\227\347\216\211\346\225\217/20240514_pinia.md"
 create mode 100644 "\346\236\227\347\216\211\346\225\217/20240516_curd.md"

diff --git "a/\346\236\227\347\216\211\346\225\217/20240513_\351\200\232\347\224\250\347\273\204\344\273\266.md" "b/\346\236\227\347\216\211\346\225\217/20240513_\351\200\232\347\224\250\347\273\204\344\273\266.md"
new file mode 100644
index 0000000..a23617e
--- /dev/null
+++ "b/\346\236\227\347\216\211\346\225\217/20240513_\351\200\232\347\224\250\347\273\204\344\273\266.md"
@@ -0,0 +1 @@
+# 上传头像
\ No newline at end of file
diff --git "a/\346\236\227\347\216\211\346\225\217/20240514_pinia.md" "b/\346\236\227\347\216\211\346\225\217/20240514_pinia.md"
new file mode 100644
index 0000000..f832d43
--- /dev/null
+++ "b/\346\236\227\347\216\211\346\225\217/20240514_pinia.md"
@@ -0,0 +1,37 @@
+# pinia
+下载：`npm i pinia`
+
+```js
+
+// mian.ts
+import {createPinia} from 'pinia'
+const pinia=createPinia()
+app.use(pinia)
+
+// 定义store文件夹，count.ts【conponent文件夹Count.vue】
+// count.ts
+export const useCountStore=defineStore('count',{
+  // 方法
+  action:{
+    btnAdd(val:number){this.num+=val}
+  },
+  // 数据
+  state(){
+    return {num:1}
+  },
+  // 数据进一步处理
+  getters:{
+    bigNum:state=>state.num*10,
+    setInt():number {return this.num+1}
+  }
+})
+
+// Count.vue
+import {useCountStore} from '....'
+
+const countStore=useCountStore()
+countStore.num===1
+
+let {num,bigNum,setInt,btnAdd}=storeToRefs(countStore)
+num===1
+```
\ No newline at end of file
diff --git "a/\346\236\227\347\216\211\346\225\217/20240516_curd.md" "b/\346\236\227\347\216\211\346\225\217/20240516_curd.md"
new file mode 100644
index 0000000..f12ec1c
--- /dev/null
+++ "b/\346\236\227\347\216\211\346\225\217/20240516_curd.md"
@@ -0,0 +1,187 @@
+# Home.vue
+```js
+<script setup lang="ts">
+import { onMounted, reactive, ref } from "vue";
+import axios from "axios";
+/* 
+1. 定义默认渲染数组renderArr，发送get请求获取数据，将数据赋值到rednerArr
+2. 页面中渲染renderArr
+3. 添加链接，跳转到Edit
+4. 编辑链接，跳转到Edit，并传递params.id。获取query参数，如果存在，根据query在rednerArr中修改数据
+5. 删除链接，发送delete请求，传递id参数，从rednderArr删除id数据
+6. 查找按钮，发送get请求带参info，将结果赋值给renderArr
+*/
+const renderArr = reactive([])
+onMounted(async () => {
+  sendMethod('http://localhost:3000/blod')
+})
+
+const info = ref(null)
+async function btnSearch() {
+  if (info.value) {
+    sendMethod(`http://localhost:3000/find/${info.value}`)
+  } else {
+    sendMethod('http://localhost:3000/blod')
+  }
+  info.value = null
+}
+async function btnDel(id: number) {
+  if (confirm('确认删除')) {
+    await axios.delete(`http://localhost:3000/blod/${id}`)
+    renderArr.forEach((ele, idx) => {
+      if (ele.id === id) {
+        renderArr.splice(idx, 1)
+      }
+    })
+  }
+}
+// 定义请求函数
+async function sendMethod(url: string) {
+  // 发送get请求
+  let { data } = await axios.get(url)
+  renderArr.splice(0, renderArr.length)
+  Object.assign(renderArr, data)
+}
+</script>
+
+<template>
+  <div>
+    <input type="text" v-model="info" placeholder="请输入查找内容">
+    <button @click="btnSearch">查找</button>
+  </div>
+  <RouterLink to="/edit" class="router-add">添加</RouterLink>
+  <table>
+    <thead>
+      <tr>
+        <th>序号</th>
+        <th>标题</th>
+        <th>作者</th>
+        <th>内容</th>
+        <th>操作</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(item, index) in renderArr" :key="item.id">
+        <td>{{ index + 1 }}</td>
+        <td>{{ item.title }}</td>
+        <td>{{ item.author }}</td>
+        <td>{{ item.content }}</td>
+        <td>
+          <RouterLink :to="{ name: 'edit', params: { id: item.id } }">编辑</RouterLink>
+          <RouterLink to="/home" @click="btnDel(item.id)">删除</RouterLink>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<style scoped>
+.router-add {
+  color: aliceblue;
+  background-color: rgb(47, 171, 243);
+  width: 70px;
+  height: 30px;
+  line-height: 30px;
+  display: block;
+  margin: 0 auto;
+  border-radius: 15px;
+}
+</style>
+```
+
+# Edit.vue
+```js
+<script setup lang="ts">
+import axios from "axios";
+import { onMounted, reactive } from "vue";
+import { useRoute, useRouter } from "vue-router";
+/* 
+1. 定义表单数据对象formData，将数据渲染到页面
+2. 获取params.id，id存在为编辑，发送get请求，获取数据，将数据赋值给formData，设置默认值
+3. 修改按钮btnAdd，不存在id，添加页面时，发送post请求带参formData。
+4. 存在id，编辑页面，发送put带参formData。添加formData.id，跳转Home，携带query
+*/
+let formData = reactive({
+  title: null,
+  author: null,
+  content: null,
+})
+
+const router = useRouter()
+let { id } = useRoute().params
+
+
+onMounted(async () => {
+  if (id) {
+    const { data } = await axios.get(`http://localhost:3000/blod/${id}`)
+    Object.assign(formData, data[0])
+  }
+})
+async function btnAdd() {
+  if (!id) {
+    await axios.post('http://localhost:3000/blod', formData)
+  } else {
+    await axios.put(`http://localhost:3000/blod/${id}`, formData)
+  }
+  router.push('/home')
+}
+function btnConcle() {
+  router.push('/home')
+}
+</script>
+
+<template>
+  <table>
+    <tr>
+      <td>标题</td>
+      <td><input type="text" v-model="formData.title"></td>
+    </tr>
+    <tr>
+      <td>作者</td>
+      <td><input type="text" v-model="formData.author"></td>
+    </tr>
+    <tr>
+      <td>内容</td>
+      <td><input type="text" v-model="formData.content"></td>
+    </tr>
+    <tr>
+      <td></td>
+      <td>
+        <button @click="btnAdd">提交</button>
+        <button @click="btnConcle">取消</button>
+      </td>
+    </tr>
+  </table>
+</template>
+
+<style scoped>
+</style>
+
+```
+
+# router index.ts
+```js
+import { createRouter, createWebHashHistory } from "vue-router";
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes: [
+    {
+      path: "/home",
+      name: "home",
+      component: () => import('../pages/Home.vue')
+    },
+    {
+      path: "/edit/:id?",
+      name: "edit",
+      component: () => import('../pages/Edit.vue')
+    },
+    {
+      path: "/",
+      redirect: '/home'
+    }
+  ]
+})
+
+export default router
+```
\ No newline at end of file
-- 
Gitee