Skip to content
字数
1077 字
阅读时间
5 分钟

前后端联调

prompt
总结一下开发的关键点, 调接口需要的 参数

1. 前端接口参数

ts
interface AICreateParams {
  topic: string        // 问卷主题
  questionCount: number // 题目数量(1-10)
  purpose: string      // 调研目的
}

2. 后端返回数据格式

ts
interface AIResponseData {
  questions: Array<{
    title: string      // 问题标题
    options: string[]  // 选项数组
  }>
}

3. 关键开发点

A. API 配置

  • 接口地址:/api/ai/generate
  • 请求方法:POST
  • 超时设置:建议 30 秒以上,因为 AI 生成可能需要较长时间
ts
timeout: 30 * 1000  // 在 ajax.ts 中设置

B. 错误处理

ts
try {
  const data = await generateQuestionnaire(values)
  // 处理成功响应
} catch (error) {
  message.error(error instanceof Error ? error.message : '创建失败,请重试')
}

C. 数据转换

  • 将 AI 生成的问题转换为问卷组件格式
ts
const componentInfo = {
  fe_id: nanoid(),
  type: 'questionRadio',
  title: question.title,
  props: {
    title: question.title,
    options: question.options.map(text => ({
      text,
      value: text,
    })),
    value: '',
    isVertical: true,
  },
}

D. UI 交互

  • 使用 Modal 弹窗收集用户输入
  • 提供加载状态反馈
  • 成功后自动关闭弹窗并清空表单

中途遇到的问题

超时问题: 默认的 10 秒超时时间对 AI 生成来说太短 解决:增加超时时间

ts
timeout: 30 * 1000  // 30秒

数据格式转换问题: AI 返回的数据需要转换为组件格式

json
// 需要转换的格式
{
  title: string,
  options: string[]
}

// 转换为
{
  fe_id: string,
  type: 'questionRadio',
  title: string,
  props: {
    options: Array<{text: string, value: string}>
  }
}

后端调用 千帆 AppBuilder api

让我总结一下使用百度 AI API 生成问卷问题的关键点:

1. 接口调用流程

  • 第一步:创建会话
ts
POST /v2/app/conversation
{
  "app_id": "YOUR_APP_ID"
}

第二步:生成问题

ts
POST /v2/app/conversation/runs
{
  "app_id": "YOUR_APP_ID",
  "conversation_id": "从第一步获取的 conversation_id",
  "query": "问题生成提示语",
  "stream": false
}

2. 必需参数

- `app_id`: 应用标识
- `Authorization`: 认证令牌(在请求头中)
- 生成问题时需要的参数:
    - `topic`: 问卷主题
    - `questionCount`: 问题数量
    - `purpose`: 调研目的

3. 返回数据格式

ts
{
  "questions": [
    {
      "title": "问题标题",
      "options": ["选项1", "选项2", "选项3", ...]
    },
    // ... 更多问题
  ]
}

4. 调用示例

ts
// 前端调用
const generateQuestions = async (topic: string, count: number, purpose: string) => {
  const res = await axios.post('/api/question/generate', {
    topic,
    questionCount: count,
    purpose
  });
  return res.data;
};

// 后端处理
@Post('generate')
@Public()
async generateQuestions(
  @Body() dto: GenerateQuestionDto
) {
  const { topic, questionCount, purpose } = dto;
  return this.questionService.generateQuestions(topic, questionCount, purpose);
}

5. 注意事项

  • 需要正确配置 app_id 和 Authorization 令牌
  • 建议使用环境变量存储敏感信息
  • 需要处理 API 调用可能的错误情况
  • JSON 响应需要特殊处理以确保正确解析

这些是实现 AI 问题生成功能的核心要点,确保这些配置和参数正确可以帮助顺利集成该功能。

在开发过程中遇到了以下主要问题:

JSON 解析错误

  • 问题:AI 返回的 JSON 字符串包含中文标点和特殊格式
  • 错误信息:"好的,以下是为您生成"... is not valid JSON
  • 解决方案:实现了两步解析策略
ts
// 1. 先尝试直接解析
try {
  return JSON.parse(jsonStr);
} catch (firstError) {
  // 2. 失败后进行清理再解析
  cleanJsonStr = jsonStr.replace(/。/g, '')  // 处理中文标点
                      .replace(/,/g, ',')
                      .replace(/:/g, ':')
                      // ... 更多清理步骤
}

格式不一致问题

  • AI 返回的 JSON 结构有时缺少结束括号
  • 解决方案:添加括号检查和补全
ts
if (!cleanJsonStr.endsWith('}')) {
  cleanJsonStr += '}';
}

网络超时问题

  • API 调用偶尔超时
  • 解决方案:添加重试机制和超时设置
ts
const options = {
  timeout: 30000,  // 30秒超时
  // ... 其他选项
};
// 添加重试逻辑
for (let i = 0; i < retries; i++) {
  try {
    const response = await fetch(url, options);
    // ...
  } catch (error) {
    if (i === retries - 1) throw error;
    await new Promise(resolve => setTimeout(resolve, Math.pow(2, i) * 1000));
  }
}

贡献者

The avatar of contributor named as sunchengzhi sunchengzhi

文件历史

撰写