From 03be02b5bbc1eab149f9f20b7a0895227180c4fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=94=A1=E7=8E=AE=E9=93=AD?= <2373854303@qq.com>
Date: Mon, 19 May 2025 11:34:08 +0800
Subject: [PATCH 1/5] =?UTF-8?q?=E6=8F=90=E4=BA=A4519=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...06\347\246\273\351\241\271\347\233\256.md" | 660 ++++++++++++++++++
 1 file changed, 660 insertions(+)
 create mode 100644 "\350\224\241\347\216\256\351\223\255/20250519 \345\256\214\345\226\204VueJs\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\351\241\271\347\233\256.md"

diff --git "a/\350\224\241\347\216\256\351\223\255/20250519 \345\256\214\345\226\204VueJs\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\351\241\271\347\233\256.md" "b/\350\224\241\347\216\256\351\223\255/20250519 \345\256\214\345\226\204VueJs\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\351\241\271\347\233\256.md"
new file mode 100644
index 0000000..1ee1da3
--- /dev/null
+++ "b/\350\224\241\347\216\256\351\223\255/20250519 \345\256\214\345\226\204VueJs\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\351\241\271\347\233\256.md"	
@@ -0,0 +1,660 @@
+# 完善 VueJs 前后端分离项目
+
+## 课堂笔记
+
+### 完善 VueJs 前后端分离项目
+
+#### 一、构建项目结构：
+
+![](https://gitee.com/hyo-ja/picture-warehouse/raw/master/images/20250519110052.png)
+
+#### 二、编写代码
+
+##### 后端
+
+**app.js**
+
+```js
+// 导入依赖包
+import koa from "koa";
+// 导入 路由依赖包
+import Router from "koa-router";
+// 导入 请求体解析 依赖包
+import bodyParser from "koa-bodyparser";
+// 跨域 依赖包
+import cors from "@koa/cors";
+// 导入 sequelize、Op、DataTypes 模块
+import { Sequelize, Op, DataTypes } from "sequelize";
+
+// 创建 sequelize 实例
+export const sequelize = new Sequelize({
+    dialect: "sqlite",
+    storage: "demo.db",
+});
+
+// 老师模型
+const Teacher = sequelize.define("teacher", {
+    // 姓名
+    teacherName: {
+        type: DataTypes.STRING,
+    },
+    // 年龄
+    teacherAge: {
+        type: DataTypes.INTEGER,
+    },
+    // 性别
+    teacherSex: {
+        type: DataTypes.STRING,
+    },
+    // 联系方式
+    phone: {
+        type: DataTypes.STRING,
+    },
+    // 教学班级
+    className: {
+        type: DataTypes.STRING,
+    },
+});
+
+// 同步数据库
+sequelize.sync();
+
+// 创建 koa 实例
+const app = new koa();
+
+// 创建 路由 实例
+const router = new Router();
+
+// 使用 跨域 中间件 解决跨域问题
+app.use(cors());
+
+// 请求体解析
+app.use(bodyParser());
+
+/** =========================== */
+/* 查询所有老师信息、查询含有关键字的老师 */
+router.get('/teachers', async (ctx, next) => {
+    // 条件变量
+    let where;
+
+    // 获取 查询的关键字
+    const query = ctx.query.query;
+
+    // 判断是否有 查询的关键字
+    if (query) {
+        // 条件查询
+        where = {
+            // 模糊查询
+            [Op.or]: [
+                // 姓名
+                {
+                    teacherName: { [Op.like]: `%${query}%` },
+                },
+                // 年龄
+                {
+                    teacherAge: { [Op.like]: `%${query}%` },
+                },
+                // 性别
+                {
+                    teacherSex: { [Op.like]: `%${query}%` },
+                },
+                // 联系方式
+                {
+                    phone: { [Op.like]: `%${query}%` },
+                },
+                // 教学班级
+                {
+                    className: { [Op.like]: `%${query}%` },
+                },
+            ],
+        }
+    } else {
+        where = null
+    }
+    // 查询所有老师信息
+    const teachers = await Teacher.findAll({ where });
+
+    // 响应状态码
+    ctx.status = 200;
+
+    // 响应 Json 数据
+    ctx.body = {
+        code: 200,
+        data: teachers,
+        msg: "查询成功"
+    };
+})
+
+/* 查询指定 id 的老师 */
+router.get('/teachers/:id', async (ctx, next) => {
+    // 拿到 请求id
+    const id = ctx.params.id;
+
+    // 查询所有老师信息
+    const teacher = await Teacher.findByPk(id);
+
+    // 响应状态码
+    ctx.status = 200;
+
+    // 响应 Json 数据
+    ctx.body = {
+        code: 200,
+        data: teacher,
+        msg: "查询成功"
+    };
+})
+
+/* 新增老师 */
+router.post('/teachers', async (ctx, next) => {
+    // 拿到请求对象
+    const obj = ctx.request.body;
+
+    // 新增老师
+    await Teacher.create(obj);
+
+    // 响应状态码
+    ctx.status = 200;
+
+    // 响应 Json 数据
+    ctx.body = {
+        code: 200,
+        data: null,
+        msg: "新增成功"
+    };
+})
+
+/* 修改老师指定 id 的老师 */
+router.put('/teachers/:id', async (ctx, next) => {
+    // 拿到 请求id
+    const id = ctx.params.id;
+
+    // 拿到请求对象
+    const obj = ctx.request.body;
+
+    // 老师是否存在
+    await Teacher.update(obj, { where: { id } });
+
+    // 响应状态码
+    ctx.status = 200;
+
+    // 响应 Json 数据
+    ctx.body = {
+        code: 200,
+        data: null,
+        msg: "修改成功"
+    };
+})
+
+/* 删除指定 id 的老师 */
+router.delete('/teachers/:id', async (ctx, next) => {
+    // 拿到 请求id
+    const id = ctx.params.id;
+
+    // 删除老师
+    await Teacher.destroy({ where: { id } });
+
+    // 响应状态码
+    ctx.status = 200;
+
+    // 响应 Json 数据
+    ctx.body = {
+        code: 200,
+        data: null,
+        msg: "删除成功"
+    };
+})
+
+/** =========================== */
+// 注册路由
+app.use(router.routes());
+
+// app 启动端口
+const appPort = 8000;
+
+// 监听服务器端口
+app.listen(appPort);
+
+// 当前服务器运行地址
+console.log(`当前服务器运行地址：http://localhost:${appPort}`);
+```
+
+##### 前端
+
+**router.js**
+
+```js
+import { createRouter, createWebHistory } from 'vue-router'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      meta: { title: '首页' },
+      component: () => import('@/views/Home.vue'),
+    },
+    {
+      path: '/addTeacher',
+      name: 'addTeacher',
+      meta: { title: '新增老师' },
+      component: () => import('@/views/AddTeacher.vue'),
+    },
+    {
+      path: '/updateTeacher/:id',
+      name: 'updateTeacher',
+      meta: { title: '修改老师' },
+      component: () => import('@/views/UpdateTeacher.vue'),
+    },
+  ],
+})
+
+router.beforeEach((to, from, next) => {
+  if (to.meta.title) {
+    document.title = to.meta.title
+  }
+  next()
+})
+
+export default router
+```
+
+**App.vue**
+
+```vue
+<script setup>
+import { RouterView } from 'vue-router'
+</script>
+
+<template>
+  <RouterView></RouterView>
+</template>
+
+<style>
+*,
+body,
+html {
+  padding: 0;
+  margin: 0;
+}
+
+#app {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  background-color: rgb(184, 223, 244);
+}
+
+input {
+  border-radius: 5px;
+  outline: none;
+  padding: 5px 10px 5px 10px;
+  margin: 2px;
+  background-color: rgb(245, 142, 231);
+  color: #fff;
+  border: 1px #e85fcc solid;
+}
+
+input:hover {
+  transition: all 1s;
+  background-color: #f87cdf;
+  color: #fff;
+  border: 1px #e85fcc solid;
+}
+
+input::placeholder {
+  color: #f9efef;
+}
+
+table {
+  border-spacing: 0;
+  text-align: center;
+  background-color: rgb(245, 142, 231);
+  color: rgb(255, 246, 247);
+}
+
+tr,
+th,
+td {
+  padding: 20px 40px;
+  border: 1px #f87cdf solid;
+}
+</style>
+```
+
+**Home.vue**
+
+```vue
+<template>
+  <div class="home">
+    <div class="operate">
+      <input type="button" value="新增" @click="$router.push('addTeacher')" />
+      <input type="text" placeholder="请输入关键词" v-model="keyWord" />
+      <input type="button" value="查询" @click="queryKeyWord" />
+    </div>
+
+    <div class="list">
+      <table>
+        <thead>
+          <tr>
+            <th>编号</th>
+            <th>姓名</th>
+            <th>年龄</th>
+            <th>性别</th>
+            <th>联系方式</th>
+            <th>教学班级</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+
+        <tbody v-if="teachers && teachers.length">
+          <tr v-for="teacher in teachers">
+            <td>{{ teacher.id }}</td>
+            <td>{{ teacher.teacherName }}</td>
+            <td>{{ teacher.teacherAge }}</td>
+            <td>{{ teacher.teacherSex }}</td>
+            <td>{{ teacher.phone }}</td>
+            <td>{{ teacher.className }}</td>
+            <td>
+              <input type="button" value="修改" @click="$router.push(`updateTeacher/${teacher.id}`)" />
+              <input type="button" value="删除" @click="del(teacher.id)" />
+            </td>
+          </tr>
+        </tbody>
+
+        <tbody v-else>
+          <tr>
+            <td colspan="7">暂无数据</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.operate {
+  text-align: center;
+  padding: 20px;
+}
+</style>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import axios from 'axios'
+
+// 老师列表
+const teachers = ref([])
+
+// 后端api
+const api = 'http://localhost:8000/teachers'
+
+// 关键词
+const keyWord = ref('')
+
+// 查询关键词
+function queryKeyWord() {
+  // 请求
+  axios.get(`${api}?query=${keyWord.value}`).then((res) => {
+    if (res.status === 200) {
+      teachers.value = res.data.data
+    }
+  })
+}
+
+// 删除请求
+function del(id) {
+  if (confirm('确认删除')) {
+    // 删除请求
+    axios.delete(`${api}/${id}`).then((res) => {
+      if (res.status === 200) {
+        setTimeout(() => {
+          // 获取索引
+          const index = teachers.value.findIndex((item) => { item.id === id })
+          // 删除元素
+          teachers.value.splice(index, 1)
+        }, 100)
+      }
+    })
+  }
+}
+
+onMounted(() => {
+  // 请求
+  setTimeout(() => {
+    axios.get(api).then((res) => {
+      if (res.status === 200) {
+        teachers.value = res.data.data
+      }
+    })
+  }, 100)
+})
+</script>
+```
+
+**AddTeacher.vue**
+
+```vue
+<template>
+  <form>
+    <table>
+      <tbody>
+        <tr>
+          <td>姓名：</td>
+          <td>
+            <input type="text" v-model="teacher.teacherName" />
+          </td>
+        </tr>
+
+        <tr>
+          <td>年龄：</td>
+          <td>
+            <input type="text" v-model="teacher.teacherAge" />
+          </td>
+        </tr>
+
+        <tr>
+          <td>性别：</td>
+          <td>
+            <input type="text" v-model="teacher.teacherSex" />
+          </td>
+        </tr>
+
+        <tr>
+          <td>联系方式：</td>
+          <td>
+            <input type="text" v-model="teacher.phone" />
+          </td>
+        </tr>
+
+        <tr>
+          <td>教学班级：</td>
+          <td>
+            <input type="text" v-model="teacher.className" />
+          </td>
+        </tr>
+
+        <tr id="btn">
+          <td colspan="2">
+            <input type="reset" value="清空" />
+            <input type="button" value="新增" @click="add" />
+            <input type="button" value="取消" @click="$router.push('/')" />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </form>
+</template>
+
+<style scoped>
+table tr td:first-child {
+  text-align: right;
+}
+
+#btn td {
+  text-align: center;
+}
+</style>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import axios from 'axios'
+
+// 老师列表
+const teachers = ref([])
+
+// 后端api
+const api = 'http://localhost:8000/teachers'
+
+// 老师对象
+const teacher = ref({
+  className: '',
+  phone: '',
+  teacherAge: '',
+  teacherName: '',
+})
+
+// 添加
+function add() {
+  for (const key in teacher.value) {
+    if (teacher.value[key] === '') {
+      return
+    }
+  }
+
+  // 全部输入框都有内容
+  // 新增请求
+  axios.post(`${api}`, teacher.value).then((res) => {
+    if (res.status === 200) {
+      setTimeout(() => {
+        location.href = '/'
+      }, 100)
+    }
+  })
+}
+</script>
+```
+
+**updateTeacher.vue**
+
+```vue
+<template>
+  <form>
+    <table>
+      <tbody>
+        <tr>
+          <td>姓名：</td>
+          <td>
+            <input type="text" v-model="teacher.teacherName" />
+          </td>
+        </tr>
+
+        <tr>
+          <td>年龄：</td>
+          <td>
+            <input type="text" v-model="teacher.teacherAge" />
+          </td>
+        </tr>
+
+        <tr>
+          <td>性别：</td>
+          <td>
+            <input type="text" v-model="teacher.teacherSex" />
+          </td>
+        </tr>
+
+        <tr>
+          <td>联系方式：</td>
+          <td>
+            <input type="text" v-model="teacher.phone" />
+          </td>
+        </tr>
+
+        <tr>
+          <td>教学班级：</td>
+          <td>
+            <input type="text" v-model="teacher.className" />
+          </td>
+        </tr>
+
+        <tr id="btn">
+          <td colspan="2">
+            <input type="button" value="保存" @click="save" />
+            <input type="button" value="取消" @click="$router.push('/')" />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </form>
+</template>
+
+<style scoped>
+input {
+  padding: 5px;
+  margin: 5px;
+}
+
+form {
+  text-align: center;
+}
+
+table tr td:first-child {
+  text-align: right;
+}
+
+#btn td {
+  text-align: center;
+}
+</style>
+
+<script setup>
+import { useRoute } from 'vue-router'
+import { onMounted, ref } from 'vue'
+import axios from 'axios'
+
+const route = useRoute()
+
+// 后端api
+const api = 'http://localhost:8000/teachers'
+
+// 老师对象
+const teacher = ref({
+  className: '',
+  phone: '',
+  teacherAge: '',
+  teacherName: '',
+})
+
+onMounted(() => {
+  // 请求
+  axios.get(`${api}/${route.params.id}`).then((res) => {
+    if (res.status === 200) {
+      teacher.value = res.data.data
+    }
+  })
+})
+
+// 修改
+function save() {
+  // 修改请求
+  axios.put(`${api}/${route.params.id}`, teacher.value).then((res) => {
+    if (res.status === 200) {
+      setTimeout(() => {
+        location.href = '/'
+      }, 100)
+    }
+  })
+}
+</script>
+```
+
+#### 三、效果演示：
+
+##### [项目预览](https://gitee.com/hyo-ja/vuejs-frontend-backend-separation-projects)
+
+##### 效果预览
+
+![](https://gitee.com/hyo-ja/picture-warehouse/raw/master/images/2025-05-19-02.gif)
+
+## 课后作业
-- 
Gitee


From b85f83ff901f4ab8b9f91b2498ed2c4c3809e262 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=94=A1=E7=8E=AE=E9=93=AD?= <2373854303@qq.com>
Date: Tue, 20 May 2025 11:35:15 +0800
Subject: [PATCH 2/5] =?UTF-8?q?=E6=8F=90=E4=BA=A4520=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...71\347\233\256\346\242\263\347\220\206.md" | 698 ++++++++++++++++++
 1 file changed, 698 insertions(+)
 create mode 100644 "\350\224\241\347\216\256\351\223\255/20250520 VueJs\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\351\241\271\347\233\256\346\242\263\347\220\206.md"

diff --git "a/\350\224\241\347\216\256\351\223\255/20250520 VueJs\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\351\241\271\347\233\256\346\242\263\347\220\206.md" "b/\350\224\241\347\216\256\351\223\255/20250520 VueJs\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\351\241\271\347\233\256\346\242\263\347\220\206.md"
new file mode 100644
index 0000000..ff6b623
--- /dev/null
+++ "b/\350\224\241\347\216\256\351\223\255/20250520 VueJs\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\351\241\271\347\233\256\346\242\263\347\220\206.md"	
@@ -0,0 +1,698 @@
+# VueJs 前后端分离项目梳理
+
+## 课堂笔记
+
+### VueJs 前后端分离项目梳理
+
+#### 一、前后端项目构建
+
+##### 1. 构建项目结构：
+
+![](https://gitee.com/hyo-ja/picture-warehouse/raw/master/images/20250519110052.png)
+
+##### 2. 构建项目：
+
+###### 后端
+
+1. 项目初始化：
+
+```bash
+npm init -y
+```
+
+2. 安装依赖包：
+
+```bash
+npm i
+```
+
+###### 前端
+
+1. 项目初始化：
+
+```bash
+yarn create vue
+```
+
+2. 安装依赖包：
+
+```bash
+yarn
+```
+
+3. 代码格式化：
+
+```bash
+yarn format
+```
+
+#### 二、代码编写
+
+##### 后端
+
+**app.js**
+
+```js
+// 导入依赖包
+import koa from "koa";
+// 导入 路由依赖包
+import Router from "koa-router";
+// 导入 请求体解析 依赖包
+import bodyParser from "koa-bodyparser";
+// 跨域 依赖包
+import cors from "@koa/cors";
+// 导入 sequelize、Op、DataTypes 模块
+import { Sequelize, Op, DataTypes } from "sequelize";
+
+// 创建 sequelize 实例
+export const sequelize = new Sequelize({
+    dialect: "sqlite",
+    storage: "demo.db",
+});
+
+// 老师模型
+const Teacher = sequelize.define("teacher", {
+    // 姓名
+    teacherName: {
+        type: DataTypes.STRING,
+    },
+    // 年龄
+    teacherAge: {
+        type: DataTypes.INTEGER,
+    },
+    // 性别
+    teacherSex: {
+        type: DataTypes.STRING,
+    },
+    // 联系方式
+    phone: {
+        type: DataTypes.STRING,
+    },
+    // 教学班级
+    className: {
+        type: DataTypes.STRING,
+    },
+});
+
+// 同步数据库
+sequelize.sync();
+
+// 创建 koa 实例
+const app = new koa();
+
+// 创建 路由 实例
+const router = new Router();
+
+// 使用 跨域 中间件 解决跨域问题
+app.use(cors());
+
+// 请求体解析
+app.use(bodyParser());
+
+/** =========================== */
+/* 查询所有老师信息、查询含有关键字的老师 */
+router.get('/teachers', async (ctx, next) => {
+    // 条件变量
+    let where;
+
+    // 获取 查询的关键字
+    const query = ctx.query.query;
+
+    // 判断是否有 查询的关键字
+    if (query) {
+        // 条件查询
+        where = {
+            // 模糊查询
+            [Op.or]: [
+                // 姓名
+                {
+                    teacherName: { [Op.like]: `%${query}%` },
+                },
+                // 年龄
+                {
+                    teacherAge: { [Op.like]: `%${query}%` },
+                },
+                // 性别
+                {
+                    teacherSex: { [Op.like]: `%${query}%` },
+                },
+                // 联系方式
+                {
+                    phone: { [Op.like]: `%${query}%` },
+                },
+                // 教学班级
+                {
+                    className: { [Op.like]: `%${query}%` },
+                },
+            ],
+        }
+    } else {
+        where = null
+    }
+    // 查询所有老师信息
+    const teachers = await Teacher.findAll({ where });
+
+    // 响应状态码
+    ctx.status = 200;
+
+    // 响应 Json 数据
+    ctx.body = {
+        code: 200,
+        data: teachers,
+        msg: "查询成功"
+    };
+})
+
+/* 查询指定 id 的老师 */
+router.get('/teachers/:id', async (ctx, next) => {
+    // 拿到 请求id
+    const id = ctx.params.id;
+
+    // 查询所有老师信息
+    const teacher = await Teacher.findByPk(id);
+
+    // 响应状态码
+    ctx.status = 200;
+
+    // 响应 Json 数据
+    ctx.body = {
+        code: 200,
+        data: teacher,
+        msg: "查询成功"
+    };
+})
+
+/* 新增老师 */
+router.post('/teachers', async (ctx, next) => {
+    // 拿到请求对象
+    const obj = ctx.request.body;
+
+    // 新增老师
+    await Teacher.create(obj);
+
+    // 响应状态码
+    ctx.status = 200;
+
+    // 响应 Json 数据
+    ctx.body = {
+        code: 200,
+        data: null,
+        msg: "新增成功"
+    };
+})
+
+/* 修改老师指定 id 的老师 */
+router.put('/teachers/:id', async (ctx, next) => {
+    // 拿到 请求id
+    const id = ctx.params.id;
+
+    // 拿到请求对象
+    const obj = ctx.request.body;
+
+    // 老师是否存在
+    await Teacher.update(obj, { where: { id } });
+
+    // 响应状态码
+    ctx.status = 200;
+
+    // 响应 Json 数据
+    ctx.body = {
+        code: 200,
+        data: null,
+        msg: "修改成功"
+    };
+})
+
+/* 删除指定 id 的老师 */
+router.delete('/teachers/:id', async (ctx, next) => {
+    // 拿到 请求id
+    const id = ctx.params.id;
+
+    // 删除老师
+    await Teacher.destroy({ where: { id } });
+
+    // 响应状态码
+    ctx.status = 200;
+
+    // 响应 Json 数据
+    ctx.body = {
+        code: 200,
+        data: null,
+        msg: "删除成功"
+    };
+})
+
+/** =========================== */
+// 注册路由
+app.use(router.routes());
+
+// app 启动端口
+const appPort = 8000;
+
+// 监听服务器端口
+app.listen(appPort);
+
+// 当前服务器运行地址
+console.log(`当前服务器运行地址：http://localhost:${appPort}`);
+```
+
+##### 前端
+
+**router.js**
+
+```js
+import { createRouter, createWebHistory } from 'vue-router'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      meta: { title: '首页' },
+      component: () => import('@/views/Home.vue'),
+    },
+    {
+      path: '/addTeacher',
+      name: 'addTeacher',
+      meta: { title: '新增老师' },
+      component: () => import('@/views/AddTeacher.vue'),
+    },
+    {
+      path: '/updateTeacher/:id',
+      name: 'updateTeacher',
+      meta: { title: '修改老师' },
+      component: () => import('@/views/UpdateTeacher.vue'),
+    },
+  ],
+})
+
+router.beforeEach((to, from, next) => {
+  if (to.meta.title) {
+    document.title = to.meta.title
+  }
+  next()
+})
+
+export default router
+```
+
+**App.vue**
+
+```vue
+<script setup>
+import { RouterView } from 'vue-router'
+</script>
+
+<template>
+  <RouterView></RouterView>
+</template>
+
+<style>
+*,
+body,
+html {
+  padding: 0;
+  margin: 0;
+}
+
+#app {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  background-color: rgb(184, 223, 244);
+}
+
+input {
+  border-radius: 5px;
+  outline: none;
+  padding: 5px 10px 5px 10px;
+  margin: 2px;
+  background-color: rgb(245, 142, 231);
+  color: #fff;
+  border: 1px #e85fcc solid;
+}
+
+input:hover {
+  transition: all 1s;
+  background-color: #f87cdf;
+  color: #fff;
+  border: 1px #e85fcc solid;
+}
+
+input::placeholder {
+  color: #f9efef;
+}
+
+table {
+  border-spacing: 0;
+  text-align: center;
+  background-color: rgb(245, 142, 231);
+  color: rgb(255, 246, 247);
+}
+
+tr,
+th,
+td {
+  padding: 20px 40px;
+  border: 1px #f87cdf solid;
+}
+</style>
+```
+
+**Home.vue**
+
+```vue
+<template>
+  <div class="home">
+    <div class="operate">
+      <input type="button" value="新增" @click="$router.push('addTeacher')" />
+      <input type="text" placeholder="请输入关键词" v-model="keyWord" />
+      <input type="button" value="查询" @click="queryKeyWord" />
+    </div>
+
+    <div class="list">
+      <table>
+        <thead>
+          <tr>
+            <th>编号</th>
+            <th>姓名</th>
+            <th>年龄</th>
+            <th>性别</th>
+            <th>联系方式</th>
+            <th>教学班级</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+
+        <tbody v-if="teachers && teachers.length">
+          <tr v-for="teacher in teachers">
+            <td>{{ teacher.id }}</td>
+            <td>{{ teacher.teacherName }}</td>
+            <td>{{ teacher.teacherAge }}</td>
+            <td>{{ teacher.teacherSex }}</td>
+            <td>{{ teacher.phone }}</td>
+            <td>{{ teacher.className }}</td>
+            <td>
+              <input type="button" value="修改" @click="$router.push(`updateTeacher/${teacher.id}`)" />
+              <input type="button" value="删除" @click="del(teacher.id)" />
+            </td>
+          </tr>
+        </tbody>
+
+        <tbody v-else>
+          <tr>
+            <td colspan="7">暂无数据</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.operate {
+  text-align: center;
+  padding: 20px;
+}
+</style>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import axios from 'axios'
+
+// 老师列表
+const teachers = ref([])
+
+// 后端api
+const api = 'http://localhost:8000/teachers'
+
+// 关键词
+const keyWord = ref('')
+
+// 查询关键词
+function queryKeyWord() {
+  // 请求
+  axios.get(`${api}?query=${keyWord.value}`).then((res) => {
+    if (res.status === 200) {
+      teachers.value = res.data.data
+    }
+  })
+}
+
+// 删除请求
+function del(id) {
+  if (confirm('确认删除')) {
+    // 删除请求
+    axios.delete(`${api}/${id}`).then((res) => {
+      if (res.status === 200) {
+        setTimeout(() => {
+          // 获取索引
+          const index = teachers.value.findIndex((item) => { item.id === id })
+          // 删除元素
+          teachers.value.splice(index, 1)
+        }, 100)
+      }
+    })
+  }
+}
+
+onMounted(() => {
+  // 请求
+  setTimeout(() => {
+    axios.get(api).then((res) => {
+      if (res.status === 200) {
+        teachers.value = res.data.data
+      }
+    })
+  }, 100)
+})
+</script>
+```
+
+**AddTeacher.vue**
+
+```vue
+<template>
+  <form>
+    <table>
+      <tbody>
+        <tr>
+          <td>姓名：</td>
+          <td>
+            <input type="text" v-model="teacher.teacherName" />
+          </td>
+        </tr>
+
+        <tr>
+          <td>年龄：</td>
+          <td>
+            <input type="text" v-model="teacher.teacherAge" />
+          </td>
+        </tr>
+
+        <tr>
+          <td>性别：</td>
+          <td>
+            <input type="text" v-model="teacher.teacherSex" />
+          </td>
+        </tr>
+
+        <tr>
+          <td>联系方式：</td>
+          <td>
+            <input type="text" v-model="teacher.phone" />
+          </td>
+        </tr>
+
+        <tr>
+          <td>教学班级：</td>
+          <td>
+            <input type="text" v-model="teacher.className" />
+          </td>
+        </tr>
+
+        <tr id="btn">
+          <td colspan="2">
+            <input type="reset" value="清空" />
+            <input type="button" value="新增" @click="add" />
+            <input type="button" value="取消" @click="$router.push('/')" />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </form>
+</template>
+
+<style scoped>
+table tr td:first-child {
+  text-align: right;
+}
+
+#btn td {
+  text-align: center;
+}
+</style>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import axios from 'axios'
+
+// 老师列表
+const teachers = ref([])
+
+// 后端api
+const api = 'http://localhost:8000/teachers'
+
+// 老师对象
+const teacher = ref({
+  className: '',
+  phone: '',
+  teacherAge: '',
+  teacherName: '',
+})
+
+// 添加
+function add() {
+  for (const key in teacher.value) {
+    if (teacher.value[key] === '') {
+      return
+    }
+  }
+
+  // 全部输入框都有内容
+  // 新增请求
+  axios.post(`${api}`, teacher.value).then((res) => {
+    if (res.status === 200) {
+      setTimeout(() => {
+        location.href = '/'
+      }, 100)
+    }
+  })
+}
+</script>
+```
+
+**updateTeacher.vue**
+
+```vue
+<template>
+  <form>
+    <table>
+      <tbody>
+        <tr>
+          <td>姓名：</td>
+          <td>
+            <input type="text" v-model="teacher.teacherName" />
+          </td>
+        </tr>
+
+        <tr>
+          <td>年龄：</td>
+          <td>
+            <input type="text" v-model="teacher.teacherAge" />
+          </td>
+        </tr>
+
+        <tr>
+          <td>性别：</td>
+          <td>
+            <input type="text" v-model="teacher.teacherSex" />
+          </td>
+        </tr>
+
+        <tr>
+          <td>联系方式：</td>
+          <td>
+            <input type="text" v-model="teacher.phone" />
+          </td>
+        </tr>
+
+        <tr>
+          <td>教学班级：</td>
+          <td>
+            <input type="text" v-model="teacher.className" />
+          </td>
+        </tr>
+
+        <tr id="btn">
+          <td colspan="2">
+            <input type="button" value="保存" @click="save" />
+            <input type="button" value="取消" @click="$router.push('/')" />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </form>
+</template>
+
+<style scoped>
+input {
+  padding: 5px;
+  margin: 5px;
+}
+
+form {
+  text-align: center;
+}
+
+table tr td:first-child {
+  text-align: right;
+}
+
+#btn td {
+  text-align: center;
+}
+</style>
+
+<script setup>
+import { useRoute } from 'vue-router'
+import { onMounted, ref } from 'vue'
+import axios from 'axios'
+
+const route = useRoute()
+
+// 后端api
+const api = 'http://localhost:8000/teachers'
+
+// 老师对象
+const teacher = ref({
+  className: '',
+  phone: '',
+  teacherAge: '',
+  teacherName: '',
+})
+
+onMounted(() => {
+  // 请求
+  axios.get(`${api}/${route.params.id}`).then((res) => {
+    if (res.status === 200) {
+      teacher.value = res.data.data
+    }
+  })
+})
+
+// 修改
+function save() {
+  // 修改请求
+  axios.put(`${api}/${route.params.id}`, teacher.value).then((res) => {
+    if (res.status === 200) {
+      setTimeout(() => {
+        location.href = '/'
+      }, 100)
+    }
+  })
+}
+</script>
+```
+
+#### 三、效果演示
+
+##### [项目预览](https://gitee.com/hyo-ja/vuejs-frontend-backend-separation-projects)
+
+##### 效果预览
+
+![](https://gitee.com/hyo-ja/picture-warehouse/raw/master/images/2025-05-19-02.gif)
+
+## 课后作业
-- 
Gitee


From cd14f395cc230e0d1df1f6f2b64fd170a620804d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=94=A1=E7=8E=AE=E9=93=AD?= <2373854303@qq.com>
Date: Wed, 21 May 2025 18:48:11 +0800
Subject: [PATCH 3/5] =?UTF-8?q?=E6=8F=90=E4=BA=A4521=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...06\347\246\273\351\241\271\347\233\256.md" | 598 ++++++++++++++++++
 1 file changed, 598 insertions(+)
 create mode 100644 "\350\224\241\347\216\256\351\223\255/20250521 \351\207\215\345\206\231VueJs\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\351\241\271\347\233\256.md"

diff --git "a/\350\224\241\347\216\256\351\223\255/20250521 \351\207\215\345\206\231VueJs\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\351\241\271\347\233\256.md" "b/\350\224\241\347\216\256\351\223\255/20250521 \351\207\215\345\206\231VueJs\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\351\241\271\347\233\256.md"
new file mode 100644
index 0000000..3c87d85
--- /dev/null
+++ "b/\350\224\241\347\216\256\351\223\255/20250521 \351\207\215\345\206\231VueJs\345\211\215\345\220\216\347\253\257\345\210\206\347\246\273\351\241\271\347\233\256.md"	
@@ -0,0 +1,598 @@
+# 重写 VueJs 前后端分离项目梳理
+
+## 课堂笔记
+
+### 重写 VueJs 前后端分离项目梳理
+
+#### 一、前后端项目构建
+
+##### 1. 构建项目结构：
+
+![](https://gitee.com/hyo-ja/picture-warehouse/raw/master/images/20250519110052.png)
+
+##### 2. 构建项目：
+
+###### 后端
+
+1. 项目初始化：
+
+```bash
+npm init -y
+```
+
+2. 安装依赖包：
+
+```bash
+npm i
+```
+
+###### 前端
+
+1. 项目初始化：
+
+```bash
+yarn create vue
+```
+
+2. 安装依赖包：
+
+```bash
+yarn
+```
+
+3. 代码格式化：
+
+```bash
+yarn format
+```
+
+#### 二、代码编写
+
+##### 后端
+
+**app.js**
+
+```js
+// 导入依赖包
+import koa from "koa";
+import Router from "koa-router";
+import bodyParser from "koa-bodyparser";
+import cors from "@koa/cors";
+import { DataTypes, Sequelize, Op, STRING, DOUBLE, FLOAT, where } from "sequelize";
+
+// 创建 koa 实例
+const app = new koa();
+
+// 创建 sequelize 实例
+const sequelize = new Sequelize('test', 'root', '123456', {
+    dialect: "mysql",
+})
+
+// 定义模型
+const Book = sequelize.define('books', {
+    // 图书名称
+    bookName: {
+        type: STRING
+    },
+    // 作者
+    autor: {
+        type: STRING
+    },
+    // 价格
+    price: {
+        type: FLOAT(2)
+    },
+})
+
+// 同步模型
+// sequelize.sync();
+
+// 插入数据
+// Book.create({
+//     // 图书名称
+//     bookName: "西游记2",
+//     // 作者
+//     autor: "吴承恩",
+//     // 价格
+//     price: 18.00
+// })
+
+// 解决跨域问题
+app.use(cors());
+
+// 请求体解析
+app.use(bodyParser());
+
+// 创建路由实例
+const router = new Router()
+
+/** 路由方法 */
+// 查询所有图书
+router.get('/books', async (ctx, next) => {
+    // 获取关键词
+    const keyWord = ctx.query.keyWord;
+
+    // 查询条件
+    let where;
+
+    // 判断是否使用模糊查询
+    if (keyWord) {
+        where = {
+            [Op.or]: {
+                bookName: {
+                    [Op.like]: `%${keyWord}%`
+                },
+                autor: {
+                    [Op.like]: `%${keyWord}%`
+                },
+                price: {
+                    [Op.eq]: keyWord
+                }
+            }
+        }
+    }
+    else {
+        where = null;
+    }
+
+    // 查询所有图书
+    const books = await Book.findAll({ where })
+
+    // 成功状态码
+    ctx.status = 200;
+
+    // 响应数据
+    ctx.body = {
+        code: 200,
+        data: books,
+        msg: "查询成功"
+    }
+})
+
+// 查询一本图书
+router.get('/books/:id', async (ctx, next) => {
+    // 获取 id
+    const id = ctx.params.id;
+
+    // 查询所有图书
+    const book = await Book.findByPk(id);
+
+    // 成功状态码
+    ctx.status = 200;
+
+    // 响应数据
+    ctx.body = {
+        code: 200,
+        data: book,
+        msg: "查询成功"
+    }
+})
+
+// 新增图书
+router.post('/books', async (ctx, next) => {
+    // 获取新增对象
+    const obj = ctx.request.body;
+
+    // 新增图书
+    await Book.create(obj);
+
+    // 成功状态码
+    ctx.status = 200;
+
+    // 响应数据
+    ctx.body = {
+        code: 200,
+        data: null,
+        msg: "新增成功"
+    }
+})
+
+// 修改图书
+router.put('/books/:id', async (ctx, next) => {
+    // 获取新增对象
+    const obj = ctx.request.body;
+
+    // 获取 id
+    const id = ctx.params.id;
+
+    // 新增图书
+    await Book.update(obj, { where: { id } });
+
+    // 成功状态码
+    ctx.status = 200;
+
+    // 响应数据
+    ctx.body = {
+        code: 200,
+        data: null,
+        msg: "修改成功"
+    }
+})
+
+// 删除图书
+router.delete('/books/:id', async (ctx, next) => {
+    // 获取 id
+    const id = ctx.params.id;
+
+    // 删除图书
+    await Book.destroy({ where: { id } });
+
+    // 成功状态码
+    ctx.status = 200;
+
+    // 响应数据
+    ctx.body = {
+        code: 200,
+        data: null,
+        msg: "删除成功"
+    }
+})
+
+// 注册路由
+app.use(router.routes())
+
+// 服务器端口
+const appPort = 8000;
+
+// 监听端口
+app.listen(appPort);
+
+console.log(`当前服务运行在：http://localhost:${appPort}`);
+```
+
+##### 前端
+
+**router.js**
+
+```js
+import { createRouter, createWebHistory } from 'vue-router'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      meta: { title: "图书列表" },
+      component: () => import("@/views/Home.vue"),
+    },
+    {
+      path: '/addBook',
+      meta: { title: "新增图书" },
+      component: () => import("@/views/AddBook.vue"),
+    },
+    {
+      path: '/updateBook/:id',
+      meta: { title: "修改图书" },
+      component: () => import("@/views/UpdateBook.vue"),
+    },
+  ],
+})
+
+// 全局守卫
+router.beforeEach((to, from, next) => {
+  if (to.meta.title) {
+    document.title = to.meta.title
+  }
+  next()
+})
+
+export default router
+```
+
+**App.vue**
+
+```vue
+<template>
+  <RouterView />
+</template>
+
+<script>
+import { RouterView } from 'vue-router';
+</script>
+
+<style>
+*,
+body,
+html {
+  padding: 0;
+  margin: 0;
+}
+
+body{
+  text-align: center;
+}
+
+#app {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+}
+
+table {
+  border-spacing: 0;
+  background-color: brown;
+  color: #fff;
+}
+
+input {
+  margin: 2px;
+  outline: none;
+  color: #fff;
+  background-color: brown;
+  border: 1px #fff solid;
+  padding: 10px 15px;
+  border-radius: 5px;
+}
+
+
+input:hover {
+  transition: all 1s;
+  color: brown;
+  background-color: #fff;
+  border: 1px brown solid;
+}
+
+input::placeholder {
+  color: #f39a9a;
+}
+
+tr,
+th,
+td {
+  padding: 20px 40px;
+  border: 1px #a16161 solid;
+}
+
+h1 {
+  color: #a16161;
+  padding: 10px;
+}
+</style>
+```
+
+**Home.vue**
+
+```vue
+<template>
+    <div class="content">
+        <div>
+            <input type="button" value="新增" @click="$router.push('/addBook')" />
+            <input type="text" placeholder="请输入关键词" v-model="keyWord" />
+            <input type="button" value="查询" @click="query" />
+        </div>
+        <table>
+            <thead>
+                <tr>
+                    <th>编号</th>
+                    <th>图书名称</th>
+                    <th>作者</th>
+                    <th>价格</th>
+                    <th>操作</th>
+                </tr>
+            </thead>
+
+            <tbody v-if="books && books.length">
+                <tr v-for="book in books" :key="book.id">
+                    <td>{{ book.id }}</td>
+                    <td>{{ book.bookName }}</td>
+                    <td>{{ book.autor }}</td>
+                    <td>{{ book.price }}</td>
+                    <td>
+                        <input type="button" value="修改" @click="$router.push(`/updateBook/${book.id}`)" />
+                        <input type="button" value="删除" @click="del(book.id)" />
+                    </td>
+                </tr>
+            </tbody>
+
+            <tbody v-else>
+                <tr>
+                    <td colspan="5">暂无数据</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<script setup>
+// 引用 api
+import { ref, onMounted } from "vue"
+import { useRouter } from "vue-router";
+import axios from "axios"
+
+// 后端 api
+const api = "http://localhost:8000/books"
+
+// 响应数据
+const books = ref([])
+
+// 查询关键词
+const keyWord = ref('')
+
+// 创建实例
+const router = useRouter();
+
+// 查询方法
+async function findAll() {
+    const data = await axios.get(`${api}?keyWord=${keyWord.value}`)
+    books.value = data.data.data
+}
+
+// 生命周期方法
+onMounted(async () => {
+    await findAll();
+})
+
+// 查询
+async function query() {
+    await findAll()
+}
+
+// 删除
+async function del(id) {
+    if (confirm("确认删除？")) {
+        const data = await axios.delete(`${api}/${id}`)
+        if (data.data.code === 200) {
+            const index = books.value.findIndex((item) => item.id === id)
+            books.value.splice(index, 1)
+        }
+    }
+}
+</script>
+
+<style scoped>
+.content div:first-child {
+    margin: 10px;
+}
+</style>
+```
+
+**AddTeacher.vue**
+
+```vue
+<template>
+    <form>
+        <h1>新增图书</h1>
+        <table>
+            <tr>
+                <td>图书名称：</td>
+                <td><input type="text" v-model="book.bookName" /></td>
+            </tr>
+
+            <tr>
+                <td>作者：</td>
+                <td><input type="text" v-model="book.autor" /></td>
+            </tr>
+
+            <tr>
+                <td>价格：</td>
+                <td><input type="text" v-model="book.price" /></td>
+            </tr>
+
+            <tr>
+                <td colspan="2">
+                    <input type="reset" value="清空" />
+                    <input type="button" value="新增" @click="add" />
+                    <input type="button" value="取消" @click="$router.push('/')" />
+                </td>
+            </tr>
+        </table>
+    </form>
+</template>
+
+<script setup>
+import { ref } from "vue"
+import { useRouter } from "vue-router"
+import axios from "axios"
+
+const router = useRouter()
+
+// 后端 api
+const api = "http://localhost:8000/books"
+
+// 图书信息
+const book = ref({
+    bookName: '',
+    autor: '',
+    price: ''
+})
+
+// 新增
+async function add() {
+    for (const key in book.value) {
+        if (book.value[key] === '') {
+            return
+        }
+    }
+
+    const data = await axios.post(api, book.value)
+    if (data.data.code === 200) {
+        router.push("/")
+    }
+}
+</script>
+```
+
+**updateTeacher.vue**
+
+```vue
+<template>
+    <form>
+        <h1>修改图书</h1>
+        <table>
+            <tr>
+                <td>图书名称：</td>
+                <td><input type="text" v-model="book.bookName" /></td>
+            </tr>
+
+            <tr>
+                <td>作者：</td>
+                <td><input type="text" v-model="book.autor" /></td>
+            </tr>
+
+            <tr>
+                <td>价格：</td>
+                <td><input type="text" v-model="book.price" /></td>
+            </tr>
+
+            <tr>
+                <td colspan="2">
+                    <input type="button" value="保存" @click="save" />
+                    <input type="button" value="取消" @click="$router.push('/')" />
+                </td>
+            </tr>
+        </table>
+    </form>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue"
+import { useRouter, useRoute } from "vue-router"
+import axios from "axios"
+
+const router = useRouter()
+const route = useRoute()
+
+// 后端 api
+const api = "http://localhost:8000/books"
+
+// 图书信息
+const book = ref({
+    bookName: '',
+    autor: '',
+    price: ''
+})
+
+// 修改
+async function save() {
+    for (const key in book.value) {
+        if (book.value[key] === '') {
+            return
+        }
+    }
+
+    const id = route.params.id
+
+    const data = await axios.put(`${api}/${id}`, book.value)
+    if (data.data.code === 200) {
+        router.push("/")
+    }
+}
+
+// 生命周期方法
+onMounted(async () => {
+    const data = await axios.get(`${api}/${route.params.id}`)
+    book.value = data.data.data
+})
+</script>
+```
+
+#### 三、效果演示
+
+##### [项目预览](https://gitee.com/hyo-ja/vuejs-frontend-backend-separation-projects)
+
+##### 效果预览
+
+![](https://gitee.com/hyo-ja/picture-warehouse/raw/master/images/2025-05-21-01.gif)
+
+## 课后作业
-- 
Gitee


From 991b476e220cfec08953eaa22edbfc2a7e084a20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=94=A1=E7=8E=AE=E9=93=AD?= <2373854303@qq.com>
Date: Sun, 25 May 2025 13:54:11 +0800
Subject: [PATCH 4/5] =?UTF-8?q?=E6=8F=90=E4=BA=A4523=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...03\345\211\215\345\244\215\344\271\240.md" | 660 ++++++++++++++++++
 1 file changed, 660 insertions(+)
 create mode 100644 "\350\224\241\347\216\256\351\223\255/20250523 \350\200\203\345\211\215\345\244\215\344\271\240.md"

diff --git "a/\350\224\241\347\216\256\351\223\255/20250523 \350\200\203\345\211\215\345\244\215\344\271\240.md" "b/\350\224\241\347\216\256\351\223\255/20250523 \350\200\203\345\211\215\345\244\215\344\271\240.md"
new file mode 100644
index 0000000..1ed6ef1
--- /dev/null
+++ "b/\350\224\241\347\216\256\351\223\255/20250523 \350\200\203\345\211\215\345\244\215\344\271\240.md"	
@@ -0,0 +1,660 @@
+# 考前复习
+
+## 课堂笔记
+
+### 继续重写 VueJs 前后端分离项目
+
+#### 一、前后端项目构建
+
+##### 1. 构建项目结构：
+
+![](https://gitee.com/hyo-ja/picture-warehouse/raw/master/images/20250519110052.png)
+
+##### 2. 构建项目：
+
+###### 后端
+
+1. 项目初始化：
+
+```bash
+npm init -y
+```
+
+2. 安装依赖包：
+
+```bash
+npm i
+```
+
+###### 前端
+
+1. 项目初始化：
+
+```bash
+yarn create vue
+```
+
+2. 安装依赖包：
+
+```bash
+yarn
+```
+
+3. 代码格式化：
+
+```bash
+yarn format
+```
+
+#### 二、代码编写
+
+##### 后端
+
+**app.js**
+
+```js
+// 导入依赖包
+import koa from "koa";
+import cors from "@koa/cors";
+import bodyparser from "koa-bodyparser";
+import Router from "koa-router";
+import { Op, Sequelize, DataTypes } from "sequelize"
+
+// 创建 sequelize 实例
+const sequelize = new Sequelize('test', 'root', '123456', {
+    dialect: "mysql"
+})
+
+// 创建模型
+const Student = sequelize.define('students', {
+    // 学生姓名
+    studentName: {
+        type: DataTypes.STRING
+    },
+    // 学生性别
+    studentSex: {
+        type: DataTypes.STRING
+    },
+    // 学生年龄
+    studentAge: {
+        type: DataTypes.INTEGER
+    },
+    // 所在班级
+    className: {
+        type: DataTypes.STRING
+    }
+})
+
+// 同步数据库
+// sequelize.sync();
+
+// 插入数据
+
+await Student.create({
+    // 学生姓名
+    studentName: "张三",
+    // 学生性别
+    studentSex: "男",
+    // 学生年龄
+    studentAge: 18,
+    // 所在班级
+    className: "222班级"
+})
+
+// 创建 koa 实例
+const app = new koa();
+
+// 解决跨域问题
+app.use(cors());
+
+// 请求体解析
+app.use(bodyparser());
+
+// 创建路由实例
+const router = new Router();
+
+/** 路由方法 */
+// 查询所有学生
+router.get('/students', async (ctx, netx) => {
+    // 查询关键词
+    const keyWord = ctx.query.keyWord;
+
+    // 条件对象
+    let where;
+
+    if (keyWord) {
+        where = {
+            [Op.or]: {
+                // 学生姓名
+                studentName: {
+                    [Op.like]: `%${keyWord}%`
+                },
+                // 学生性别
+                studentSex: {
+                    [Op.like]: `%${keyWord}%`
+                },
+                // 学生年龄
+                studentAge: {
+                    [Op.eq]: keyWord
+                },
+                // 所在班级
+                className: {
+                    [Op.like]: `%${keyWord}%`
+                }
+            }
+        }
+    } else {
+        where = null;
+    }
+
+    // 查询数据库
+    const students = await Student.findAll({ where })
+
+    // 成功状态码
+    ctx.status = 200;
+
+    // 响应内容
+    ctx.body = {
+        code: 200,
+        data: students,
+        msg: "查询成功"
+    }
+})
+
+// 查询一个学生
+router.get('/students/:id', async (ctx, netx) => {
+    // 查询关键词
+    const keyWord = ctx.query.keyWord;
+
+    // 获取 id
+    const id = ctx.params.id
+
+    // 查询学生
+    const student = await Student.findByPk(id)
+
+    // 成功状态码
+    ctx.status = 200;
+
+    // 响应内容
+    ctx.body = {
+        code: 200,
+        data: student,
+        msg: "查询成功"
+    }
+})
+
+// 新增一个学生
+router.post('/students', async (ctx, netx) => {
+    // 获取学生对象
+    const obj = ctx.request.body;
+
+    // 新增学生
+    await Student.create(obj)
+
+    // 成功状态码
+    ctx.status = 200;
+
+    // 响应内容
+    ctx.body = {
+        code: 200,
+        data: null,
+        msg: "新增成功"
+    }
+})
+
+// 修改一个学生
+router.put('/students/:id', async (ctx, netx) => {
+    // 获取 id
+    const id = ctx.params.id
+
+    // 获取学生对象
+    const obj = ctx.request.body;
+
+    // 修改学生
+    await Student.update(obj, { where: { id } })
+
+    // 成功状态码
+    ctx.status = 200;
+
+    // 响应内容
+    ctx.body = {
+        code: 200,
+        data: null,
+        msg: "修改成功"
+    }
+})
+
+// 删除一个学生
+router.delete('/students/:id', async (ctx, netx) => {
+    // 获取 id
+    const id = ctx.params.id
+
+    // 删除学生
+    await Student.destroy({ where: { id } })
+
+    // 成功状态码
+    ctx.status = 200;
+
+    // 响应内容
+    ctx.body = {
+        code: 200,
+        data: null,
+        msg: "删除成功"
+    }
+})
+
+// 注册路由
+app.use(router.routes())
+
+// 服务端口
+const appPort = 8000;
+
+// 监听端口
+app.listen(appPort);
+
+console.log(`当前服务运行在：http://localhost:${appPort}`);
+```
+
+##### 前端
+
+**router.js**
+
+```js
+import { createRouter, createWebHistory } from 'vue-router'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      meta: { title: "学生列表" },
+      component: () => import("@/views/Home.vue"),
+    },
+    {
+      path: '/addStudent',
+      name: 'addStudent',
+      meta: { title: "新增学生" },
+      component: () => import("@/views/AddStudent.vue"),
+    },
+    {
+      path: '/updateStudent/:id',
+      name: 'updateStudent',
+      meta: { title: "修改学生" },
+      component: () => import("@/views/UpdateStudent.vue"),
+    },
+  ],
+})
+
+// 全局守卫
+router.beforeEach((to, from, next) => {
+  if (to.meta.title) {
+    document.title = to.meta.title
+  }
+  next()
+})
+
+export default router
+```
+
+**App.vue**
+
+```vue
+<script setup>
+import { RouterLink, RouterView } from 'vue-router'
+</script>
+
+<template>
+  <RouterView />
+</template>
+
+<style>
+*,
+body,
+html {
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  text-align: center;
+}
+
+#app {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+}
+
+table {
+  border-spacing: 0;
+  background-color: brown;
+  color: #fff;
+}
+
+tr,
+th,
+td {
+  padding: 20px 40px;
+  border: 1px rgb(233, 151, 151) solid;
+}
+
+input {
+  border-radius: 5px;
+  background-color: brown;
+  color: #fff;
+  outline: none;
+  border: 1px rgb(233, 151, 151) solid;
+  padding: 5px 10px;
+  margin: 2px;
+}
+
+input::placeholder {
+  color: rgb(233, 151, 151);
+}
+
+input:hover {
+  transition: all 1s;
+  background-color: #fff;
+  color: brown;
+  border: 1px rgba(223, 91, 91, 0.719) solid;
+}
+
+h1 {
+  padding: 10px;
+  color: brown;
+}
+</style>
+```
+
+**Home.vue**
+
+```vue
+<template>
+    <div class="content">
+        <div>
+            <h1>学生信息管理系统</h1>
+            <form>
+                <input type="button" value="新增" @click="$router.push('/addStudent')" />
+                <input type="text" placeholder="请输入关键词" v-model="keyWord" />
+                <input type="button" value="查询" @click="query" />
+            </form>
+        </div>
+
+        <div>
+            <table>
+                <thead>
+                    <tr>
+                        <th>学生编号</th>
+                        <th>学生姓名</th>
+                        <th>性别</th>
+                        <th>年龄</th>
+                        <th>所在班级</th>
+                        <th>操作</th>
+                    </tr>
+                </thead>
+
+                <tbody v-if="students && students.length">
+                    <tr v-for="student in students" :key="student.id">
+                        <td>{{ student.id }}</td>
+                        <td>{{ student.studentName }}</td>
+                        <td>{{ student.studentSex }}</td>
+                        <td>{{ student.studentAge }}</td>
+                        <td>{{ student.className }}</td>
+                        <td>
+                            <input type="button" value="修改" @click="$router.push(`/updateStudent/${student.id}`)" />
+                            <input type="button" value="删除" @click="del(student.id)" />
+                        </td>
+                    </tr>
+                </tbody>
+
+                <tbody v-else>
+                    <tr>
+                        <td colspan="7">暂无数据</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</template>
+
+<script setup>
+// 引用 api
+import { ref, onMounted } from "vue"
+import { useRouter, useRoute } from "vue-router"
+import axios from "axios"
+
+// 后端 api
+const api = 'http://localhost:8000/students';
+
+// 学生列表
+const students = ref([])
+
+// 周期函数
+onMounted(async () => {
+    // 查询请求
+    const data = await axios.get(api)
+
+    // 获取学生列表
+    if (data.data.code === 200) {
+        students.value = data.data.data
+    }
+})
+
+// 关键词
+const keyWord = ref('')
+
+// 搜索关键词
+async function query() {
+    // 请求
+    const data = await axios.get(`${api}?keyWord=${keyWord.value}`)
+
+    if (data.data.code === 200) {
+        students.value = data.data.data
+    }
+}
+
+// 删除
+async function del(id) {
+    if (confirm("确认删除?")) {
+        // 删除请求
+        const data = await axios.delete(`${api}/${id}`)
+        if (data.data.code === 200) {
+            const index = students.value.findIndex(item => item.id === id);
+            // 删除元素
+            students.value.splice(index, 1)
+        }
+    }
+}
+
+</script>
+
+<style scoped>
+.content div:first-child {
+    padding: 10px;
+}
+</style>
+```
+
+**AddTeacher.vue**
+
+```vue
+<template>
+    <div>
+        <h1>新增学生</h1>
+        <form>
+            <table>
+                <thead>
+                    <tr>
+                        <th>姓名：</th>
+                        <th> <input type="text" v-model.trim="student.studentName" /></th>
+                    </tr>
+                    <tr>
+                        <th>年龄：</th>
+                        <th> <input type="text" v-model.trim="student.studentAge" /></th>
+                    </tr>
+                    <tr>
+                        <th>性别：</th>
+                        <th><input type="text" v-model.trim="student.studentSex" /></th>
+                    </tr>
+                    <tr>
+                        <th>所在班级：</th>
+                        <th><input type="text" v-model.trim="student.className" /></th>
+                    </tr>
+                    <tr>
+                        <th colspan="2">
+                            <input type="reset" value="清空">
+                            <input type="button" value="新增" @click="add">
+                            <input type="button" value="取消" @click="$router.push('/')">
+                        </th>
+                    </tr>
+                </thead>
+            </table>
+        </form>
+    </div>
+</template>
+
+<script setup>
+// 引用 api
+import { ref, onMounted } from "vue"
+import { useRouter, useRoute } from "vue-router"
+import axios from "axios"
+
+const router = useRouter();
+
+// 后端 api
+const api = 'http://localhost:8000/students';
+
+// 学生对象
+const student = ref({
+    // 学生姓名
+    studentName: '',
+    // 学生性别
+    studentSex: '',
+    // 学生年龄
+    studentAge: '',
+    // 所在班级
+    className: ''
+})
+
+// 新增
+async function add() {
+    // 判断输入框是否都有内容
+    for (const key in student.value) {
+        if (student.value[key] === '') {
+            return
+        }
+    }
+
+    // 新增请求
+    const data = await axios.post(`${api}`, student.value)
+    if (data.data.code === 200) {
+        router.push('/')
+    }
+}
+
+</script>
+```
+
+**updateTeacher.vue**
+
+```vue
+<template>
+    <div>
+        <h1>修改学生</h1>
+        <form>
+            <table>
+                <thead>
+                    <tr>
+                        <th>姓名：</th>
+                        <th> <input type="text" v-model.trim="student.studentName" /></th>
+                    </tr>
+                    <tr>
+                        <th>年龄：</th>
+                        <th> <input type="text" v-model.trim="student.studentAge" /></th>
+                    </tr>
+                    <tr>
+                        <th>性别：</th>
+                        <th><input type="text" v-model.trim="student.studentSex" /></th>
+                    </tr>
+                    <tr>
+                        <th>所在班级：</th>
+                        <th><input type="text" v-model.trim="student.className" /></th>
+                    </tr>
+                    <tr>
+                        <th colspan="2">
+                            <input type="button" value="保存" @click="save">
+                            <input type="button" value="取消" @click="$router.push('/')">
+                        </th>
+                    </tr>
+                </thead>
+            </table>
+        </form>
+    </div>
+</template>
+
+<script setup>
+// 引用 api
+import { ref, onMounted } from "vue"
+import { useRouter, useRoute } from "vue-router"
+import axios from "axios"
+
+const router = useRouter();
+const route = useRoute();
+
+// 周期函数
+onMounted(async () => {
+    // 查询请求
+    const data = await axios.get(`${api}/${route.params.id}`)
+
+    // 获取学生对象
+    if (data.data.code === 200) {
+        student.value = data.data.data
+    }
+})
+
+
+// 后端 api
+const api = 'http://localhost:8000/students';
+
+// 学生对象
+const student = ref({
+    // 学生姓名
+    studentName: '',
+    // 学生性别
+    studentSex: '',
+    // 学生年龄
+    studentAge: '',
+    // 所在班级
+    className: ''
+})
+
+// 新增
+async function save() {
+    // 判断输入框是否都有内容
+    for (const key in student.value) {
+        if (student.value[key] === '') {
+            return
+        }
+    }
+
+    // 修改请求
+    const data = await axios.put(`${api}/${route.params.id}`, student.value)
+    if (data.data.code === 200) {
+        router.push('/')
+    }
+}
+
+</script>
+```
+
+#### 三、效果演示
+
+##### [项目预览](https://gitee.com/hyo-ja/vuejs-frontend-backend-separation-projects)
+
+##### 效果预览
+
+![](https://gitee.com/hyo-ja/picture-warehouse/raw/master/images/2025-05-21-01.gif)
+
+## 课后作业
-- 
Gitee


From 50f3b102628cec050e5f3da555ab3bfcfc39b7e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=94=A1=E7=8E=AE=E9=93=AD?= <2373854303@qq.com>
Date: Mon, 26 May 2025 23:36:46 +0800
Subject: [PATCH 5/5] =?UTF-8?q?=E6=8F=90=E4=BA=A4526=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...15\345\212\241\351\241\271\347\233\256.md" | 632 ++++++++++++++++++
 1 file changed, 632 insertions(+)
 create mode 100644 "\350\224\241\347\216\256\351\223\255/20250526 \345\256\214\345\226\204\345\244\247\345\255\246\347\224\237\345\277\227\346\204\277\350\200\205\346\234\215\345\212\241\351\241\271\347\233\256.md"

diff --git "a/\350\224\241\347\216\256\351\223\255/20250526 \345\256\214\345\226\204\345\244\247\345\255\246\347\224\237\345\277\227\346\204\277\350\200\205\346\234\215\345\212\241\351\241\271\347\233\256.md" "b/\350\224\241\347\216\256\351\223\255/20250526 \345\256\214\345\226\204\345\244\247\345\255\246\347\224\237\345\277\227\346\204\277\350\200\205\346\234\215\345\212\241\351\241\271\347\233\256.md"
new file mode 100644
index 0000000..c8c0564
--- /dev/null
+++ "b/\350\224\241\347\216\256\351\223\255/20250526 \345\256\214\345\226\204\345\244\247\345\255\246\347\224\237\345\277\227\346\204\277\350\200\205\346\234\215\345\212\241\351\241\271\347\233\256.md"	
@@ -0,0 +1,632 @@
+# 完善大学生志愿者服务项目
+
+## 课堂笔记
+
+### 完善大学生志愿者服务项目
+
+#### 一、构建项目结构：
+
+![](https://gitee.com/hyo-ja/picture-warehouse/raw/master/images/202505262334906.png)
+
+#### 二、代码编写：
+
+**Home.vue**
+
+```vue
+<!-- 首页 -->
+<template>
+  <div class="content">
+    <div class="top">
+      <div class="title"><span>大学生志愿者活动</span></div>
+
+      <div class="upWard">
+        <div class="profile">
+          <div>
+            <img src="../assets/images/用户头像.svg" />
+            <span>李华</span>
+          </div>
+          <div @click="$router.push('/Profile')">
+            <img src="../assets/images/右箭头.svg" />
+          </div>
+        </div>
+
+        <div class="nav">
+          <div @click="$router.push('/ActivityList')">
+            <img src="../assets/images/活动.svg" />
+            <span>认领活动</span>
+          </div>
+
+          <div @click="$router.push('/PointsRanking')">
+            <img src="../assets/images/报表.svg" />
+            <span>爱心报表</span>
+          </div>
+
+          <div @click="$router.push('/ServiceRecordUpload')">
+            <img src="../assets/images/服务纪实.svg" />
+            <span>服务纪实</span>
+          </div>
+
+          <div @click="$router.push('/ServiceRecordList')">
+            <img src="../assets/images/我的服务.svg" />
+            <span>我的服务</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="center">
+      <div class="more">
+        <div><span>志愿活动</span></div>
+        <div @click="$router.push('/ActivityList')">
+          <span>查看更多</span><img src="../assets/images/右箭头.svg" />
+        </div>
+      </div>
+
+      <div class="list">
+        <ul>
+          <li>
+            <div>
+              <img src="../assets/images/内容.svg" />
+              <span>进行中</span>
+            </div>
+            <div>
+              <span>运动会志愿者招募</span>
+              <p>2022-12-20 08:00 至 2022-12-22 04:30</p>
+              <span>本人所在学校</span>
+            </div>
+          </li>
+
+          <li>
+            <div>
+              <img src="../assets/images/内容.svg" />
+              <span>进行中</span>
+            </div>
+            <div>
+              <span>运动会志愿者招募</span>
+              <p>2022-12-20 08:00 至 2022-12-22 04:30</p>
+              <span>本人所在学校</span>
+            </div>
+          </li>
+
+          <li>
+            <div>
+              <img src="../assets/images/内容.svg" />
+              <span>进行中</span>
+            </div>
+            <div>
+              <span>运动会志愿者招募</span>
+              <p>2022-12-20 08:00 至 2022-12-22 04:30</p>
+              <span>本人所在学校</span>
+            </div>
+          </li>
+
+          <li>
+            <div>
+              <img src="../assets/images/内容.svg" />
+              <span>进行中</span>
+            </div>
+            <div>
+              <span>运动会志愿者招募</span>
+              <p>2022-12-20 08:00 至 2022-12-22 04:30</p>
+              <span>本人所在学校</span>
+            </div>
+          </li>
+
+          <li>
+            <div>
+              <img src="../assets/images/内容.svg" />
+              <span>进行中</span>
+            </div>
+            <div>
+              <span>运动会志愿者招募</span>
+              <p>2022-12-20 08:00 至 2022-12-22 04:30</p>
+              <span>本人所在学校</span>
+            </div>
+          </li>
+
+          <li>
+            <div>
+              <img src="../assets/images/内容.svg" />
+              <span>进行中</span>
+            </div>
+            <div>
+              <span>运动会志愿者招募</span>
+              <p>2022-12-20 08:00 至 2022-12-22 04:30</p>
+              <span>本人所在学校</span>
+            </div>
+          </li>
+
+          <li>
+            <div>
+              <img src="../assets/images/内容.svg" />
+              <span>进行中</span>
+            </div>
+            <div>
+              <span>运动会志愿者招募</span>
+              <p>2022-12-20 08:00 至 2022-12-22 04:30</p>
+              <span>本人所在学校</span>
+            </div>
+          </li>
+
+          <li>
+            <div>
+              <img src="../assets/images/内容.svg" />
+              <span>进行中</span>
+            </div>
+            <div>
+              <span>运动会志愿者招募</span>
+              <p>2022-12-20 08:00 至 2022-12-22 04:30</p>
+              <span>本人所在学校</span>
+            </div>
+          </li>
+
+          <li>
+            <div>
+              <img src="../assets/images/内容.svg" />
+              <span>进行中</span>
+            </div>
+            <div>
+              <span>运动会志愿者招募</span>
+              <p>2022-12-20 08:00 至 2022-12-22 04:30</p>
+              <span>本人所在学校</span>
+            </div>
+          </li>
+
+          <li>
+            <div>
+              <img src="../assets/images/内容.svg" />
+              <span>进行中</span>
+            </div>
+            <div>
+              <span>运动会志愿者招募</span>
+              <p>2022-12-20 08:00 至 2022-12-22 04:30</p>
+              <span>本人所在学校</span>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  display: flex;
+  flex-direction: column;
+  width: 100vw;
+}
+
+.top {
+  height: 30%;
+}
+
+.top .title {
+  color: #fff;
+  background-color: darkslategrey;
+  width: 100%;
+  font-size: 1.25rem;
+  text-align: center;
+  padding-bottom: 2.5rem;
+}
+
+.top .title span {
+  display: block;
+  padding: 1rem;
+}
+
+.top .profile {
+  border-radius: 10px;
+  margin: 0 0.63rem 1rem 0.63rem;
+  padding: 0.63rem;
+  font-size: 1.13rem;
+  background-color: #fff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #333;
+}
+
+.profile div:first-child img {
+  background-color: #333;
+  border-radius: 50%;
+  padding: 0.31rem;
+  width: 3.125rem;
+  height: 3.125rem;
+}
+
+.profile div:first-child {
+  display: flex;
+  align-items: center;
+}
+
+.profile div:last-child {
+  font-size: 1.25rem;
+}
+
+.profile div:last-child img {
+  border-radius: 50%;
+  padding: 0.31rem;
+  width: 1.56rem;
+  height: 1.56rem;
+}
+
+.profile span {
+  display: block;
+  padding: 0.63rem;
+}
+
+.top .upWard {
+  margin-top: -2.5rem;
+}
+
+.nav {
+  border-radius: 10px;
+  margin: 1rem 0.63rem 1rem 0.63rem;
+  font-size: 1.13rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  background-color: #fff;
+  color: #333;
+}
+
+.nav img {
+  width: 3.125rem;
+  margin: 0 auto;
+}
+
+.nav div {
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  padding: 0.63rem;
+}
+
+.center {
+  height: 70%;
+  flex-direction: column;
+  font-size: 1.13rem;
+  background-color: #fff;
+  padding: 1.26rem;
+}
+
+.center .more {
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: 0.63rem;
+}
+
+.center .more div:last-child {
+  color: #7b7676;
+  display: flex;
+  align-items: center;
+}
+
+.center .more img {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.center .list {
+  height: 100%;
+  overflow-y: scroll;
+}
+
+.center .list img {
+  width: 100%;
+  height: 5rem;
+}
+
+.center .list li {
+  list-style: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0.625rem auto;
+}
+
+.center .list li:first-child {
+  margin: 0 0 0.625rem 0;
+}
+
+.center .list li:last-child {
+  margin: 0.625rem 0 0 0;
+}
+
+.center .list li div:first-child {
+  display: flex;
+  flex-direction: column;
+  padding-right: 0.3125rem;
+}
+
+.center .list li div:first-child span {
+  margin-top: -1.03125rem;
+  color: #fff;
+  background-color: #666;
+  text-align: center;
+  width: 3.125rem;
+  font-size: 0.75rem;
+}
+
+.center.list li div:last-child span:first-child {
+  font-size: 1rem;
+  font-weight: bold;
+}
+
+.center .list li div:last-child p {
+  font-size: 0.75rem;
+}
+
+.center .list li div:last-child span:last-child {
+  font-size: 0.875rem;
+  border-radius: 10px;
+  background-color: #ccc;
+}
+</style>
+```
+
+**Profile.vue**
+
+```vue
+<!-- 个人信息 -->
+<template>
+  <div class="profile">
+    <form>
+      <table>
+        <tbody>
+          <tr>
+            <td colspan="2">
+              <span>个人信息</span>
+            </td>
+          </tr>
+          <tr>
+            <td>* 姓名</td>
+            <td>
+              <input type="text" />
+            </td>
+          </tr>
+
+          <tr>
+            <td>* 编号</td>
+            <td>
+              <input type="text" />
+            </td>
+          </tr>
+
+          <tr>
+            <td>* 性别</td>
+            <td>
+              <input type="radio" name="sex" value="男" />男
+              <input type="radio" name="sex" value="女" />女
+            </td>
+          </tr>
+
+          <tr>
+            <td>* 手机号</td>
+            <td>
+              <input type="text" />
+            </td>
+          </tr>
+
+          <tr>
+            <td>* 学校</td>
+            <td>
+              <input type="text" />
+            </td>
+          </tr>
+
+          <tr>
+            <td>* 专业</td>
+            <td>
+              <input type="text" />
+            </td>
+          </tr>
+
+          <tr>
+            <td>* 人员属性</td>
+            <td class="personnel">
+              <input type="button" value="群众" />
+              <input type="button" value="团员" />
+              <input type="button" value="党员" />
+            </td>
+          </tr>
+
+          <tr>
+            <td colspan="2">
+              <input type="button" value="提交" />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </form>
+  </div>
+</template>
+
+<style scoped>
+.profile {
+  width: 100vw;
+  margin: 0.9375rem 0.75rem;
+}
+
+form {
+  border-radius: 10px;
+  font-size: 1rem;
+  padding: 0.9375rem 0.625rem;
+  background-color: #fff;
+}
+
+form span {
+  font-size: 1.125rem;
+}
+
+table {
+  border-spacing: 0;
+  width: 100%;
+}
+
+td {
+  border-bottom: 1px #ccc dashed;
+  padding: 0.625rem;
+}
+
+.personnel input {
+  border-radius: 10px;
+  margin: 0 0.3125rem 0 0.3125rem;
+  padding: 0.3125rem 0.625rem;
+}
+
+.personnel {
+  padding-left: 0;
+}
+
+tr:last-child td,
+tr:first-child td,
+input {
+  border: 0;
+}
+
+tr:last-child td {
+  text-align: center;
+}
+
+input[type="text"] {
+  width: 100%;
+}
+
+input[type="radio"] {
+  margin: 0.3125rem;
+}
+
+tr:last-child td input {
+  margin: 0.9375rem 0 0 0;
+  border: 0;
+  border-radius: 10px;
+  color: #fff;
+  background-color: rgb(70, 121, 121);
+  padding: 0.375rem;
+  width: 90%;
+}
+
+tr:last-child td input:hover {
+  transition: all 0.5s;
+  background-color: rgb(37, 97, 97);
+}
+
+tbody {
+  width: 100%;
+}
+
+input {
+  outline: none;
+}
+</style>
+
+<script setup></script>
+```
+
+**App.vue**
+
+```vue
+<script setup>
+// 引用 api
+import { RouterLink, RouterView } from "vue-router";
+</script>
+
+<template>
+  <RouterView></RouterView>
+</template>
+
+<style>
+*,
+body,
+html {
+  padding: 0;
+  margin: 0;
+}
+
+#app {
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  height: 100vh;
+  background-color: #ccc;
+}
+</style>
+```
+
+**routes.js**
+
+```js
+export const routes = [
+  {
+    path: "/",
+    name: "home",
+    meta: { title: "大学生志愿者活动" },
+    component: () => import("@/views/Home.vue"),
+  },
+  {
+    path: "/ActivityList",
+    name: "ActivityList",
+    meta: { title: "活动列表" },
+    component: () => import("@/views/ActivityList.vue"),
+  },
+  {
+    path: "/ActivityListDetails",
+    name: "ActivityListDetails",
+    meta: { title: "活动详情" },
+    component: () => import("@/views/ActivityListDetails.vue"),
+  },
+  {
+    path: "/MyRegistration",
+    name: "MyRegistration",
+    meta: { title: "我的报名" },
+    component: () => import("@/views/MyRegistration.vue"),
+  },
+  {
+    path: "/PointsRanking",
+    name: "PointsRanking",
+    meta: { title: "积分排名" },
+    component: () => import("@/views/PointsRanking.vue"),
+  },
+  {
+    path: "/Profile",
+    name: "Profile",
+    meta: { title: "个人信息" },
+    component: () => import("@/views/Profile.vue"),
+  },
+  {
+    path: "/ServiceDetails",
+    name: "ServiceDetails",
+    meta: { title: "服务详情" },
+    component: () => import("@/views/ServiceDetails.vue"),
+  },
+  {
+    path: "/ServiceRecordList",
+    name: "ServiceRecordList",
+    meta: { title: "服务记录上传列表" },
+    component: () => import("@/views/ServiceRecordList.vue"),
+  },
+  {
+    path: "/ServiceRecordUpload",
+    name: "ServiceRecordUpload",
+    meta: { title: "服务记录上传" },
+    component: () => import("@/views/ServiceRecordUpload.vue"),
+  },
+];
+```
+
+#### 三、效果演示：
+
+##### [项目预览](https://gitee.com/hyo-ja/vue-js-framework/tree/master/20250526%20%E5%AE%8C%E5%96%84%E5%A4%A7%E5%AD%A6%E7%94%9F%E5%BF%97%E6%84%BF%E8%80%85%E6%9C%8D%E5%8A%A1%E9%A1%B9%E7%9B%AE/volunteer)
+
+##### 效果预览
+
+###### 首页
+
+![](https://gitee.com/hyo-ja/picture-warehouse/raw/master/images/202505262331779.png)
+
+###### 个人信息
+
+![](https://gitee.com/hyo-ja/picture-warehouse/raw/master/images/202505262332492.png)
+
+## 课后作业
-- 
Gitee