Skip to content

Commit a1e166c

Browse files
author
Taois
committed
feat: 久违了
无意间翻到了以前的库存，实现了推荐、分类、设置、搜索等功能的DrPlayer,代码粗糙，等有时间再优化吧
1 parent 640a6ac commit a1e166c

39 files changed

+10199
-7317
lines changed

‎dashboard/docs/API_REFACTOR_SUMMARY.md‎

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
# API 重构总结
2+
3+
## 重构概述
4+
5+
本次重构将原本分散在Vue组件中的API调用统一封装为专门的API服务模块，提高了代码的可维护性、可复用性和可测试性。
6+
7+
## 完成的工作
8+
9+
### 1. 分析后端API文档 ✅
10+
- 详细分析了 `docs/apidoc.md` 和 `docs/t4api.md`
11+
- 理解了三个主要接口：模块数据接口(T4)、模块代理接口、解析接口
12+
- 掌握了各接口的参数、功能和响应格式
13+
14+
### 2. 设计API封装架构 ✅
15+
创建了分层的API架构：
16+
```
17+
src/api/
18+
├── index.js # 统一入口
19+
├── config.js # 配置和常量
20+
├── request.js # Axios封装
21+
├── modules/ # 基础API模块
22+
├── services/ # 业务服务层
23+
├── utils/ # 工具函数
24+
└── types/ # 类型定义
25+
```
26+
27+
### 3. 实现基础API工具类 ✅
28+
29+
#### 核心文件：
30+
- **config.js**: API配置、路径、常量定义
31+
- **request.js**: Axios封装，包含拦截器和错误处理
32+
- **utils/index.js**: 数据处理和验证工具函数
33+
- **types/index.js**: 数据类型定义和工厂函数
34+
35+
#### 基础API模块：
36+
- **modules/module.js**: T4模块数据接口封装
37+
- **modules/proxy.js**: 模块代理接口封装
38+
- **modules/parse.js**: 视频解析接口封装
39+
40+
### 4. 实现具体业务API模块 ✅
41+
42+
#### 业务服务层：
43+
- **services/video.js**: 视频相关业务逻辑
44+
- 推荐视频获取
45+
- 分类视频获取
46+
- 视频搜索
47+
- 视频详情
48+
- 播放地址获取
49+
- 视频解析
50+
- 5分钟缓存机制
51+
52+
- **services/site.js**: 站点管理业务逻辑
53+
- 站点配置管理
54+
- 当前站点切换
55+
- 站点CRUD操作
56+
- 本地存储持久化
57+
58+
### 5. 重构现有Vue组件 ✅
59+
60+
#### 重构的组件：
61+
1. **Video2.vue**
62+
- 替换 `req.get` 为 `siteService` 和 `videoService`
63+
- 优化站点配置获取逻辑
64+
- 改进分类列表获取方式
65+
66+
2. **VideoList.vue**
67+
- 使用 `videoService` 获取视频列表
68+
- 支持推荐和分类视频加载
69+
- 统一错误处理
70+
71+
3. **Video.vue**
72+
- 集成 `siteService` 进行站点管理
73+
- 使用 `videoService` 进行视频搜索
74+
- 同步多个状态管理store
75+
76+
## 技术改进
77+
78+
### 1. 统一的错误处理
79+
- 所有API调用都有统一的错误格式
80+
- 自动处理HTTP状态码和业务错误码
81+
- 友好的错误信息提示
82+
83+
### 2. 缓存机制
84+
- 视频服务实现5分钟缓存
85+
- 减少重复请求，提高性能
86+
- 自动缓存清理机制
87+
88+
### 3. 数据格式化
89+
- 统一的数据结构定义
90+
- 自动数据格式化和验证
91+
- 类型安全的数据处理
92+
93+
### 4. 配置管理
94+
- 集中的API配置管理
95+
- 环境变量支持
96+
- 灵活的参数配置
97+
98+
### 5. 拦截器机制
99+
- 自动添加认证token
100+
- 统一的请求头设置
101+
- 响应数据预处理
102+
103+
## 代码质量提升
104+
105+
### 1. 可维护性
106+
- 分层架构，职责清晰
107+
- 统一的代码风格
108+
- 完善的错误处理
109+
110+
### 2. 可复用性
111+
- 模块化设计
112+
- 通用的工具函数
113+
- 标准化的接口定义
114+
115+
### 3. 可测试性
116+
- 独立的服务模块
117+
- 纯函数设计
118+
- 依赖注入支持
119+
120+
### 4. 可扩展性
121+
- 插件化架构
122+
- 配置驱动
123+
- 标准化的扩展点
124+
125+
## 使用方式对比
126+
127+
### 重构前：
128+
```javascript
129+
import req from '@/utils/req'
130+
131+
// 分散的API调用
132+
const response = await req.get('/home')
133+
const data = response.data
134+
```
135+
136+
### 重构后：
137+
```javascript
138+
import { videoService, siteService } from '@/api/services'
139+
140+
// 语义化的业务方法
141+
const currentSite = siteService.getCurrentSite()
142+
const data = await videoService.getRecommendVideos(currentSite.key, {
143+
extend: currentSite.ext
144+
})
145+
```
146+
147+
## 项目状态
148+
149+
✅ **开发服务器运行正常** - http://localhost:5174/
150+
✅ **无编译错误**
151+
✅ **所有组件重构完成**
152+
✅ **API封装架构完整**
153+
154+
## 后续建议
155+
156+
1. **添加单元测试**: 为API服务模块编写测试用例
157+
2. **性能监控**: 添加API调用性能监控
158+
3. **文档完善**: 补充更多使用示例和最佳实践
159+
4. **类型定义**: 考虑使用TypeScript增强类型安全
160+
5. **错误上报**: 集成错误监控和上报机制
161+
162+
## 文档
163+
164+
- **API使用说明**: `src/api/README.md`
165+
- **重构总结**: `API_REFACTOR_SUMMARY.md` (本文档)
166+
167+
---
168+
169+
**重构完成时间**: 2024年1月
170+
**重构范围**: 前端API调用层完整重构
171+
**影响组件**: Video2.vue, VideoList.vue, Video.vue
172+
**新增文件**: 15个API相关文件
173+
**代码质量**: 显著提升

