From 0f4d2d6d12e56731ecd0137981191b6f63ef1a29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=AC=A2?= <3167389063@qq.com>
Date: Sun, 25 May 2025 09:25:17 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=89=8D=E5=90=8E=E7=AB=AF?=
 =?UTF-8?q?=E5=88=86=E7=A6=BB=E9=A1=B9=E7=9B=AE=E7=9A=84=E6=89=80=E6=9C=89?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=EF=BC=9B=E7=BB=84=E4=BB=B6=E5=BA=93Vant?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...40\346\224\271\346\237\245\357\274\211.md" | 113 ++++++
 ...347\233\256\357\274\210api\357\274\211.md" |  63 +++
 ...47\273\204\344\273\266\345\272\223Vant.md" |  17 +
 ...57\347\224\261\347\273\203\344\271\240.md" | 364 ++++++++++++++++++
 4 files changed, 557 insertions(+)
 create mode 100644 "\345\210\230\346\254\242/20250519-\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\351\241\271\347\233\256\357\274\210\345\242\236\345\210\240\346\224\271\346\237\245\357\274\211.md"
 create mode 100644 "\345\210\230\346\254\242/20250520-\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\351\241\271\347\233\256\357\274\210api\357\274\211.md"
 create mode 100644 "\345\210\230\346\254\242/20250521-\347\273\204\344\273\266\345\272\223Vant.md"
 create mode 100644 "\345\210\230\346\254\242/\350\267\257\347\224\261\347\273\203\344\271\240.md"

