vue+AI智能机器人回复功能实现智能机器人回复功能实现
本文实例为大家分享了vue+AI智能机器人回复的具体代码,供大家参考,具体内容如下
操作步骤操作步骤
引入前端代码
前端代码是参考github上的一个开源项目,里面包括AI机器人回复和聊天室两个模块,这里只抽取出来一个AI机器人回复的前
端,有兴趣的话,可以点击查看
封装好代理与请求
因为第三方API的请求是外网的,存在跨域问题,所以要配置代理,配置如下:
文件:文件:vue.config.js
const vueConfig = {
//上面还有项目的其他配置
devServer: {
port: 8000,
proxy: {
'/ai': {
target: 'http://openapi.tuling123.com/',
changeOrigin: true,
pathRewrite: {'^/ai': ''}
}
}
},
}
module.exports = vueConfig
配完代理后,创建请求实例:
文件:文件: request.js
// 创建AI机器人回复请求axios实例
const aiService = axios.create({
//VUE_APP_AI_BASE_URL=/ai
//baseURL: process.env.VUE_APP_AI_BASE_URL,
baseURL: '/ai',
timeout: 10000
})
……
export {
aiService as aiAxios
}
调用第三方AI机器人的API
第三方AI机器人有很多,笔者尝试过阿里和图灵两个,调用方式都差不多,但是阿里的有点小贵,所以这里以图灵的为示例:
aiAxios.post('/openapi/api/v2', {
reqType: '0',
perception: {
inputText: {
text: this.inputContent
}
},
userInfo: {
//图灵上注册后自己的机器人apikey
apiKey: '****',
//登录用户用账户ID
userId: '123456'
}
}).then(res => {
let text= res.data.results[0].values.text;
this.msgs.push({
评论0