gc-plan/week7/教案.md

Week 7：前后端分离实战

目标：将 Vue 3 前端与 Spring Boot 后端完整对接，交付前后端分离的学生管理系统 v3。

前置：完成 Week 5（Spring Boot 后端）和 Week 6（Vue 3 前端基础）。

本周产出：前后端分离的完整 SPA 应用，含登录注册、JWT 认证、CRUD、分页搜索、角色权限。

启动方式：

# 1. 启动后端（IDEA 中运行 Week7Application.java）
# 2. 启动前端
cd week7/frontend
npm install    # 首次运行
npm run dev    # http://localhost:5173

---

Day 1：前后端分离架构设计

知识点：

• 前后端分离 vs 单体架构：各自优劣
• 前端：Vite 开发服务器（5173）→ 用户浏览器渲染
• 后端：Spring Boot（8080）→ 只返回 JSON，不渲染 HTML
• 通信方式：HTTP + JSON，JWT 无状态认证
• Vite proxy：开发环境将 /api 请求代理到后端（解决跨域）
• 生产环境：Nginx 反向代理，统一域名/端口
• CORS（Cross-Origin Resource Sharing）：Spring Security 如何配置

动手 → 理解：

1. 阅读 vite.config.js 的 server.proxy 配置，理解代理原理
2. 阅读 SecurityConfig.java 的 corsConfigurationSource() Bean
3. 在 DevTools Network 面板查看：/api/students 请求的远程地址是 5173 还是 8080？
4. 对比 Week 5 的单体架构和 Week 7 的分离架构图
5. 把 Vite proxy 注释掉，观察跨域错误（CORS error）

核心文件：

• frontend/vite.config.js → server.proxy
• backend/.../config/SecurityConfig.java → CORS 配置
• frontend/src/api/http.js → Axios 实例

思考题：前后端分离的核心优势是什么？有什么代价（首次加载速度、SEO）？

---

Day 2：登录注册页面 + JWT 对接

知识点：

• 登录流程：表单输入 → Axios POST → 后端验证 → 返回 JWT → Pinia store 保存 → 跳转首页
• 注册流程：表单输入 → POST → 后端创建用户 → 返回 JWT → 自动登录
• Pinia Auth Store：token、username、role 状态管理
• localStorage：持久化 Token，页面刷新不丢失
• <router-link> vs 编程式导航 router.push()
• 导航守卫：router.beforeEach() 检查登录状态
• HTTP 拦截器：自动附加 Authorization: Bearer <token>

动手 → 理解：

1. 打开 DevTools → Application → Local Storage，观察 wk7_token、wk7_username、wk7_role
2. 在登录页输入错误密码，观察 Network 面板的 401 响应
3. 在 DevTools 中手动删除 Local Storage 的 token，刷新页面，观察跳转
4. 阅读 router/index.js 的 beforeEach 守卫逻辑
5. 注册一个新账号后，检查数据库中 users 表是否新增记录

核心文件：

• frontend/src/views/LoginView.vue — 登录页面
• frontend/src/views/RegisterView.vue — 注册页面
• frontend/src/stores/auth.js — 认证状态管理
• frontend/src/api/auth.js — 认证 API
• frontend/src/router/index.js — 导航守卫

思考题：为什么 Token 存在 localStorage 而不是 Pinia store 中？Pinia store 刷新后会丢失吗？

---

Day 3：CRUD 页面实现

知识点：

• 列表渲染：v-for + Axios GET 请求
• 新增/编辑弹窗：v-if 控制显示，表单双向绑定 v-model
• 表单校验：HTML5 原生校验 + 自定义 JS 校验
• 删除确认：confirm() + DELETE 请求
• 区分新增和编辑：根据是否传入 student 对象
• 角色权限：v-if="auth.isAdmin" 控制按钮显示
• 乐观更新 vs 悲观更新（操作后重新拉取数据）

动手 → 理解：

1. 用 admin 登录，点击"新增"，填写表单提交 → 观察 Network 面板 POST 请求
2. 点击"编辑"，修改成绩后保存 → 观察 PUT 请求的请求体
3. 点击"删除" → 确认后观察 DELETE 请求，刷新页面确认数据消失
4. 用 user 登录，观察"新增/编辑/删除"按钮是否隐藏
5. 用 user 登录，在浏览器控制台执行 fetch('/api/students', {method:'POST'}) 看 403

核心文件：

• frontend/src/views/StudentListView.vue — 列表 + 表格
• frontend/src/components/StudentForm.vue — 表单弹窗（props/emits）
• frontend/src/api/student.js — CRUD API 调用

思考题：为什么不直接在表格行内编辑，而是用弹窗？各自适用什么场景？

---

Day 4：分页、搜索、排序

知识点：

• 分页参数：page（0-based）、size（每页数量）
• 前端分页 vs 后端分页：数据量决定策略
• 分页组件：首页/上一页/页码/下一页/末页 + 省略号逻辑
• 搜索防抖：@keyup.enter 触发搜索（避免每次按键都请求）
• 排序：后端 ORDER BY 实现（MP LambdaQueryWrapper / JPA Sort）
• URL 状态同步：搜索关键词和页码是否反映在 URL 参数中

动手 → 理解：

