📚 前后端分离实战 · 30章
Vue3 + SpringBoot
01
项目概述与环境准备
前后端分离概念 · 技术栈选型 · 安装Node/JDK/Maven/MySQL
02
前端项目初始化
Vite创建Vue3 · 目录结构 · Element Plus + Axios
03
后端项目初始化
Spring Initializr · 目录解析 · Maven依赖配置
04
数据库设计与创建
需求分析 · ER图 · 用户表/商品表SQL
05
实体类与Mapper层
User/Product实体 · MyBatis-Plus · 数据源配置
06
Service层与Controller层
接口实现 · RESTful CRUD · Postman测试
07
跨域问题解决
CORS后端配置 · Vite proxy代理
08
前端路由与页面框架
Vue Router · 路由表 · Layout布局
09
前端登录页面开发
Login.vue · 表单验证 · 调用登录接口 · Token存储
10
后端用户认证与JWT
Spring Security · JWT生成验证 · 认证过滤器
11
前端用户管理页面
Table展示 · 分页 · 搜索功能
12
后端用户管理接口
分页查询 · 条件搜索 · 状态修改
13
前端商品管理页面
商品列表 · 新增弹窗 · 编辑功能
14
后端商品管理接口
CRUD接口 · 图片上传(MinIO/本地)
15
前端图片上传组件
Upload封装 · 预览 · 上传进度条
16
前后端联调与调试
Axios拦截器 · 错误码处理 · Vue Devtools
17
前端状态管理(Pinia)
安装Pinia · 用户Store · 持久化
18
后端接口文档生成
Swagger/Knife4j · 配置 · 在线调试
19
前端权限控制
路由守卫 · v-permission指令 · 动态路由
20
后端权限管理
RBAC模型 · 角色权限表 · 拦截器
21
前端国际化(i18n)
vue-i18n · 语言包 · 切换功能
22
后端日志与异常处理
SLF4J日志 · @ControllerAdvice · 业务异常
23
前端性能优化
路由懒加载 · 按需加载 · 图片懒加载
24
后端性能优化
Redis缓存 · 索引优化 · 慢查询分析
25
前端单元测试
Vitest · 组件测试 · API调用测试
26
后端单元测试
JUnit5 + Mockito · Service/Controller测试
27
项目部署与CI/CD
npm build · mvn package · Docker · Nginx
28
ECharts数据可视化
仪表盘 · 用户增长曲线 · 商品销量柱状图
29
WebSocket实时消息推送
前端WebSocket · 后端配置 · 订单状态通知
30
项目总结与扩展
架构回顾 · 常见问题 · 微服务/分布式/移动端