AI 嘴替，社交平台反杠机器人：第 2 篇-AI 助手

大家好，我是欧达克。

前面介绍了阿里 Turbo 大模型的集成，现在开始用 AI 工具编写前端代码。废话不多说，开搞。

提示词

先利用 DeepSeek，生成提示词。

我想用 cursor 生成 AI 嘴替应用的前端代码，帮我生成提示词，要求技术栈是 vue3 + uni-app，能实现基本的对话功能，页面需要简洁，美观

DeepSeek 回答：

DeepSeek 还贴心地生成了样例代码，但是本期的重点不在 DeepSeek 生成的代码，所以我们直接跳过。

Cursor

首先新增一个文件夹，命名 ROBOTALK-UNI-APP, 接着把 DeepSeek 生成的提示词，copy 到根目录的 README.md 文件中，然后开始 AI 对话：

这是一个基础的uni-app 项目模板，帮我根据提示词，生成对应的代码

生成的详细过程就不贴了，下面会直接贴出效果。

失败案例

因为我是要使用 uni-app 工具开发的，开始是想看 Cursor 会不会自动根据 uni cli 指令生成模板工程，但是发现并不会（我自测没生成，不知道其他人有没有遇到这个情况），然后在不生成模板工程的情况下，调试了很久，最终还是宣告失败。。。继续对话下去也可能会成功，但是不想花这个时间，所以直接放弃了。

成功案例

使用 HBuilderX 工具，生成基础的项目模板。

接下去也是一样，把提示词复制过来，继续对话。

发现 AI 有时候会犯一些低级的错误，比如.value 访问，或者函数没引入等等，但是整体上你把错误报给它，它都能很快修复问题。
调试了大概 1 小时时间，静态页面已经能够正常访问了，因为上一篇文章我们不是搞定了大模型对接吗？所以我们直接把接口的详细配置丢给 AI。

发现 AI 真的很强大，生成的代码质量真的很高，比如对一个简单的 http 请求的封装，我直接贴下源码：

javascript 复制代码

/**
 * API工具类
 * 封装所有与API交互相关的函数
 */

// API基础配置
export const API_CONFIG = {
  // 开发环境使用本地地址，生产环境可替换为线上地址
  baseUrl: process.env.NODE_ENV === 'development' ?
    'http://localhost:8080/robotalk/api' :
    'https://your-production-domain.com/robotalk/api',
  timeout: 10000, // 10秒超时
  endpoints: {
    ask: '/ask/turbo'
  }
};

/**
 * 带超时的API调用
 * @param {Object} options 请求选项
 * @returns {Promise} 返回API响应数据
 */
export const callApiWithTimeout = (options) => {
  return new Promise((resolve, reject) => {
    // 创建超时计时器
    const timeoutTimer = setTimeout(() => {
      reject(new Error('请求超时，请检查网络连接'));
    }, options.timeout || API_CONFIG.timeout);

    // 检查网络状态
    uni.getNetworkType({
      success: (networkState) => {
        // 如果没有网络连接，直接返回错误
        if (networkState.networkType === 'none') {
          clearTimeout(timeoutTimer);
          return reject(new Error('无网络连接，请检查网络设置'));
        }

        // 发起请求
        uni.request({
          url: options.url,
          method: options.method || 'GET',
          data: options.data || {},
          header: {
            'content-type': 'application/json',
            ...options.header
          },
          success: (res) => {
            clearTimeout(timeoutTimer);

            if (res.statusCode === 200 && res.data && res.data.success) {
              resolve(res.data.data);
            } else {
              // 更详细的错误信息处理
              const errorMsg = res.data?.errorContext ||
                `请求失败(${res.statusCode}): ${res.data?.errorCode || '未知错误'}`;
              reject(new Error(errorMsg));
            }
          },
          fail: (err) => {
            clearTimeout(timeoutTimer);
            reject(new Error(err.errMsg || '网络异常'));
          }
        });
      },
      fail: () => {
        clearTimeout(timeoutTimer);
        reject(new Error('无法获取网络状态'));
      }
    });
  });
};

/**
 * 发送消息到AI服务
 * @param {string} message 用户消息内容
 * @param {Object} options 额外选项(可选)
 * @returns {Promise<string>} AI回复内容
 */
export const sendMessageToAI = async (message, options = {}) => {
  try {
    // 请求开始时间，用于计算响应时间
    const startTime = Date.now();

    // 构建请求参数
    const requestData = {
      content: message,
      ...options.extraParams // 允许传入额外参数
    };

    // 发送请求
    const result = await callApiWithTimeout({
      url: options.url || (API_CONFIG.baseUrl + API_CONFIG.endpoints.ask),
      method: 'POST',
      data: requestData,
      timeout: options.timeout,
      header: options.headers
    });

    // 计算响应时间（毫秒）
    const responseTime = Date.now() - startTime;
    console.log(`AI响应时间: ${responseTime}ms`);

    return result;
  } catch (error) {
    console.error('AI服务调用失败:', error);

    // 记录失败的请求内容，便于调试
    if (process.env.NODE_ENV === 'development') {
      console.log('失败的请求内容:', message);
    }

    throw error;
  }
};