系统架构#

整体架构#

┌─────────────────┐
│   Frontend      │  Next.js 16 + React 19
│   (Port 3001)   │  Tailwind CSS 4
└────────┬────────┘
         │ HTTP/REST
         │ JWT Token
┌────────▼────────┐
│   Backend       │  Spring Boot 3.2.5
│   (Port 8080)   │  Spring Security
└────────┬────────┘
         │ JDBC
┌────────▼────────┐
│   Database      │  PostgreSQL 16
│   (Port 5432)   │
└─────────────────┘

技术选型#

前端技术栈#

  • 框架: Next.js 16 (App Router)
    • 选择理由：SSR/SSG 支持，优秀的开发体验
  • UI 库: React 19
    • 选择理由：最新特性，性能优化
  • 样式: Tailwind CSS 4
    • 选择理由：快速开发，高度可定制
  • 状态管理: Zustand
    • 选择理由：轻量级，API 简洁
  • 认证: @react-oauth/google
    • 选择理由：官方支持，集成简单

后端技术栈#

  • 框架: Spring Boot 3.2.5
    • 选择理由：成熟稳定，生态完善
  • Java 版本: Java 17 LTS
  • 安全: Spring Security + JWT
    • 无状态认证
    • OAuth2 社交登录
  • 数据访问: Spring Data JPA
    • 简化 CRUD 操作
  • 构建工具: Gradle 8.7
    • 选择理由：灵活的依赖管理

数据库#

  • PostgreSQL 16
    • 选择理由：
      • 强大的 ACID 特性
      • 优秀的 JSON 支持
      • 丰富的索引类型

架构文档导航#

核心功能模块#

1. 用户系统#

  • 注册/登录（邮箱密码）
  • OAuth 登录（Google）
  • 用户资料管理
  • 等级经验系统

2. 课程系统#

  • 课程列表浏览
  • 章节管理
  • 任务（视频/文章/调查）
  • 免费试看功能

3. 学习进度#

  • 视频播放进度追踪
  • 任务完成状态
  • 经验值奖励领取

4. 课程购买#

  • 课程报名
  • 支付状态追踪（测试模式）
  • 购买历史记录

5. 排行榜#

  • 经验值排名
  • 实时更新

6. 道馆系统（规划中）#

  • 挑战任务（速战/实战）
  • 作业提交与批改
  • 技能评级系统

设计原则#

1. 敏捷开发优先#

  • 快速迭代，多次发布
  • MVP 功能先行
  • 避免过度设计

2. 高保真复刻#

  • UI/UX 精确还原
  • 功能逻辑一致
  • 性能体验相当

3. 可部署性#

  • 一键 Docker Compose 部署
  • 环境变量配置
  • 容器化隔离

安全设计#

  • JWT 无状态认证
  • CORS 跨域保护
  • SQL 注入防护（JPA）
  • XSS 防护（React 自动转义）
  • 敏感信息环境变量化

性能优化#

前端#

  • Next.js 自动代码分割
  • 图片懒加载
  • 客户端状态缓存

后端#

  • JPA 二级缓存
  • 数据库索引优化
  • 连接池管理

数据库#

  • 主键索引
  • 外键约束
  • 级联删除优化
Backward 資料流程範例 数据库设计 - 核心系统 Forward