3.5 KiB
3.5 KiB
API 配置说明
概述
api.js 是统一的API配置文件,集中管理所有API地址和请求方法。
环境配置
切换环境
在 api.js 中修改 ENV 变量:
// 开发环境(本地服务器)
const ENV = 'development';
// 生产环境(云服务器)
const ENV = 'production';
环境配置详情
- 开发环境:
http://115.190.167.176:20002 - 生产环境:
http://115.190.167.176:20002
使用方法
1. 导入配置
import { API_BASE, API_ENDPOINTS, buildURL, request, uploadFile } from '@/config/api.js';
2. 使用API基础地址
export default {
data() {
return {
API_BASE // 自动获取当前环境的API地址
}
}
}
3. 使用API端点
// 获取视频列表
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 请求
import { request, API_ENDPOINTS } from '@/config/api.js';
// 获取数据
const data = await request({
url: API_ENDPOINTS.revival.getList,
method: 'GET'
});
POST 请求
import { request, API_ENDPOINTS } from '@/config/api.js';
// 发送数据
const result = await request({
url: API_ENDPOINTS.conversation.send,
method: 'POST',
data: {
message: 'Hello',
voiceId: 'xxx'
}
});
上传文件
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配置:
- ✅
pages/video-call-new/video-call-new.vue - ✅
pages/phone-call/phone-call.vue - ✅
pages/video-call/video-call.vue - ✅
pages/revival/revival.vue - ✅
pages/revival/revival-original.vue - ✅
pages/revival/revival-history.vue - ✅
pages/my-works/my-works.vue - ✅
pages/history-record/history-record.vue
优势
- 集中管理: 所有API配置在一个文件中,易于维护
- 环境切换: 一键切换开发/生产环境
- 类型安全: 使用预定义的端点,减少拼写错误
- 代码复用: 统一的请求方法,减少重复代码
- 易于扩展: 新增API只需在配置文件中添加
注意事项
- 切换环境后需要重新编译项目
- 所有新页面都应该使用这个配置文件
- 不要在页面中硬编码API地址
- 如需添加新的API端点,请在
API_ENDPOINTS中添加