ai-clone/frontend-ai/config
2026-03-05 14:29:21 +08:00
..
api-usage-example.js first commit 2026-03-05 14:29:21 +08:00
api.js first commit 2026-03-05 14:29:21 +08:00
README.md first commit 2026-03-05 14:29:21 +08:00
switch-env.js first commit 2026-03-05 14:29:21 +08:00

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配置

  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 中添加