前后端分离架构方案

文档编号： SYS-TR-AR-002
版本： 1.0
日期： 2026-03-10
编制： 系统架构师
审核： 审核通过 ✅

---

1. 方案背景

系统平台采用前后端分离架构，前端使用 Vue 3，后端使用 Spring Boot。需要确定前后端通信方式和协作模式。

---

2. 架构方案

2.1 整体架构

┌─────────────────────────────────────────────────────────────┐
│                         客户端层                             │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────┐  │
│  │   PC浏览器   │  │  移动端浏览器 │  │    桌面客户端        │  │
│  │  (Chrome)   │  │    (H5)     │  │   (Electron)        │  │
│  └──────┬──────┘  └──────┬──────┘  └──────────┬──────────┘  │
└─────────┼────────────────┼────────────────────┼─────────────┘
          │                │                    │
          └────────────────┼────────────────────┘
                           ▼
┌─────────────────────────────────────────────────────────────┐
│                      前端应用层                              │
│                   Vue 3 + Element Plus                      │
│              （路由、状态管理、组件化UI）                      │
└──────────────────────────┬──────────────────────────────────┘
                           │ HTTPS/RESTful API
                           ▼
┌─────────────────────────────────────────────────────────────┐
│                      网关层（Nginx）                          │
│         （反向代理、负载均衡、静态资源、SSL终止）              │
└──────────────────────────┬──────────────────────────────────┘
                           │
                           ▼
┌─────────────────────────────────────────────────────────────┐
│                      后端服务层                              │
│                  Spring Boot 3.x                            │
│         （Controller / Service / Repository）                │
└──────────────────────────┬──────────────────────────────────┘
                           │
           ┌───────────────┼───────────────┐
           ▼               ▼               ▼
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│   MySQL 8.0     │ │  Redis 7.x      │ │  外部系统接口    │
│   (业务数据)     │ │  (缓存/会话)    │ │  (ERP/CRM/OA)   │
└─────────────────┘ └─────────────────┘ └─────────────────┘

2.2 通信协议

协议选择：RESTful API + JSON

特性	说明
传输协议	HTTPS
数据格式	JSON
认证方式	JWT Token (Bearer)
接口规范	OpenAPI 3.0

---

3. 接口设计规范

3.1 URL规范

https://api.system.example.com/{version}/{module}/{resource}/{action}

示例：
GET    /api/v1/users              # 查询用户列表
GET    /api/v1/users/{id}         # 查询单个用户
POST   /api/v1/users              # 创建用户
PUT    /api/v1/users/{id}         # 更新用户
DELETE /api/v1/users/{id}         # 删除用户

3.2 请求响应格式

请求头：

Content-Type: application/json
Authorization: Bearer {jwt_token}
X-Request-ID: {uuid}

成功响应：

{
  "code": 200,
  "message": "success",
  "data": {
    "id": 1,
    "username": "admin",
    "email": "admin@example.com"
  },
  "timestamp": 1700000000000
}

分页响应：

{
  "code": 200,
  "message": "success",
  "data": {
    "list": [...],
    "pagination": {
      "page": 1,
      "size": 10,
      "total": 100,
      "pages": 10
    }
  }
}

错误响应：

{
  "code": 400,
  "message": "参数校验失败",
  "data": null,
  "errors": [
    {"field": "username", "message": "用户名不能为空"}
  ]
}

---

4. 安全方案

4.1 认证流程

┌─────────┐                    ┌─────────────┐                    ┌──────────┐
│  前端   │ ──(1) 登录请求────> │  后端服务    │ ──(2) 验证密码───> │  数据库   │
│ (Vue)   │                    │(SpringBoot) │                    │ (MySQL)  │
└─────────┘                    └─────────────┘                    └──────────┘
     │                               │                                │
     │                               │<────────(3) 返回用户信息───────│
     │                               │
     │<────────(4) 返回JWT Token────│
     │                               │
     │ ──(5) 携带Token访问API──────>│
     │                               │
     │<────────(6) 返回数据─────────│

4.2 安全措施

措施	说明
HTTPS	全站HTTPS加密传输
JWT	无状态认证，Token过期时间30分钟
CORS	配置跨域白名单
CSRF	使用JWT天然防御CSRF
XSS	前端转义，后端过滤
限流	接口级别限流保护

---

5. 开发协作

5.1 开发流程

1. 前后端约定接口（Swagger/OpenAPI）
         ↓
2. 后端提供Mock数据
         ↓
3. 前端并行开发
         ↓
4. 后端实现接口
         ↓
5. 前后端联调
         ↓
6. 集成测试

5.2 Mock方案

使用 Mock.js 或后端提供 Mock 接口，前端可独立开发。

---

6. 性能优化

6.1 前端优化

优化项	方案
代码分割	Vite 按需加载
组件懒加载	Vue Router lazy load
缓存策略	HTTP缓存 + LocalStorage
图片优化	WebP格式 + 懒加载
压缩	Gzip/Brotli

6.2 后端优化

优化项	方案
数据库	索引优化 + 连接池
缓存	Redis热点数据缓存
接口	分页 + 字段筛选
压缩	Response Gzip

---

7. 下一步行动

1. [ ] 定义API接口规范文档
2. [ ] 搭建Mock服务
3. [ ] 配置CORS和HTTPS
4. [ ] 实现JWT认证过滤器
5. [ ] 统一异常处理

---

文档版本历史

版本	日期	修改内容	修改人
1.0	2026-03-10	初始版本	系统架构师