技术架构
2026/3/20大约 4 分钟
技术架构
系统架构图
分层架构设计
1. 表现层 (Presentation Layer)
项目采用前后端分离架构，表现层分为两个独立的前端应用：
| 应用 | 技术栈 | 用途 |
|---|---|---|
| salted-fish-web | Vue3 + TypeScript + Ant Design Vue | PC 端管理后台 |
| salted-fish-mobile | Vue3 + JavaScript + Vant | 移动端 H5 应用 |
2. 接口层 (API Layer)
基于 Django REST Framework 构建 RESTful API：
- 认证方式：JWT (SimpleJWT)
- 跨域处理：django-cors-headers
- 数据序列化：DRF Serializers
- 请求过滤：django-filter
3. 业务逻辑层 (Business Layer)
Django 应用模块化设计：
SaltedFishApi/
├── Auth/ # 认证模块
├── User/ # 用户管理
├── Goods/ # 商品管理
├── publish_goods/ # 手动发布
└── AutoPublishGoods/ # 自动发布
SaltedFishMobileApi/
└── OutOrder/ # 移动端订单
4. 数据访问层 (Data Access Layer)
- ORM: Django ORM
- 数据库: MySQL (mysqlclient)
- 缓存: Redis (django-redis)
5. 任务调度层 (Task Scheduling Layer)
- 异步任务: Celery
- 定时任务: django-celery-beat
- 消息队列: Redis
- 结果存储: django-celery-results
技术选型理由
后端框架选择
| 技术 | 选择理由 |
|---|---|
| Django 4.2 | 成熟稳定、ORM 强大、生态丰富、开发效率高 |
| DRF | REST API 开发标准、序列化功能完善 |
| Celery | Python 异步任务标准方案、支持定时任务 |
| Redis | 高性能缓存、消息队列双重角色 |
| MySQL | 关系型数据库、事务支持、数据一致性 |
前端框架选择
| 技术 | 选择理由 |
|---|---|
| Vue 3 | 组合式 API、性能优化、TypeScript 支持好 |
| Vite | 快速冷启动、HMR 热更新、构建速度快 |
| Vben Admin | 企业级后台模板、功能完善、维护活跃 |
| Ant Design Vue | 企业级 UI 组件、设计规范统一 |
| Vant | 移动端组件库、轻量高效 |
| Pinia | Vue 3 官方状态管理、TypeScript 友好 |
通信机制
API 通信
前端 ──HTTP Request──> Django ──> DRF View ──> Serializer ──> 响应
│
▼
Django ORM
│
▼
MySQL
认证流程
1. 用户登录 ──> 后端验证 ──> 生成 JWT Token
2. 前端存储 Token (localStorage/Cookie)
3. 后续请求携带 Authorization: Bearer <token>
4. 后端验证 Token 有效性
5. Token 过期后刷新或重新登录
模块依赖关系
扩展性设计
水平扩展能力
- 无状态 API：JWT 认证支持分布式部署
- Celery Workers：可横向扩展 Worker 数量
- Redis 集群：支持缓存和消息队列的集群部署
- 数据库读写分离：Django 支持多数据库配置
模块化扩展
- Django App 插件化：新功能以独立 App 形式添加
- 前端 Monorepo：共享组件库，便于扩展
- API 版本控制：支持 URL 路径版本管理
安全设计
认证安全
- JWT Token 过期机制
- Token 黑名单 (logout 后失效)
- HTTPS 加密传输
数据安全
- 参数校验 (Serializer validation)
- SQL 注入防护 (Django ORM)
- XSS 防护 (Vue 自动转义)
- CORS 配置控制
权限控制
- 基于 Django 权限系统
- API 级别权限检查
- 前端路由权限控制