diff --git "a/\345\210\230\346\254\242/20250519-\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\351\241\271\347\233\256\357\274\210\345\242\236\345\210\240\346\224\271\346\237\245\357\274\211.md" "b/\345\210\230\346\254\242/20250519-\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\351\241\271\347\233\256\357\274\210\345\242\236\345\210\240\346\224\271\346\237\245\357\274\211.md"
new file mode 100644
index 0000000..d7b89d2
--- /dev/null
+++ "b/\345\210\230\346\254\242/20250519-\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\351\241\271\347\233\256\357\274\210\345\242\236\345\210\240\346\224\271\346\237\245\357\274\211.md"
@@ -0,0 +1,113 @@
+## 前后端分离项目
+### **新增**和**编辑**功能
+路由跳转
+```js
+function btnadd(){
+    console.log('新增');
+    router.push('/bookadd')
+}
+```
+新增和编辑页面
+```js
+async function btnSave(){
+  console.log('保存');
+  //路由获取ID
+  const id =route.params.id || 0
+  let data;
+  if (id === 0) {
+    data = await postItem(book.value) //无id,新增
+    console.log(data.data);
+  }else{
+    data = await putItem(id,book.value)  //有id，编辑
+
+  }  
+  router.push('/book')
+}
+```
+```js
+//有id，将原始数据渲染到表单
+onMounted(async ()=>{
+  const id = route.params.id
+  if (id) {
+    const data = await getById(id)
+    console.log(data);
+    
+    book.value = data.data
+  }
+})
+```
+
+### **删除功能**
+```js
+async function btndel(id){
+    console.log('删除');
+        
+    if (confirm('确认删除吗？')) {
+        let data = await delItem(id)
+        if (data.code === 1000) {
+            console.log(data.msg);
+            let index = books.findIndex(item=>item.id === id)
+            books.splice(index,1)
+        
+        }else{
+            console.log(data.msg);        
+        }
+        
+    }
+}
+```
+
+### **查找功能**
+
+```js
+async function btnfilter(){
+    const trimkeyword = keyword.value.trim()
+    let data = await getAll(trimkeyword)
+
+    //先移除所有数据，再响应
+    books.splice(0)
+    books.push(...data.data)
+}
+```
+
+### **api**
+```js
+import axios from "axios";
+
+const port = 'http://localhost:3000'
+
+//列表页面&查找
+export const getAll = async (keyword)=>{
+    let data;
+    if (keyword) {
+        data = await axios.get(`${port}/book?keyword=${keyword}`)
+    }else
+    {
+        data = await axios.get(`${port}/book`)
+    }   
+    return data.data
+}
+//删除
+export const delItem = async (id)=>{
+    let data = await axios.delete(`${port}/book/${id}`)
+    return data.data
+}
+//编辑
+export const putItem = async (id,book)=>{
+    let data = await axios.put(`${port}/book/${id}`,book)
+    return data.data
+}
+//新增
+export const postItem = async (book)=>{
+    let data = await axios.post(`${port}/book`,book)
+    return data.data
+}
+//单个数据
+export const getById = async (id)=>{
+    let data = await axios.get(`${port}/book/${id}`)
+    return data.data
+}
+
+
+```
+
diff --git "a/\345\210\230\346\254\242/20250520-\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\351\241\271\347\233\256\357\274\210api\357\274\211.md" "b/\345\210\230\346\254\242/20250520-\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\351\241\271\347\233\256\357\274\210api\357\274\211.md"
new file mode 100644
index 0000000..76caff3
--- /dev/null
+++ "b/\345\210\230\346\254\242/20250520-\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\351\241\271\347\233\256\357\274\210api\357\274\211.md"
@@ -0,0 +1,63 @@
+## api模块
+```js
+import axios from "axios";
+const port = 'http://localhost:3000'
+//列表页面&查找
+export const getAll = async (keyword)=>{
+    let data;
+    if (keyword) {
+        data = await axios.get(`${port}/book?keyword=${keyword}`)
+    }else
+    {
+        data = await axios.get(`${port}/book`)
+    }   
+    return data.data
+}
+//删除
+export const delItem = async (id)=>{
+    let data = await axios.delete(`${port}/book/${id}`)
+    return data.data
+}
+//编辑
+export const putItem = async (id,book)=>{
+    let data = await axios.put(`${port}/book/${id}`,book)
+    return data.data
+}
+//新增
+export const postItem = async (book)=>{
+    let data = await axios.post(`${port}/book`,book)
+    return data.data
+}
+//单个数据
+export const getById = async (id)=>{
+    let data = await axios.get(`${port}/book/${id}`)
+    return data.data
+}
+```
+
+## 生命周期函数
+```js
+onMounted(async () => {
+    let id = route.params.id || 0
+    let data = await getById(id)
+    Object.assign(obj,data.data)
+})
+```
+
+## 新增和编辑功能
+```js
+async function btnSave(){
+  console.log('保存');
+  //路由获取ID
+  const id =route.params.id || 0
+  let data;
+  if (id === 0) {
+    data = await postItem(book.value) //无id,新增
+    console.log(data.data);
+  }else{
+    data = await putItem(id,book.value)  //有id，编辑
+
+  }  
+  router.push('/book')
+}
+```
\ No newline at end of file
diff --git "a/\345\210\230\346\254\242/20250521-\347\273\204\344\273\266\345\272\223Vant.md" "b/\345\210\230\346\254\242/20250521-\347\273\204\344\273\266\345\272\223Vant.md"
new file mode 100644
index 0000000..45037f3
--- /dev/null
+++ "b/\345\210\230\346\254\242/20250521-\347\273\204\344\273\266\345\272\223Vant.md"
@@ -0,0 +1,17 @@
+## 组件库
+### 安装
+```bash
+npm i vant
+```
+### 引入组件(Button为例)
+```js
+import { createApp } from 'vue';
+import { Button } from 'vant';
+
+const app = createApp();
+app.use(Button);
+```
+### 使用
+```js
+<van-button type="primary">主要按钮</van-button>
+```
diff --git "a/\345\210\230\346\254\242/\350\267\257\347\224\261\347\273\203\344\271\240.md" "b/\345\210\230\346\254\242/\350\267\257\347\224\261\347\273\203\344\271\240.md"
new file mode 100644
index 0000000..3e3e4c2
--- /dev/null
+++ "b/\345\210\230\346\254\242/\350\267\257\347\224\261\347\273\203\344\271\240.md"
@@ -0,0 +1,364 @@
+## 基础
+### 创建基本路由
+#### 代码
+
+app.vue
+```vue
+<script setup>
+</script>
+
+<template>
+  <router-link to="/">首页</router-link>
+  <router-link to="/about">关于</router-link>
+ <router-view/>
+</template>
+```
+Home.vue
+```vue
+<template>
+    <h1>欢迎来到首页</h1>
+</template>
+```
+router.js
+```js
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: Home,
+    },
+    {
+      path: '/about',
+      name: 'about',
+      component: () => import('@/components/About.vue'),
+    },
+  ],
+```
+
+
+### 动态路由匹配
+#### 代码
+
+Home.vue
+```vue
+<template>
+    <h1>欢迎来到首页</h1>
+    <button @click="user">查看用户123</button>
+</template>
+<script>
+export default {
+    name:'Home',
+    methods: {
+        user() {
+            this.$router.push('/user/123')
+        }
+    }
+}
+</script>
+```
+router.js
+```js
+    {
+      path:'/user/:id',
+      name:'user',
+      component:()=> import('@/components/User.vue')
+    }
+```
+
+### 嵌套路由
+#### 代码
+
+about.vue
+```vue
+<template>
+    <h1>这是关于页面</h1>
+    <router-link to="/about/team">团队</router-link>
+    <router-link to="/about/history">历史</router-link>
+    <router-view/>
+</template>
+
+```
+router.js
+```js
+    {
+      path: '/about',
+      name: 'about',
+      component: () => import('@/components/About.vue'),
+      children:[
+        {
+          path:'team',
+          component:()=> import('@/components/Team.vue')
+        },
+        {
+          path:'history',
+          component:()=> import('@/components/History.vue')
+        },
+      ]
+    },
+```
+
+### 路由守卫（全局守卫）
+#### 代码
+
+router.js
+```js
+router.beforeEach((to,from,next) =>{
+  if(to.path === '/about'){
+    const confirmResult = confirm('确定要访问关于页面吗？');
+    if(confirmResult){
+      next()
+    }else{
+      next(false)
+    }
+  }else{
+    next()
+  }
+})
+```
+
+### 路由守卫（组件内守卫）
+#### 代码
+
+User.vue
+```vue
+<template>
+    <h1>用户ID是{{ $route.params.id }}</h1>
+</template>
+<script>
+export default {
+    name:'user',
+    beforeRouteLeave(to,from,next) {
+        const confirmReault = confirm ('您正在离开用户页面！')
+        if(confirmReault){
+            next()
+        }else{
+            next(false)
+        }
+    }
+}
+</script>
+```
+
+### 路由元信息（Mete Fields）
+#### 代码
+router.js
+```js
+import { createRouter, createWebHistory } from 'vue-router'
+import Home from '@/components/Home.vue'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: Home,
+      meta:{title:'首页'}
+    },
+    {
+      path: '/about',
+      name: 'about',
+      component: () => import('@/components/About.vue'),
+      meta:{title:'关于'},
+      children:[
+        {
+          path:'team',
+          component:()=> import('@/components/Team.vue')
+        },
+        {
+          path:'history',
+          component:()=> import('@/components/History.vue')
+        },
+      ]
+    },
+    {
+      path:'/user/:id',
+      name:'user',
+      component:()=> import('@/components/User.vue')
+    }
+  ],
+})
+
+router.beforeEach((to,from,next) =>{
+  if(to.path === '/about'){
+    const confirmResult = confirm('确定要访问关于页面吗？');
+    if(confirmResult){
+      next()
+    }else{
+      next(false)
+    }
+  }else{
+    next()
+  }
+})
+
+router.afterEach((to)=>{
+  if(to.meta.title){
+    document.title = to.meta.title
+  }
+})
+
+export default router
+```
+
+### 简单的嵌套路由
+#### 代码
+index.js
+```js
+[
+  {
+    path: '/parent',
+    name: 'Parent',
+    component: Parent,
+    children: [
+      {
+        path: 'child1',
+        name: 'Child1',
+        component: Child1
+      },
+      {
+        path: 'child2',
+        name: 'Child2',
+        component: Child2
+      }
+    ]
+  }
+]
+```
+parent.vue
+```vue
+<template>
+  <div class="parent">
+    <h1>父路由</h1>
+    <nav>
+      <router-link to="/parent/child1">子路由1</router-link> |
+      <router-link to="/parent/child2">子路由2</router-link>
+    </nav>
+    <router-view />
+  </div>
+</template>
+```
+child.vue
+```vue
+<template>
+  <div class="child1">
+    <h2>这是子路由1</h2>
+  </div>
+</template>
+```
+
+### 动态嵌套路由
+#### 代码
+parent.vue
+```vue
+<template>
+    <div class="box">
+        <div class="list">
+            <input type="text" v-model="childId" placeholder="输入子路由ID">
+            <button @click="navigateToChild">子路由</button>
+        </div>
+        <div class="content">
+            <router-view/>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    name:'Parent',
+    data() {
+        return {
+            childId:''
+        }
+    },
+    methods:{
+        navigateToChild(){
+            if(this.childId){
+                this.$router.push(`/parent/${this.childId}`)
+            }
+        }
+    }
+}
+</script>
+```
+
+child.vue
+```vue
+<template>
+    <h2>子路由ID为：{{ $route.params.id }}</h2>
+</template>
+<script>
+export default{
+    name:'Child',
+    watch :{
+        '$route.params.id'(newId) {
+            console.log(`子路由ID更新为：${newId}`);            
+        }
+      }
+}
+</script>
+```
+index.js
+```js
+{
+  path: '/parent',
+  component:()=>import('@/components/Parent.vue'),
+  children:[
+    {
+      path:':id',
+      component:()=>import('@/components/Child.vue')
+    }
+  ]
+}
+```
+#### 效果图
+![](https://gitee.com/an-xiaoning/liuhuan/raw/master/20250511150959507.gif)
+
+
+### 嵌套路由的多级嵌套
+#### 代码
+index.js
+```js
+routes: [
+    {
+      path: '/parent',
+      name: 'Parent',
+      component: ()=>import('@/components/Parent.vue'),
+      children:[
+        {
+          path:'child',
+          component:()=>import('@/components/Child.vue'),
+          children:[
+            {
+              path:'grandchild',
+              component:()=>import('@/components/Grandchild.vue')
+            }
+          ]
+        }
+      ]
+    },
+  ],
+```
+parent.vue
+```vue
+<template>
+    <h1>我是父路由</h1>
+    <RouterLink to="/parent/child">进入子路由</RouterLink>
+    <RouterView/>
+</template>
+```
+child.vue
+```vue
+<template>
+    <h2>子路由</h2>
+    <RouterLink to="/parent/child/grandchild">进入孙路由</RouterLink>
+    <RouterView></RouterView>
+</template>
+```
+grandchild.vue
+```vue
+<template>
+    <h3>孙路由</h3>
+</template>
+```
+#### 效果
+![](https://gitee.com/an-xiaoning/liuhuan/raw/master/20250511175654112.gif)
-- 
Gitee