# Week 7：前后端分离实战

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

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

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

**启动方式**：
```bash
# 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 入门