基于vue2框架的机器人自动回复mini

基于vue2框架的机器人自动回复mini

这是一个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，该数据包括用户基本http://信息数据和聊天记录，以后所有的对话都是模拟在该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

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://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(bVMVQPArLDiase+'/dialogue',{ params: params }); };

export const getUser= params => { return instance.get(base+'/user',{ params: params }); };

export const getRebotContent = params => { return instance.get('http://tuling123.com/openapi/api',{ params: params }); }

5.到目前为止，整个项目的api接口都已经封http://装完毕，接下来是对各个组件的封装和数据接口的调用，我使用的是vuex的组件通信管理，将mock的数据作为全局供每个组件使用和修改。

6.路由的配置，在路由中将所有组件进行拼装组合，正确的显示在想要的页面，至此，项目基本完成。npm run dev后，浏览器显示效果：

总结：

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://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(bVMVQPArLDiase+'/dialogue',{ params: params }); };

export const getUser= params => { return instance.get(base+'/user',{ params: params }); };

export const getRebotContent = params => { return instance.get('http://tuling123.com/openapi/api',{ params: params }); }

5.到目前为止，整个项目的api接口都已经封http://装完毕，接下来是对各个组件的封装和数据接口的调用，我使用的是vuex的组件通信管理，将mock的数据作为全局供每个组件使用和修改。

6.路由的配置，在路由中将所有组件进行拼装组合，正确的显示在想要的页面，至此，项目基本完成。npm run dev后，浏览器显示效果：

总结：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。