这是一个小型项目,主要是基于vue2.0的一个移动端的机器自动回复小项目,下面是我的一个回顾总结https://github.com/xuweikang/rebotChat
<强> 1。项目搭建
在开始该项目之前,使用vue-cli脚手架搭建整个projec
//安装vue-cli
npm安装vue-cli//初始化项目rebotChat是我的项目名称
vue init webpack-simple rebotChat
这样我的项目结构就出来了,如下:
2。模拟数据,命名为mockdata.json,该数据包括用户基本信息数据和聊天记录,以后所有的对话都是模拟在该模拟基础上的。
3。在构建/dev.server.js中加入对模拟数据的所有mock
//对所有的内容数据进行模拟
让appData=https://www.yisu.com/zixun/require (“. ./mockdata.json”);
让对话=appData.dialogue;//获得聊天内容(如果聊天id参数不存在的话就获取所有)
路由器。get('/对话”(点播,res)=比;{
如果(req.query.id) {
我(var=0; i< dialogue.length;我+ +){
如果对话(req.query.id==[我].id) {
res.json ({
数据:对话[我]
})
}
}
其他}{
res.json ({
数据:appData.dialogue
})
}
})//获得用户信息
路由器。得到('/user '(点播,res)=比;{
res.json ({
数据:appData.user
})
})//接入图灵机器人接口
路由器。get ('/tulingapi '(点播,res)=比;{
让反应=res
让信息=req.query.message
让用户id=req.query.id
让关键=' 9857 cf36b0bc4a48b8ba3f976e43a4cf '
superagent.post (“http://www.tuling123.com/openapi/api”)
.send({信息、用户标识、关键})
指标(最终(呃,res)=比;{
如果(err) {
console.log (err)
}
response.json ({
数据:res.text
})
})
})
之前
4。创建api文件夹,将所有用到api的接口全部在api的js里面定义
从“进口axios axios ';
var qs=要求(“qs”);
var=axios.create({实例
标题:{“内容类型”:“应用程序/x-www-form-urlencoded”}
});
让基地=' http://localhost: 8080/api/';//导出const requestLogin=params=比;{axios返回。邮报》(“${基地}/登录”,params)。然后(res=比;res.data);};
出口const getDialog=params=比;{返回实例。get(基础+/对话,{参数:参数});};
出口const getUser=params=比;{返回实例。get(基础+/user,{参数:参数});};
出口const getRebotContent=params=比;{返回instance.get (http://www.tuling123.com/openapi/api,{参数:参数});}
之前
5。到目前为止,整个项目的api接口都已经封装完毕,接下来是对各个组件的封装和数据接口的调用,我使用的是vuex的组件通信管理,将模拟的数据作为全局供每个组件使用和修改。
6。路由的配置,在路由中将所有组件进行拼装组合,正确的显示在想要的页面,至此,项目基本完成.npm dev后运行,浏览器显示效果:
该开始vue组件通信一块,使用的是总线通信,发现到了后来代码越来越臃肿,而且有很多莫名其妙的小错误,就停住了继续的项目,在项目中加入了vuex,删除已有的总线,对组件进行了一次重新的规范,虽然重新规划通信花掉了一点时间,但是确是大大降低了代码的冗余,而且思路非常清晰,就觉得自己停止现有的方式去尝试另一种方式来完成一个任务的选择是正确的。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
