550 lines
13 KiB
Markdown
550 lines
13 KiB
Markdown
## 1. 架构设计
|
||
|
||
```mermaid
|
||
graph TD
|
||
A[用户设备] --> B[uniapp-x跨平台应用]
|
||
B --> C[微信小程序]
|
||
B --> D[iOS App]
|
||
B --> E[Android App]
|
||
B --> F[H5 Web]
|
||
|
||
C --> G[微信API]
|
||
D --> H[iOS原生API]
|
||
E --> I[Android原生API]
|
||
F --> J[浏览器API]
|
||
|
||
G --> K[业务服务层]
|
||
H --> K
|
||
I --> K
|
||
J --> K
|
||
|
||
K --> L[内容分发网络CDN]
|
||
K --> M[后端API服务]
|
||
K --> N[实时通信服务]
|
||
|
||
M --> O[(数据库)]
|
||
M --> P[(Redis缓存)]
|
||
M --> Q[(对象存储)]
|
||
|
||
subgraph "前端层"
|
||
B
|
||
C
|
||
D
|
||
E
|
||
F
|
||
end
|
||
|
||
subgraph "平台适配层"
|
||
G
|
||
H
|
||
I
|
||
J
|
||
end
|
||
|
||
subgraph "服务层"
|
||
K
|
||
L
|
||
M
|
||
N
|
||
O
|
||
P
|
||
Q
|
||
end
|
||
```
|
||
|
||
## 2. 技术描述
|
||
|
||
### 前端技术栈
|
||
|
||
* **跨平台框架**: uniapp-x (Vue3 + TypeScript)
|
||
|
||
* **状态管理**: Pinia (替代Vuex)
|
||
|
||
* **UI组件库**: uView-plus (uniapp生态组件库)
|
||
|
||
* **构建工具**: Vite (开发环境) + Webpack (生产环境)
|
||
|
||
* **样式方案**: SCSS + CSS变量 + Flex布局
|
||
|
||
* **图标方案**: iconfont + 本地SVG图标
|
||
|
||
* **动画库**: CSS3动画 + uni.createAnimation API
|
||
|
||
### 后端技术栈
|
||
|
||
* **API服务**: Node.js + Express/Koa2
|
||
|
||
* **数据库**: MySQL 8.0 (主数据库)
|
||
|
||
* **缓存**: Redis 6.0 (会话缓存 + 热点数据)
|
||
|
||
* **文件存储**: 阿里云OSS / 腾讯云COS
|
||
|
||
* **CDN加速**: 阿里云CDN / 腾讯云CDN
|
||
|
||
* **实时通信**: WebSocket + Socket.io
|
||
|
||
* **消息队列**: Redis Pub/Sub (轻量级)
|
||
|
||
### 第三方服务
|
||
|
||
* **视频服务**: 腾讯云点播 / 阿里云视频点播
|
||
|
||
* **音频服务**: 腾讯云音视频 / 网易云信
|
||
|
||
* **推送服务**: 个推 / 极光推送
|
||
|
||
* **登录认证**: 微信登录 + 手机号验证码
|
||
|
||
* **支付服务**: 微信支付 + 支付宝支付
|
||
|
||
## 3. 路由定义
|
||
|
||
### 底部导航路由
|
||
|
||
| 路由路径 | 页面名称 | 功能描述 |
|
||
| ------------------------------ | ---- | ------------- |
|
||
| /pages/index/index | 首页 | 推荐内容聚合，个性化内容流 |
|
||
| /pages/short-video/short-video | 短视频 | 沉浸式竖屏短视频播放 |
|
||
| /pages/long-video/long-video | 长视频 | 影视综等长视频内容分类 |
|
||
| /pages/music/music | 音乐 | 在线音乐播放和歌单管理 |
|
||
| /pages/novel/novel | 小说 | 电子书阅读和书架管理 |
|
||
| /pages/profile/profile | 我的 | 个人中心和相关设置 |
|
||
|
||
### 功能页面路由
|
||
|
||
| 路由路径 | 页面名称 | 功能描述 |
|
||
| -------------------------- | ---- | ----------- |
|
||
| /pages/search/search | 搜索页 | 全局内容搜索和智能联想 |
|
||
| /pages/player/player | 播放器 | 视频/音乐播放控制页面 |
|
||
| /pages/detail/detail | 详情页 | 内容详细信息展示 |
|
||
| /pages/category/category | 分类页 | 内容分类筛选和浏览 |
|
||
| /pages/reader/reader | 阅读器 | 小说阅读界面 |
|
||
| /pages/bookshelf/bookshelf | 书架 | 用户收藏的小说管理 |
|
||
| /pages/history/history | 历史记录 | 观看/收听/阅读历史 |
|
||
| /pages/settings/settings | 设置页 | 应用设置和偏好配置 |
|
||
| /pages/login/login | 登录页 | 用户登录和注册 |
|
||
| /pages/vip/vip | 会员页 | VIP会员开通和管理 |
|
||
|
||
### 子页面路由
|
||
|
||
| 路由路径 | 页面名称 | 功能描述 |
|
||
| --------------------------- | ---- | -------- |
|
||
| /pages/profile/edit-profile | 编辑资料 | 用户个人信息编辑 |
|
||
| /pages/profile/favorites | 我的收藏 | 收藏内容管理 |
|
||
| /pages/profile/download | 离线下载 | 离线内容管理 |
|
||
| /pages/music/playlist | 歌单详情 | 音乐歌单详细页面 |
|
||
| /pages/long-video/series | 剧集列表 | 电视剧分集选择 |
|
||
| /pages/short-video/upload | 上传视频 | 短视频上传发布 |
|
||
|
||
## 4. API定义
|
||
|
||
### 4.1 用户认证相关API
|
||
|
||
#### 用户登录
|
||
|
||
```
|
||
POST /api/auth/login
|
||
```
|
||
|
||
请求参数：
|
||
|
||
| 参数名 | 类型 | 必填 | 描述 |
|
||
| -------- | ------ | -- | -------------------------- |
|
||
| mobile | string | 是 | 手机号 |
|
||
| code | string | 是 | 短信验证码 |
|
||
| platform | string | 是 | 平台类型：wechat/ios/android/h5 |
|
||
|
||
响应示例：
|
||
|
||
```json
|
||
{
|
||
"code": 200,
|
||
"message": "登录成功",
|
||
"data": {
|
||
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
|
||
"userInfo": {
|
||
"userId": "123456",
|
||
"nickname": "用户昵称",
|
||
"avatar": "https://example.com/avatar.jpg",
|
||
"vipLevel": 1,
|
||
"expireTime": "2024-12-31 23:59:59"
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 获取验证码
|
||
|
||
```
|
||
POST /api/auth/sendCode
|
||
```
|
||
|
||
请求参数：
|
||
|
||
| 参数名 | 类型 | 必填 | 描述 |
|
||
| ------ | ------ | -- | -------------------- |
|
||
| mobile | string | 是 | 手机号 |
|
||
| type | string | 是 | 验证码类型：login/register |
|
||
|
||
### 4.2 内容相关API
|
||
|
||
#### 获取首页推荐内容
|
||
|
||
```
|
||
GET /api/content/recommend
|
||
```
|
||
|
||
请求参数：
|
||
|
||
| 参数名 | 类型 | 必填 | 描述 |
|
||
| ----------- | ------ | -- | -------------------------- |
|
||
| page | number | 否 | 页码，默认1 |
|
||
| pageSize | number | 否 | 每页数量，默认20 |
|
||
| contentType | string | 否 | 内容类型：all/video/music/novel |
|
||
|
||
#### 获取短视频列表
|
||
|
||
```
|
||
GET /api/short-video/list
|
||
```
|
||
|
||
请求参数：
|
||
|
||
| 参数名 | 类型 | 必填 | 描述 |
|
||
| -------- | ------ | -- | --------- |
|
||
| lastId | string | 否 | 最后一条视频ID |
|
||
| count | number | 否 | 获取数量，默认10 |
|
||
| category | string | 否 | 视频分类 |
|
||
|
||
#### 获取长视频分类
|
||
|
||
```
|
||
GET /api/long-video/category
|
||
```
|
||
|
||
#### 获取音乐歌单
|
||
|
||
```
|
||
GET /api/music/playlist
|
||
```
|
||
|
||
#### 获取小说分类
|
||
|
||
```
|
||
GET /api/novel/category
|
||
```
|
||
|
||
### 4.3 播放相关API
|
||
|
||
#### 获取视频播放地址
|
||
|
||
```
|
||
GET /api/player/video/url
|
||
```
|
||
|
||
请求参数：
|
||
|
||
| 参数名 | 类型 | 必填 | 描述 |
|
||
| ------- | ------ | -- | ----------------- |
|
||
| videoId | string | 是 | 视频ID |
|
||
| quality | string | 否 | 清晰度：auto/hd/sd/ld |
|
||
|
||
#### 获取音乐播放地址
|
||
|
||
```
|
||
GET /api/player/music/url
|
||
```
|
||
|
||
#### 记录播放进度
|
||
|
||
```
|
||
POST /api/player/progress
|
||
```
|
||
|
||
### 4.4 用户行为API
|
||
|
||
#### 点赞/取消点赞
|
||
|
||
```
|
||
POST /api/interact/like
|
||
```
|
||
|
||
#### 收藏/取消收藏
|
||
|
||
```
|
||
POST /api/interact/favorite
|
||
```
|
||
|
||
#### 发表评论
|
||
|
||
```
|
||
POST /api/interact/comment
|
||
```
|
||
|
||
#### 关注/取消关注
|
||
|
||
```
|
||
POST /api/interact/follow
|
||
```
|
||
|
||
### 4.5 搜索相关API
|
||
|
||
#### 搜索建议
|
||
|
||
```
|
||
GET /api/search/suggest
|
||
```
|
||
|
||
#### 搜索结果
|
||
|
||
```
|
||
GET /api/search/result
|
||
```
|
||
|
||
## 5. 服务器架构设计
|
||
|
||
```mermaid
|
||
graph TD
|
||
A[客户端请求] --> B[API网关层]
|
||
B --> C[负载均衡器]
|
||
C --> D[应用服务集群]
|
||
|
||
D --> E[用户服务]
|
||
D --> F[内容服务]
|
||
D --> G[播放服务]
|
||
D --> H[推荐服务]
|
||
|
||
E --> I[(用户数据库)]
|
||
F --> J[(内容数据库)]
|
||
G --> K[(播放记录)]
|
||
H --> L[(Redis缓存)]
|
||
|
||
D --> M[消息队列]
|
||
M --> N[日志服务]
|
||
M --> O[统计服务]
|
||
|
||
subgraph "网关层"
|
||
B
|
||
C
|
||
end
|
||
|
||
subgraph "应用层"
|
||
D
|
||
E
|
||
F
|
||
G
|
||
H
|
||
end
|
||
|
||
subgraph "数据层"
|
||
I
|
||
J
|
||
K
|
||
L
|
||
end
|
||
|
||
subgraph "服务层"
|
||
M
|
||
N
|
||
O
|
||
end
|
||
```
|
||
|
||
## 6. 数据模型
|
||
|
||
### 6.1 用户相关数据模型
|
||
|
||
```mermaid
|
||
erDiagram
|
||
USER ||--o{ USER_PROFILE : has
|
||
USER ||--o{ USER_VIP : has
|
||
USER ||--o{ USER_FAVORITE : has
|
||
USER ||--o{ USER_HISTORY : has
|
||
USER ||--o{ USER_FOLLOW : follows
|
||
|
||
USER {
|
||
string userId PK
|
||
string mobile UK
|
||
string password
|
||
string nickname
|
||
string avatar
|
||
integer status
|
||
datetime createTime
|
||
datetime updateTime
|
||
}
|
||
|
||
USER_PROFILE {
|
||
string userId PK
|
||
string gender
|
||
date birthday
|
||
string city
|
||
string signature
|
||
integer level
|
||
integer experience
|
||
}
|
||
|
||
USER_VIP {
|
||
string userId PK
|
||
integer vipLevel
|
||
datetime startTime
|
||
datetime expireTime
|
||
boolean autoRenew
|
||
}
|
||
|
||
USER_FAVORITE {
|
||
string id PK
|
||
string userId FK
|
||
string contentId FK
|
||
string contentType
|
||
datetime createTime
|
||
}
|
||
|
||
USER_HISTORY {
|
||
string id PK
|
||
string userId FK
|
||
string contentId FK
|
||
string contentType
|
||
integer progress
|
||
datetime lastPlayTime
|
||
}
|
||
```
|
||
|
||
### 6.2 内容相关数据模型
|
||
|
||
```mermaid
|
||
erDiagram
|
||
CONTENT ||--o{ CONTENT_DETAIL : has
|
||
CONTENT ||--o{ CONTENT_TAG : has
|
||
CONTENT ||--o{ CONTENT_STAT : has
|
||
CONTENT ||--o{ COMMENT : has
|
||
|
||
CONTENT {
|
||
string contentId PK
|
||
string title
|
||
string cover
|
||
string contentType
|
||
string category
|
||
integer duration
|
||
string tags
|
||
integer status
|
||
datetime publishTime
|
||
}
|
||
|
||
CONTENT_DETAIL {
|
||
string contentId PK
|
||
string description
|
||
string director
|
||
string actors
|
||
string area
|
||
integer year
|
||
float rating
|
||
integer episodeCount
|
||
}
|
||
|
||
CONTENT_TAG {
|
||
string id PK
|
||
string contentId FK
|
||
string tagName
|
||
integer weight
|
||
}
|
||
|
||
CONTENT_STAT {
|
||
string contentId PK
|
||
integer viewCount
|
||
integer likeCount
|
||
integer favoriteCount
|
||
integer commentCount
|
||
integer shareCount
|
||
}
|
||
```
|
||
|
||
### 6.3 数据库表结构示例
|
||
|
||
#### 用户表 (users)
|
||
|
||
```sql
|
||
CREATE TABLE users (
|
||
user_id VARCHAR(32) PRIMARY KEY COMMENT '用户ID',
|
||
mobile VARCHAR(11) UNIQUE NOT NULL COMMENT '手机号',
|
||
password VARCHAR(64) NOT NULL COMMENT '密码',
|
||
nickname VARCHAR(50) NOT NULL COMMENT '昵称',
|
||
avatar VARCHAR(255) COMMENT '头像URL',
|
||
status TINYINT DEFAULT 1 COMMENT '状态：1正常 0禁用',
|
||
create_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
|
||
update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
|
||
INDEX idx_mobile (mobile),
|
||
INDEX idx_status (status)
|
||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户表';
|
||
```
|
||
|
||
#### 内容表 (contents)
|
||
|
||
```sql
|
||
CREATE TABLE contents (
|
||
content_id VARCHAR(32) PRIMARY KEY COMMENT '内容ID',
|
||
title VARCHAR(100) NOT NULL COMMENT '标题',
|
||
cover VARCHAR(255) COMMENT '封面URL',
|
||
content_type VARCHAR(20) NOT NULL COMMENT '内容类型：video/music/novel',
|
||
category VARCHAR(50) COMMENT '分类',
|
||
duration INT COMMENT '时长(秒)',
|
||
tags TEXT COMMENT '标签，逗号分隔',
|
||
status TINYINT DEFAULT 1 COMMENT '状态：1正常 0下架',
|
||
publish_time DATETIME COMMENT '发布时间',
|
||
create_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
|
||
INDEX idx_type_category (content_type, category),
|
||
INDEX idx_status_time (status, publish_time DESC),
|
||
INDEX idx_tags (tags(100))
|
||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='内容表';
|
||
```
|
||
|
||
#### 用户历史记录表 (user\_history)
|
||
|
||
```sql
|
||
CREATE TABLE user_history (
|
||
id VARCHAR(32) PRIMARY KEY COMMENT '记录ID',
|
||
user_id VARCHAR(32) NOT NULL COMMENT '用户ID',
|
||
content_id VARCHAR(32) NOT NULL COMMENT '内容ID',
|
||
content_type VARCHAR(20) NOT NULL COMMENT '内容类型',
|
||
progress INT DEFAULT 0 COMMENT '播放进度(秒)',
|
||
last_play_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '最后播放时间',
|
||
create_time DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
|
||
UNIQUE KEY uk_user_content (user_id, content_id),
|
||
INDEX idx_user_time (user_id, last_play_time DESC),
|
||
INDEX idx_content_type (content_type)
|
||
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户播放历史表';
|
||
```
|
||
|
||
## 7. 性能优化方案
|
||
|
||
### 7.1 前端优化
|
||
|
||
* **资源压缩**：图片压缩、代码混淆、分包加载
|
||
|
||
* **懒加载**：图片懒加载、组件懒加载、路由懒加载
|
||
|
||
* **缓存策略**：接口缓存、图片缓存、离线包机制
|
||
|
||
* **渲染优化**：虚拟列表、防抖节流、异步渲染
|
||
|
||
### 7.2 后端优化
|
||
|
||
* **数据库优化**：索引优化、查询优化、分库分表
|
||
|
||
* **缓存策略**：Redis缓存、CDN缓存、浏览器缓存
|
||
|
||
* **接口优化**：接口合并、数据压缩、分页加载
|
||
|
||
* **并发处理**：连接池、异步处理、队列机制
|
||
|
||
### 7.3 内容分发优化
|
||
|
||
* **CDN加速**：静态资源CDN、视频CDN、音频CDN
|
||
|
||
* **预加载策略**：智能预加载、按需加载、优先级加载
|
||
|
||
* **多码率适配**：根据网络自动选择清晰度
|
||
|
||
* **断点续传**：支持大文件断点续传，提升用户体验
|
||
|