1. 在搜索框输入"张"，按回车 → 观察请求 URL 中的 keyword 参数
2. 点击分页组件的"下一页" → 观察 page 参数变化
3. 打开 Pagination.vue，理解省略号（...）的生成逻辑
4. 修改后端 StudentMpService.list() 中的排序字段为 age → 观察列表顺序变化
5. 在 Network 面板中对比：搜索前后 total 数量的变化

核心文件：

• frontend/src/components/Pagination.vue — 分页组件
• frontend/src/views/StudentListView.vue → search() / goPage() 方法
• backend/.../service/mp/StudentMpService.java → LambdaQueryWrapper 排序

思考题：为什么页码从 0 开始（Spring Data Pageable），而不是从 1 开始？

---

Day 5：文件上传（头像）

知识点：

• 前端：<input type="file"> + FormData
• 后端：MultipartFile 接收文件
• Spring Boot 文件上传配置：spring.servlet.multipart.max-file-size
• 文件存储：本地目录 vs OSS（对象存储）
• 文件命名：UUID 避免冲突
• 文件访问：静态资源映射 addResourceHandlers()
• 预览：上传后在前端显示缩略图

动手 → 理解：

1. 在表单中增加 <input type="file"> 字段
2. 用 FormData 封装文件 + JSON 字段，POST 到后端
3. 检查后端 StudentController 中的 @RequestParam MultipartFile 处理
4. 上传一个图片后，浏览器直接访问上传后的 URL
5. 尝试上传超大文件（>10MB），观察 MaxUploadSizeExceededException

核心文件：

• frontend/src/components/StudentForm.vue → 文件输入
• backend/.../controller/StudentController.java → MultipartFile 处理
• backend/.../application.yml → multipart 配置

思考题：为什么不在数据库中存储文件二进制数据（BLOB），而是存储文件路径？

---

Day 6：交互体验完善

知识点：

• Loading 状态：数据加载中显示 spinner/骨架屏
• 错误状态：网络异常、后端报错时的用户提示
• 空状态：无数据时的友好占位
• 按钮 Loading：提交时禁用按钮 + 显示"保存中..."
• Toast 消息：操作成功/失败的轻提示
• 乐观更新：先更新 UI 再发请求（失败时回滚）
• 防抖（debounce）和节流（throttle）

动手 → 理解：

1. 强制停止后端，刷新前端页面 → 观察错误状态展示
2. 删除所有学生数据 → 观察空状态提示
3. 点击保存按钮时，快速双击 → 观察 loading 状态是否阻止了重复提交
4. 修改 StudentListView.vue 中的 loading 实现为骨架屏
5. 给搜索框加 300ms 的防抖

核心文件：

• frontend/src/views/StudentListView.vue → loading / error / empty 三种状态
• frontend/src/components/StudentForm.vue → formLoading 按钮状态

思考题：Loading、Empty、Error 三种状态分别应该在哪里处理（组件内 vs 全局）？

---

Day 7：前后端联调 & 部署概念

知识点：

• 前后端联调：同时启动两个项目，确认所有接口正常
• Vite build：生产环境构建 → 输出 dist/ 目录
• Nginx 部署：反向代理将前后端统一到 80 端口
• Nginx 配置示例：location /api { proxy_pass http://localhost:8080; } + location / { root dist/; }
• 环境变量：.env.development vs .env.production
• Docker 部署概念：前端容器 + 后端容器 + Nginx 容器
• 部署检查清单：数据库连接、Redis 连接、CORS 配置

动手 → 理解：

1. 运行 npm run build，观察生成的 dist/ 目录结构
2. 用 npx serve dist/ 预览生产构建
3. 用 Postman 测试后端所有 API 端点（GET/POST/PUT/DELETE + Token）
4. 画出完整的请求流程图：浏览器 → Nginx → 前端静态文件 / 后端 API
5. 阅读 Nginx 反向代理配置示例

核心概念：

           ┌─────────────┐
           │   浏览器      │
           │ localhost:80  │
           └──────┬───────┘
                  │
           ┌──────┴───────┐
           │   Nginx       │
           │   端口 80     │
           └──┬────────┬───┘
              │        │
     /        │        │  /api
              │        │
    ┌─────┴──┐  ┌─────┴─────┐
    │ dist/  │  │ Spring    │
    │ 静态   │  │ Boot:8080 │
    └────────┘  └───────────┘

思考题：Vite proxy 只用于开发环境，为什么生产环境要用 Nginx 而不是继续用 Vite proxy？

---

Week 7 总结

维度	Week 5（单体）	Week 6（纯前端）	Week 7（分离）
前端框架	原生 HTML/JS	Vue 3 独立	Vue 3 + 后端对接
页面路由	无	Vue Router	Vue Router + 导航守卫
状态管理	localStorage	Pinia 独立	Pinia + API 同步
认证	Login 页面（display 切换）	模拟登录	JWT 真实认证
数据	fetch 直连	无后端	Axios + 拦截器
部署	Spring Boot 单端口	Vite dev	前后端分端口 / Nginx

下一阶段：Week 8 — 工程化能力

• JUnit 5 + Mockito 单元测试
• Testcontainers 集成测试
• Knife4j API 文档
• Docker 容器化
• Git 工作流
• CI/CD 入门