全栈视频平台项目,包含 React 前端 + Java 后端。
| 层面 | 技术 |
|---|---|
| 框架 | React 18 + TypeScript |
| 构建 | Vite 5 |
| 路由 | React Router v6 |
| 状态管理 | Zustand |
| 数据请求 | TanStack React Query |
| UI 组件库 | Ant Design 5 |
| CSS 方案 | CSS Modules |
| HTTP 客户端 | Axios |
| 层面 | 技术 |
|---|---|
| 语言 | Java 17 |
| 框架 | Spring Boot 3.2 |
| ORM | MyBatis-Plus |
| 数据库 | MySQL 8.0 |
| 缓存 | Caffeine + Redis |
| 消息队列 | RabbitMQ |
| 文件存储 | MinIO |
| Web 容器 | Undertow |
| 反向代理 | Nginx |
easylive/
├── apps/ # 前端应用
│ ├── web/ # 用户前端 (React)
│ └── admin/ # 管理后台 (React)
│
├── packages/
│ └── shared/ # 前端共享类型定义
│
├── easylive-engine/ # Java 后端引擎
│ ├── src/
│ │ └── main/
│ │ ├── java/com/easylive/
│ │ │ ├── config/ # 配置类
│ │ │ ├── controller/ # 控制器
│ │ │ ├── service/ # 业务逻辑
│ │ │ ├── mapper/ # 数据访问
│ │ │ ├── entity/ # 实体类
│ │ │ ├── common/ # 公共类
│ │ │ ├── cache/ # 缓存管理
│ │ │ ├── mq/ # 消息队列
│ │ │ ├── utils/ # 工具类
│ │ │ └── task/ # 定时任务
│ │ └── resources/
│ ├── sql/ # 数据库脚本
│ ├── nginx/ # Nginx 配置
│ ├── pom.xml
│ ├── Dockerfile
│ └── docker-compose.yml
│
├── front/ # 原 Vue 项目(供参考)
├── package.json # npm workspaces 根配置
├── API-文档.md # 完整 API 接口文档
└── backend-implementation-plan.md # 后端实施计划
# 安装依赖
npm install
# 启动用户前端(端口 5173)
npm run dev:web
# 启动管理后台(端口 5174)
npm run dev:admin
# 构建全部
npm run build# 进入后端目录
cd easylive-engine
# 启动中间件(MySQL, Redis, RabbitMQ, MinIO)
docker compose up -d
# 初始化数据库
docker compose exec mysql mysql -uroot -proot easylive < sql/schema.sql
docker compose exec mysql mysql -uroot -proot easylive < sql/seed.sql
# 启动应用
mvn spring-boot:run -Dspring-boot.run.profiles=dev
# 访问 API 文档
open http://localhost:8080/doc.html- 首页:视频推荐轮播、分类导航、热门视频、最新视频
- 视频详情:HLS 视频播放器、弹幕、评论(嵌套)、点赞/投币/收藏
- 搜索:关键词搜索、热搜排行、多维度排序
- 用户主页:个人信息、视频列表、合集、收藏、关注/粉丝
- 用户中心:视频管理、评论管理、弹幕管理、数据统计
- 登录/注册、播放历史、消息中心
- 数据统计面板(ECharts 图表)
- 视频管理(列表、审核、推荐、删除)
- 分类管理(多级分类 CRUD、排序)
- 评论/弹幕管理(搜索、删除)
- 用户管理(列表、状态切换)
- 系统设置(参数配置)
- 1000 人同时在线支撑
- Caffeine + Redis 两级缓存
- 视频异步转码(FFmpeg + RabbitMQ)
- 分片上传 + MinIO 对象存储
- Nginx + Redis 限流
- 布隆过滤器防缓存穿透
所有 API 请求遵循以下格式:
- Base URL:
/api - 方法: 全部 POST
- 认证: Cookie(
token/adminToken) - Content-Type:
application/x-www-form-urlencoded
详细接口文档见 API-文档.md,共 90 个接口,涵盖账号、视频、评论、弹幕、消息、统计等。
MIT