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({
date: moment().format('YYYY-MM-DD HH:mm:ss'),
from: '智能机器人',
content: text,
self: false,
avatarUrl: aiHeadImg
})
this.$refs.chattingContent.scrollTop = this.$refs.chattingContent.scrollHeight
}).catch(err => {
this.$message.info(err);
})

整体示例代码

<template lang="html">
<transition name="slide-right">
<div class="chatting">
<!-- 聊天界面头部 -->
<div class="chatting-header">
<div class="chatting-back">
 <i class="icon-back"></i>
</div>
<div class="chatting-title">
 <h2>AI 智能机器人</h2>
</div>
<div class="chatting-menu">
 <i class="icon-menu"></i>
</div>
</div>
<!-- 聊天内容区域 -->
<div ref="chattingContent" id="chattingContent" class="chatting-content">
<div v-for="item of msgs">
 <!--用户输入内容-->
 <div v-if="item.self" class="chatting-item self clearfix">
 <div class="msg-date">
 {{ item.date }}
 </div>
 <div class="msg-from">
 <span class="msg-author">{{ item.from}}</span>
 <img :src="item.avatarUrl" alt="">
 </div>
 <div class="msg-content">{{ item.content }}</div>
 </div>
 <!--AI回复内容-->
 <div v-else class="chatting-item other clearfix">
 <div class="msg-date">
 {{ item.date }}
 </div>
 <div class="msg-from">
 <img :src="item.avatarUrl" alt="">
 <span class="msg-author">{{ item.from }}</span>
 </div>
 <div class="msg-content">{{ item.content }}</div>
 </div>
</div>
</div>
<!-- 输入区域 -->
<div class="chatting-input">
<input @keyup.enter="send" v-model.trim="inputContent" placeholder="与智能机器人聊些啥">
<button @click="send">发送</button>
</div>
</div>
</transition>

</template>

<script>
import {aiAxios} from '../../../utils/request'
import moment from 'moment'
//下面两张头像自己从网上随便找两张
import aiHeadImg from '../../../assets/web/pub/images/head-ai.svg'
import clientHeadImg from '../../../assets/web/pub/images/pltx.png'

export default {
name: 'chatting',
data() {
return {
msgs: localStorage.msgs_ai && JSON.parse(localStorage.msgs_ai) || [],
inputContent: '',
oContent: {}
}
},
watch: {
msgs(val) {
localStorage.msgs_ai = JSON.stringify(val);
}
},

mounted() {
this.oContent = document.getElementById('chattingContent');
setTimeout(() => {
this.$refs.chattingContent.scrollTop = this.$refs.chattingContent.scrollHeight
}, 0)
},
methods: {
//发送消息
send() {
this.oContent.scrollTop = this.oContent.scrollHeight;
if (this.inputContent === '') {
 return;
}

this.msgs.push({
 date: moment().format('YYYY-MM-DD HH:mm:ss'),
 from: this.userInfo.personname || '匿名',
 content: this.inputContent,
 self: true,
 avatarUrl: clientHeadImg
});
setTimeout(() => {
 this.$refs.chattingContent.scrollTop = this.$refs.chattingContent.scrollHeight
}, 0)

this.getClientRobotReply()
this.inputContent = '';
},
//图灵AI机器人回复
getClientRobotReply() {
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({
 date: moment().format('YYYY-MM-DD HH:mm:ss'),
 from: '智能机器人',
 content: text,
 self: false,
 avatarUrl: aiHeadImg
 })
 this.$refs.chattingContent.scrollTop = this.$refs.chattingContent.scrollHeight
}).catch(err => {
 this.$message.info(err);
})
}
}
}
</script>

<style lang="less" scoped>
.chatting {
display: flex;
flex-direction: column;

width: 100％;
height: 100％;

.chatting-header {
display: flex;
justify-content: space-between;
align-items: center;
height: 50px;
width: 100％;
background-color: #2196f3;
color: white;
padding-left: 10px;
padding-right: 15px;

.chatting-back {
width: 30px;
height: 30px;
i.icon-back {
 /*background: url('../../common/icons/icon-group2.svg') no-repeat;*/
 background-size: contain;
}
}

.chatting-title {
i.icon-group {
 vertical-align: top;
 width: 30px;
 height: 30px;
 //background: url('./images/icon-group.svg') no-repeat;
 background-size: contain;
 margin-right: 3px;
}
}

.chatting-menu {
width: 30px;
height: 30px;
i.icon-menu {
 /*background: url('../../common/icons/icon-index.svg') no-repeat;*/
 background-size: contain;
}
}
}

.chatting-content {
flex: 1;
width: 100％;
background-color: rgba(0, 0, 0, .1);
overflow: auto;
.chatting-item {
padding: 10px;
width: 100％;
.msg-date {
 text-align: center;
 color: gray;
 font-size: 80％;
}
.msg-from {
 display: flex;
 align-items: center;
 span.loc {
 color: gray;
 font-size: 60％;
 margin-right: 5px;
 }
 .msg-author {
 font-size: 1.2rem;
 }
 img {
 width: 30px;
 height: 30px;
 border-radius: 15px;
 }
}
.msg-content {
 margin-top: 5px;
 background-color: white;
 width: 200px;
 padding: 6px 10px;
 border-radius: 10px;
}
}

.chatting-item + .chatting-item {
margin-top: 10px;
}
.self {
.msg-from {
 display: flex;
 justify-content: flex-end;
 align-items: center;
 img {
 margin-left: 10px;
 }
}

.msg-content {
 float: right;
 word-wrap: break-word;
 word-break: break-all;
 margin-right: 10px;
}

}

.other {
.msg-from {
 display: flex;
 justify-content: flex-start;
 align-items: center;
 img {
 margin-right: 10px;
 }
}

.msg-content {
 float: left;
 margin-left: 10px;
 word-wrap: break-word;
 word-break: break-all;
}

}

.online {
width: 200px;
// max-width: 100％;
margin: 3px auto;
border-radius: 4px;
text-align: center;
background-color: #FFFDE7;
}
}

.chatting-input {
display: flex;
height: 40px;
width: 100％;
input {
flex: 1;
padding-left: 10px;
// padding-top: 10px;
height: 100％;
font-size: 1.3rem;
}
button {
width: 60px;
height: 100％;
background-color: #2196f3;
color: white;
font-size: 1.2rem;
}
}
}
</style>

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

来源：https://blog.csdn.net/qq_31394809/article/details/106207365