前后端分离架构实战培训课程大纲
一、培训对象
1. 前端开发者：熟悉HTML/CSS/JavaScript，希望掌握独立开发前端应用的能力。
2. 后端开发者：具备基础API开发经验，需理解前后端协作模式与接口规范。
3. 全栈工程师：希望系统学习前后端分离架构设计、接口联调与部署全流程。
4. 技术管理者/架构师：了解分离架构的优缺点，优化团队开发流程与项目结构。
二、培训目标
1. 技术能力：
· 前端：熟练使用React/Vue/Angular构建独立应用，掌握状态管理（Redux/Pinia）与路由。
· 后端：基于ASP.NET Core/Spring Boot/Node.js开发RESTful API，理解接口设计规范。
2. 协作能力：
· 掌握前后端联调流程（接口文档、Mock数据、跨域处理）。
· 使用Swagger/OpenAPI、Postman等工具提升协作效率。
3. 架构能力：
· 设计分层架构（前端SPA/MPA + 后端微服务），实现代码解耦。
· 理解JWT认证、CORS、WebSocket等关键技术点。
4. 部署能力：
· 前端：Nginx静态资源部署、CDN加速。
· 后端：Docker容器化、K8s集群管理（可选）。
三、培训内容与案例说明
模块1：前后端分离架构基础
内容：
· 架构概述：
· 传统架构 vs 分离架构的对比（耦合性、开发效率、可维护性）。
· 核心组件：前端应用、API网关、后端服务、数据库。
· 通信协议：
· HTTP/HTTPS基础（请求方法、状态码、Header）。
· RESTful设计原则（资源定位、无状态通信）。
· 工具链：
· 前端：Vue 3/React 18 + Vite/Create React App。
· 后端：ASP.NET Core Web API/Spring Boot。
· 协作：Swagger UI、Postman、Mock.js。
案例：
搭建一个简单的博客系统，前端使用Vue 3展示文章列表，后端通过ASP.NET Core提供GET /api/posts接口，使用Swagger生成文档。
模块2：前端独立开发与状态管理
内容：
· 前端工程化：
· 项目结构规范（组件、页面、工具函数分离）。
· 包管理（npm/yarn/pnpm）与自动化构建（Webpack/Vite）。
· 状态管理：
· 局部状态（Vuex/Pinia/Redux）与全局状态（如用户登录信息）。
· 异步请求封装（Axios拦截器、错误处理）。
· 路由与权限：
· 动态路由（根据用户角色加载菜单）。
· 路由守卫（未登录跳转至登录页）。
案例：
开发一个电商前端应用，实现：
1. 商品列表页（分页、筛选）。
2. 购物车功能（本地存储+与后端API同步）。
3. 用户登录后动态加载“个人中心”菜单。
模块3：后端API开发与安全
内容：
· API设计规范：
· 版本控制（路径/Header版本化）。
· 响应格式统一（{ code: 200, data: {}, message: "" }）。
· 数据库集成：
· EF Core/Django ORM/Sequelize实现CRUD。
· 复杂查询优化（索引、分页、缓存）。
· 安全防护：
· JWT认证（Token生成与验证）。
· 输入校验（防止SQL注入/XSS攻击）。
· 速率限制（防止DDoS攻击）。
案例：
开发用户管理API，包含：
1. 注册（密码哈希存储）。
2. 登录（返回JWT Token）。
3. 获取用户信息（需携带Token验证权限）。
4. 使用AutoMapper实现DTO与实体映射。
模块4：前后端联调与测试
内容：
· 联调流程：
· 接口文档对齐（Swagger/YAPI）。
· Mock数据（Postman Mock Server或前端本地模拟）。
· 跨域问题解决（CORS配置）。
· 测试策略：
· 前端：单元测试（Jest/Vitest）、E2E测试（Cypress）。
· 后端：API测试（Postman集合、xUnit/JUnit）。
· 性能测试（JMeter模拟高并发）。
案例：
联调订单创建流程：
1. 前端发送POST /api/orders请求（携带商品ID、数量）。
2. 后端校验库存、生成订单，返回订单号。
3. 前端跳转至订单详情页，展示后端返回数据。
模块5：部署与监控
内容：
· 前端部署：
· Nginx配置静态资源（gzip压缩、缓存策略）。
· CDN加速（图片、JS/CSS文件分发）。
· 后端部署：
· Docker容器化（编写Dockerfile）。
· K8s集群管理（可选，负载均衡与自动扩缩容）。
· 监控与日志：
· 前端：Sentry错误监控。
· 后端：ELK日志分析、Prometheus+Grafana监控API响应时间。
案例：
将电商系统部署至生产环境：
1. 前端打包后上传至CDN，通过Nginx反向代理。
2. 后端API部署到Docker容器，使用K8s管理多个副本。
3. 通过Grafana监控订单创建接口的QPS与错误率。
