用Vue实现小Q聊天机器人（二）

GitHub：https://github.com/baiyuliang/Qrobot_Vue

项目完整结构：

接下来，开始着手修改刚刚创建完成的项目！

打开main.js，引入相关插件，本项目的网络请求插件为axios，ui为vant。

关于axios的使用，第一种办法可以结合vue-axios使用：

import axios from "axios"
import VueAxios from 'vue-axios'Vue.use(VueAxios, axios.create({baseURL: 'http://xxx.xxx.xxx'
}))

在组件的methods中调用：

  this.$http.get('/api/xxx').then(res => {if (res.status === 200) {console.log(res.data)}})

第二种办法，也就是本项目所使用的的方法：对axios进行封装：

import axios from 'axios'const request = axios.create({baseURL: 'https://api.ai.qq.com/fcgi-bin/nlp/nlp_textchat',//腾讯闲聊apitimeout: 8000
})//request拦截
request.interceptors.request.use(config => {return config},error => {return Promise.reject(error)}
)//response拦截
request.interceptors.response.use(response => {console.log(response.data)const res = JSON.parse(response.data)console.log(res.ret)if (res.ret !== 0) {return Promise.reject(new Error(res.msg || 'Error'))} else {return res}},error => {return Promise.reject(error)}
)export default request

调用：

import request from "@/api/base/request";
function getChatResponse(text) {return request({url:'?text='+text,method: 'get'})
}

本项目是考虑到实际开发场景，因此将网络请求部分单独放在api文件夹下，且每个组件中的网络请求都会创建对用的ApiXXX.js，保证结构清晰！

vant则放在ui文件夹下的index.js引用！

main.js:

import Vue from 'vue'
import App from './App.vue'require('@/ui/index')Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')

网络和ui插件已经配置完成，接下来就是自定义组件以及布局的完成！

用React实现小Q聊天机器人
前几篇讲过用Vue实现小Q聊天机器人,既然用了Vue,那React自然也是少不了的,本项目实现效果与vue实现的效果完全一样: GitHub源码:https://github.com/baiyulia ...
用Flutter实现小Q聊天机器人（二）
用Flutter实现小Q聊天机器人(一) 用Flutter实现小Q聊天机器人(二) 用Flutter实现小Q聊天机器人(三) 用Flutter实现小Q聊天机器人(四) 用Flutter实现小Q聊天机器 ...
用Flutter实现小Q聊天机器人（四）
用Flutter实现小Q聊天机器人(一) 用Flutter实现小Q聊天机器人(二) 用Flutter实现小Q聊天机器人(三) 用Flutter实现小Q聊天机器人(四) 用Flutter实现小Q聊天机器 ...
用Flutter实现小Q聊天机器人（五）
用Flutter实现小Q聊天机器人(一) 用Flutter实现小Q聊天机器人(二) 用Flutter实现小Q聊天机器人(三) 用Flutter实现小Q聊天机器人(四) 用Flutter实现小Q聊天机器 ...
用Flutter实现小Q聊天机器人（三）
用Flutter实现小Q聊天机器人(一) 用Flutter实现小Q聊天机器人(二) 用Flutter实现小Q聊天机器人(三) 用Flutter实现小Q聊天机器人(四) 用Flutter实现小Q聊天机器 ...
NLP微信小程序聊天机器人
今天把两年前大二时候的小程序又拿来玩了一下,决定开源这个小项目一个NLP微信小程序聊天机器人,前端就一个页面,后端是php的,可以接图灵等等各种api,也可以自己写个python的接口做NLP算法测 ...
使用TensorFlow.js的AI聊天机器人二：训练Trivia Expert AI
目录设置TensorFlow.js代码 TriviaQA数据集单词嵌入和标记训练AI模型聊天机器人(Trivia Chatbot)在行动终点线下一步是什么? 下载项目文件-9.9 MB T ...
自己动手做聊天机器人二十九-重磅：近1GB的三千万聊天语料供出
Reference: http://www.shareditor.com/blogshow/?blogId=112 经过半个月的倾力打造,建设好的聊天语料库包含三千多万条简体中文高质量聊天语料,近1G ...
QQ 聊天机器人小薇 2.1.0 发布！
本次发布加入了支持茉莉机器人,并且更容易搭建开发环境,在线显示登录二维码~ 简介 XiaoV(小薇)是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动: 监听多个 QQ 群消息 ...

用Vue实现小Q聊天机器人（二）

用Vue实现小Q聊天机器人（二）相关推荐

最新文章

热门文章