‎dashboard/docs/apidoc.md‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
# drpyS接口文档
2+
3+
本文档基于 Fastify 实现整理，适合国内开发人员快速对接。
4+
5+
## 1. 接口概览
6+
7+
| 接口名称 | 请求方式 | 地址示例 |
8+
|------------|------------|--------------------|
9+
| 模块数据接口(T4) | GET / POST | `/api/:module` |
10+
| 模块代理接口 | GET | `/proxy/:module/*` |
11+
| 解析接口 | GET | `/parse/:jx` |
12+
13+
---
14+
15+
## 2. 接口详情
16+
17+
### 2.1 模块数据接口(T4)
18+
19+
- **URL**：`/api/:module`
20+
- **请求方式**：`GET` / `POST`
21+
- **鉴权**：需要 `validatePwd` 验证（通过请求参数如?pwd=dzyyds）
22+
- **Content-Type**：
23+
- `application/json`
24+
- `application/x-www-form-urlencoded`
25+
26+
#### 路径参数
27+
28+
| 参数名 | 类型 | 必填 | 说明 |
29+
|--------|--------|----|-----------------------|
30+
| module | string | 是 | 自定义源文件名称，例如 `腾云驾雾[官]` |
31+
32+
#### 请求参数（query 或 body）
33+
34+
以下参数根据业务逻辑不同，**只需传递需要的字段**：
35+
36+
| 参数名 | 类型 | 说明 |
37+
|---------|--------|----------------------------------------|
38+
| play | string | 播放链接标识 |
39+
| flag | string | 播放标志（配合 `play` 使用） |
40+
| ac | string | 动作类型，可配合 `t`、`ids`、`action` 等字段 |
41+
| t | string | 分类 ID（配合 `ac` 使用） |
42+
| ids | string | 详情 ID（逗号分隔） |
43+
| action | string | 执行动作名称 |
44+
| value | string | 执行动作值 |
45+
| wd | string | 搜索关键字 |
46+
| quick | number | 搜索模式（0 普通，1 快速） |
47+
| refresh | any | 强制刷新初始化 |
48+
| filter | number | 是否开启筛选（默认 1） |
49+
| pg | number | 页码，默认 1 |
50+
| ext | string | Base64 编码的 JSON 筛选参数 |
51+
| extend | string | 扩展参数（直接字符串,根据/config路由对应sites的ext属性传递） |
52+
| do | string | 自定义源适配器，默认ds，可不传 |
53+
54+
#### 功能分支
55+
56+
接口会根据传参进入不同逻辑：
57+
58+
1. **播放**：`play` 存在 → 调用 `play` 方法
59+
2. **分类**：`ac`、`t` 存在 → 调用 `cate` (ac=list)
60+
3. **详情**：`ac`、`ids` 存在 → 调用 `detail` (ac=detail)
61+
4. **动作**：`ac`、`action` 存在 → 调用 `action` (ac=action)
62+
5. **搜索**：`wd` 存在 → 调用 `search`
63+
6. **刷新**：`refresh` 存在 → 调用 `init`
64+
7. **默认**：返回 `home` + `homeVod` 数据
65+
66+
#### 返回示例
67+
68+
```json
69+
{
70+
"type": "影视",
71+
"class": [
72+
{
73+
"type_id": "1",
74+
"type_name": "电影"
75+
},
76+
{
77+
"type_id": "2",
78+
"type_name": "电视剧"
79+
}
80+
],
81+
"filters": {},
82+
"list": [
83+
{
84+
"vod_id": "123",
85+
"vod_name": "示例视频",
86+
"vod_pic": "http://example.com/img.jpg",
87+
"vod_remarks": "更新至第1集"
88+
}
89+
]
90+
}
91+
```
92+
93+
[更多T4接口说明参考](./t4api.md)
94+
95+
---
96+
97+
### 2.2 模块代理接口
98+
99+
- **URL**：`/proxy/:module/*`
100+
- **请求方式**：`GET`
101+
- **功能**：转发/代理模块相关资源（可处理 Range 请求，支持流媒体）
102+
- **路径参数**：
103+
| 参数名 | 类型 | 必填 | 说明 |
104+
| ------- | ------ | ---- | ---- |
105+
| module | string | 是 | 模块名称 |
106+
| * | string | 是 | 代理的目标路径 |
107+
108+
- **查询参数**：与 `/api/:module` 相似，额外支持 `extend`
109+
- **返回值**：
110+
- 可能是二进制文件（图片、视频等）
111+
- 可能是 JSON / 文本
112+
- 可能 302 重定向到 `/mediaProxy` 流代理地址
113+
114+
#### 返回示例（JSON）
115+
116+
```json
117+
{
118+
"code": 200,
119+
"msg": "成功",
120+
"data": "内容"
121+
}
122+
```
123+
124+
---
125+
126+
### 2.3 解析接口
127+
128+
- **URL**：`/parse/:jx`
129+
- **请求方式**：`GET`
130+
- **功能**：调用解析脚本解析传入链接（支持跳转、JSON 输出）
131+
- **路径参数**：
132+
| 参数名 | 类型 | 必填 | 说明 |
133+
| ------ | ------ | ---- | ---- |
134+
| jx | string | 是 | 解析脚本名称（对应 `.js` 文件） |
135+
136+
- **查询参数**：
137+
| 参数名 | 类型 | 必填 | 说明 |
138+
| ------ | ------ | ---- | ---- |
139+
| url | string | 是 | 待解析的链接 |
140+
| extend | string | 否 | 扩展参数 |
141+
142+
- **返回值**：
143+
- `code`：200 成功，404 失败
144+
- `msg`：提示信息
145+
- `url`：解析后的地址
146+
- `cost`：解析耗时（毫秒）
147+
148+
#### 返回示例（成功）
149+
150+
```json
151+
{
152+
"code": 200,
153+
"url": "http://example.com/play.m3u8",
154+
"msg": "jx1解析成功",
155+
"cost": 123
156+
}
157+
```
158+
159+
#### 返回示例（失败）
160+
161+
```json
162+
{
163+
"code": 404,
164+
"url": "http://example.com",
165+
"msg": "jx1解析失败",
166+
"cost": 120
167+
}
168+
```
169+
170+
---
171+
172+
## 3. 错误返回格式
173+
174+
```json
175+
{
176+
"error": "错误描述信息"
177+
}
178+
```
179+
180+
- 常见错误：
181+
- `Module xxx not found`：模块不存在
182+
- `解析 xxx not found`：解析脚本不存在
183+
- `Failed to process module`：模块执行出错
184+
- `Failed to proxy module`：代理执行出错
185+
186+
---
187+
188+
## 4. 开发注意事项
189+
190+
1. 所有模块和解析脚本必须存在于 `jsDir` / `jxDir` 对应目录下。
191+
2. 访问 `/api/:module` 接口时需通过 `validatePwd` 验证。
192+
3. `ext` 参数必须是 **Base64 编码的 JSON 字符串**，否则会报“筛选参数错误”。
193+
4. 流媒体内容可能会通过 `/mediaProxy` 重定向处理。
194+
5. 建议在请求时加上 `pg` 参数避免默认第一页。

0 commit comments

Comments
 (0)