基于vue2框架的机器人自动回复mini-project实例代码
时间：2020-10-11 10:46:39|栏目：vue|点击： 次
这是一个mini-project，主要是基于vue2.0的一个移动端的机器自动回复小项目，下面是我的一个回顾总结https://github.com/xuweikang/rebotChat
1. 项目搭建
在开始该项目之前，使用vue-cli脚手架搭建整个projec
//安装vue-cli npm install vue-cli //初始化项目 rebotChat是我的项目名称 vue init webpack-simple rebotChat
这样我的项目结构就出来了，如下：
2. 模拟数据，命名为mockdata.json，该数据包括用户基本信息数据和聊天记录，以后所有的对话都是模拟在该mock基础上的。
3. 在build/dev.server.js中加入对模拟数据的所有mock
//对所有的内容数据进行mock
let appData=require('../mockdata.json');
let dialogue=appData.dialogue;
//获得聊天内容 (如果聊天id参数不存在的话就获取所有)
router.get('/dialogue', (req, res) => {
if(req.query.id){
for(var i=0;i<dialogue.length;i++){
if(req.query.id==dialogue[i].id){
res.json({
data:dialogue[i]
})
}
}
}else{
res.json({
data:appData.dialogue
})
}
})
//获得用户信息
router.get('/user', (req, res) => {
res.json({
data:appData.user
})
})
//接入图灵机器人接口
router.get('/tulingapi', (req, res) => {
let response=res
let info = req.query.message
let userid = req.query.id
let key = '9857cf36b0bc4a48b8ba3f976e43a4cf'
superagent.post('http://www.tuling123.com/openapi/api')
.send({info, userid, key})
.end((err,res) => {
if(err){
console.log(err)
}
response.json({
data: res.text
})
})
})
4. 创建api文件夹，将所有用到的api接口全部在api的js里面定义
import axios from 'axios';
var qs = require('qs');
var instance = axios.create({
headers: {'content-type': 'application/x-www-form-urlencoded'}
});
let base = 'http://localhost:8080/api/';
//export const requestLogin = params => { return axios.post(`${base}/login`, params).then(res => res.data); };
export const getDialog = params => { return instance.get(base+'/dialogue',{ params: params }); };
export const getUser= params => { return instance.get(base+'/user',{ params: params }); };
export const getRebotContent = params => { return instance.get('http://www.tuling123.com/openapi/api',{ params: params }); }
5.到目前为止，整个项目的api接口都已经封装完毕，接下来是对各个组件的封装和数据接口的调用，我使用的是vuex的组件通信管理，将mock的数据作为全局供每个组件使用和修改。
6.路由的配置，在路由中将所有组件进行拼装组合，正确的显示在想要的页面，至此，项目基本完成。npm run dev后，浏览器显示效果：
总结：
