vue+AI智能机器人回复功能实现


Posted in Javascript onJuly 16, 2020

本文实例为大家分享了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组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript CSS修改学习第一章 查找位置
Feb 19 Javascript
jQuery实现用方向键控制层的上下左右移动
Jan 13 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
Apr 01 Javascript
在JS数组特定索引处指定位置插入元素
Jul 27 Javascript
Angular2 (RC5) 路由与导航详解
Sep 21 Javascript
Cookies 和 Session的详解及区别
Apr 21 Javascript
纯JS实现简单的日历
Jun 26 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
Sep 29 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
Nov 01 Javascript
JavaScript array常用方法代码实例详解
Sep 02 Javascript
详解vue实现坐标拾取器功能示例
Nov 18 Vue.js
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
vue.js实现h5机器人聊天(测试版)
Jul 16 #Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 #Javascript
通过实例解析vuejs如何实现调试代码
Jul 16 #Javascript
详解js中的几种常用设计模式
Jul 16 #Javascript
JS寄快递地址智能解析的实现代码
Jul 16 #Javascript
详解js中的原型,原型对象,原型链
Jul 16 #Javascript
详解Webpack4多页应用打包方案
Jul 16 #Javascript
You might like
玩转虚拟域名◎+ .
2006/10/09 PHP
Drupal 添加模块出现莫名其妙的错误的解决方法(往往出现在模块较多时)
2011/04/18 PHP
如何取得中文输入的真实长度?
2006/06/24 Javascript
Jquery 获得服务器控件值的方法小结
2010/05/11 Javascript
JavaScript单元测试ABC
2012/04/12 Javascript
关于javascript中的typeof和instanceof介绍
2012/12/04 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
2014/05/29 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
2016/05/07 Javascript
jQuery绑定事件的几种实现方式
2016/05/09 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
2016/09/05 Javascript
Vue实现自带的过滤器实例
2017/03/09 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
2017/09/19 Javascript
vue使用pdfjs显示PDF可复制的实现方法
2018/12/14 Javascript
vue自动路由-单页面项目(非build时构建)
2019/04/30 Javascript
javascript+HTML5 canvas绘制时钟功能示例
2019/05/15 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
javascript代码实现简易计算器
2021/01/25 Javascript
[44:15]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第二局
2016/03/06 DOTA
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
对numpy中shape的深入理解
2018/06/15 Python
NumPy 基本切片和索引的具体使用方法
2019/04/24 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
Python 合并多个TXT文件并统计词频的实现
2019/08/23 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
2017/03/02 HTML / CSS
检测浏览器是否支持html5视频的代码
2013/03/28 HTML / CSS
Boden澳大利亚官网:英国在线服装公司
2018/08/05 全球购物
校园安全演讲稿
2014/05/09 职场文书
建筑工地文明标语
2014/10/09 职场文书
教师节倡议书2015
2015/04/27 职场文书
财务人员入职担保书
2015/09/22 职场文书
Redis6.0搭建集群Redis-cluster的方法
2021/05/08 Redis
分析SQL窗口函数之取值窗口函数
2022/04/21 Oracle
Mysql中的触发器定义及语法介绍
2022/06/25 MySQL
java实现web实时消息推送的七种方案
2022/07/23 Java/Android