159 lines
3.5 KiB
Markdown
159 lines
3.5 KiB
Markdown
|
# API 配置说明
|
|||
|
|
|
|||
|
|
## 概述
|
|||
|
|
|
|||
|
|
`api.js` 是统一的API配置文件，集中管理所有API地址和请求方法。
|
|||
|
|
|
|||
|
|
## 环境配置
|
|||
|
|
|
|||
|
|
### 切换环境
|
|||
|
|
|
|||
|
|
在 `api.js` 中修改 `ENV` 变量：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// 开发环境（本地服务器）
|
|||
|
|
const ENV = 'development';
|
|||
|
|
|
|||
|
|
// 生产环境（云服务器）
|
|||
|
|
const ENV = 'production';
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 环境配置详情
|
|||
|
|
|
|||
|
|
- **开发环境**: `http://115.190.167.176:20002`
|
|||
|
|
- **生产环境**: `http://115.190.167.176:20002`
|
|||
|
|
|
|||
|
|
## 使用方法
|
|||
|
|
|
|||
|
|
### 1. 导入配置
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
import { API_BASE, API_ENDPOINTS, buildURL, request, uploadFile } from '@/config/api.js';
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 使用API基础地址
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
API_BASE // 自动获取当前环境的API地址
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. 使用API端点
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// 获取视频列表
|
|||
|
|
const url = buildURL(API_ENDPOINTS.revival.getList);
|
|||
|
|
|
|||
|
|
// 获取音频文件
|
|||
|
|
const audioUrl = buildURL(API_ENDPOINTS.conversation.getAudio('filename.mp3'));
|
|||
|
|
|
|||
|
|
// 删除视频
|
|||
|
|
const deleteUrl = buildURL(API_ENDPOINTS.revival.deleteVideo(videoId));
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 4. 使用请求方法
|
|||
|
|
|
|||
|
|
#### GET 请求
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
import { request, API_ENDPOINTS } from '@/config/api.js';
|
|||
|
|
|
|||
|
|
// 获取数据
|
|||
|
|
const data = await request({
|
|||
|
|
url: API_ENDPOINTS.revival.getList,
|
|||
|
|
method: 'GET'
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### POST 请求
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
import { request, API_ENDPOINTS } from '@/config/api.js';
|
|||
|
|
|
|||
|
|
// 发送数据
|
|||
|
|
const result = await request({
|
|||
|
|
url: API_ENDPOINTS.conversation.send,
|
|||
|
|
method: 'POST',
|
|||
|
|
data: {
|
|||
|
|
message: 'Hello',
|
|||
|
|
voiceId: 'xxx'
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
#### 上传文件
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
import { uploadFile, API_ENDPOINTS } from '@/config/api.js';
|
|||
|
|
|
|||
|
|
// 上传文件
|
|||
|
|
const result = await uploadFile({
|
|||
|
|
url: API_ENDPOINTS.revival.createVideo,
|
|||
|
|
filePath: tempFilePath,
|
|||
|
|
name: 'photo',
|
|||
|
|
formData: {
|
|||
|
|
voiceId: 'xxx',
|
|||
|
|
text: 'Hello'
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## API端点列表
|
|||
|
|
|
|||
|
|
### 复活视频相关
|
|||
|
|
|
|||
|
|
- `API_ENDPOINTS.revival.getList` - 获取视频列表
|
|||
|
|
- `API_ENDPOINTS.revival.createVideo` - 创建视频
|
|||
|
|
- `API_ENDPOINTS.revival.deleteVideo(id)` - 删除视频
|
|||
|
|
- `API_ENDPOINTS.revival.getDetail(id)` - 获取视频详情
|
|||
|
|
|
|||
|
|
### 音色相关
|
|||
|
|
|
|||
|
|
- `API_ENDPOINTS.voice.getList` - 获取音色列表
|
|||
|
|
- `API_ENDPOINTS.voice.create` - 创建音色
|
|||
|
|
- `API_ENDPOINTS.voice.delete(id)` - 删除音色
|
|||
|
|
|
|||
|
|
### 对话相关
|
|||
|
|
|
|||
|
|
- `API_ENDPOINTS.conversation.send` - 发送对话
|
|||
|
|
- `API_ENDPOINTS.conversation.getAudio(filename)` - 获取音频文件
|
|||
|
|
- `API_ENDPOINTS.conversation.clearHistory` - 清空历史
|
|||
|
|
|
|||
|
|
### 静态资源
|
|||
|
|
|
|||
|
|
- `API_ENDPOINTS.static.video(filename)` - 视频文件
|
|||
|
|
- `API_ENDPOINTS.static.image(filename)` - 图片文件
|
|||
|
|
|
|||
|
|
## 已更新的页面
|
|||
|
|
|
|||
|
|
以下页面已经更新为使用统一的API配置：
|
|||
|
|
|
|||
|
|
1. ✅ `pages/video-call-new/video-call-new.vue`
|
|||
|
|
2. ✅ `pages/phone-call/phone-call.vue`
|
|||
|
|
3. ✅ `pages/video-call/video-call.vue`
|
|||
|
|
4. ✅ `pages/revival/revival.vue`
|
|||
|
|
5. ✅ `pages/revival/revival-original.vue`
|
|||
|
|
6. ✅ `pages/revival/revival-history.vue`
|
|||
|
|
7. ✅ `pages/my-works/my-works.vue`
|
|||
|
|
8. ✅ `pages/history-record/history-record.vue`
|
|||
|
|
|
|||
|
|
## 优势
|
|||
|
|
|
|||
|
|
1. **集中管理**: 所有API配置在一个文件中，易于维护
|
|||
|
|
2. **环境切换**: 一键切换开发/生产环境
|
|||
|
|
3. **类型安全**: 使用预定义的端点，减少拼写错误
|
|||
|
|
4. **代码复用**: 统一的请求方法，减少重复代码
|
|||
|
|
5. **易于扩展**: 新增API只需在配置文件中添加
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
|
|||
|
|
1. 切换环境后需要重新编译项目
|
|||
|
|
2. 所有新页面都应该使用这个配置文件
|
|||
|
|
3. 不要在页面中硬编码API地址
|
|||
|
|
4. 如需添加新的API端点，请在 `API_ENDPOINTS` 中添加
|