基于vue2框架的机器人自动回复mini-project实例代码


Posted in Javascript onJune 13, 2017

这是一个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

这样我的项目结构就出来了,如下:

基于vue2框架的机器人自动回复mini-project实例代码

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后,浏览器显示效果:

基于vue2框架的机器人自动回复mini-project实例代码 

基于vue2框架的机器人自动回复mini-project实例代码

总结:

该开始vue组件通信一块,使用的是bus通信,发现到了后来代码越来越臃肿,而且有很多莫名其妙的小bug,就停住了继续的项目,在项目中加入了vuex,删除已有的bus,对组件进行了一次重新的规范,虽然重新规划通信花掉了一点时间,但是确是大大降低了代码的冗余,而且思路非常清晰,就觉得自己停止现有的方式去尝试另一种方式来完成一个任务的选择是正确的。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何简单地用YUI做JavaScript动画
Mar 10 Javascript
js移除事件 js绑定事件实例应用
Nov 28 Javascript
浅析return false的正确使用
Nov 04 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
Jun 09 Javascript
javascript中parseInt()函数的定义和用法分析
Dec 20 Javascript
分享10个优化代码的CSS和JavaScript工具
May 11 Javascript
Jil,高效的json序列化和反序列化库
Feb 15 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
Jun 12 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
Aug 17 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
React组件重构之嵌套+继承及高阶组件详解
Jul 19 Javascript
vue中监听返回键问题
Aug 28 Javascript
深究AngularJS中ng-drag、ng-drop的用法
Jun 12 #Javascript
深究AngularJS中$sce的使用
Jun 12 #Javascript
JS身份证信息验证正则表达式
Jun 12 #Javascript
用原生JS实现简单的多选框功能
Jun 12 #Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
Jun 12 #Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
Jun 12 #Javascript
AngularJS 异步解决实现方法
Jun 12 #Javascript
You might like
模仿OSO的论坛(二)
2006/10/09 PHP
php获得url参数中具有&amp;的值的方法
2014/03/05 PHP
PHP使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
php构造函数的继承方法
2015/02/09 PHP
PHP面向对象程序设计之命名空间与自动加载类详解
2016/12/02 PHP
在PHP中实现使用Guzzle执行POST和GET请求
2019/10/15 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
js 页面传参数时 参数值含特殊字符的问题
2009/12/13 Javascript
js跑步算法的实现代码
2013/12/04 Javascript
js匿名函数的调用示例(形式多种多样)
2014/08/20 Javascript
bootstrap multiselect 多选功能实现方法
2017/06/05 Javascript
easyui下拉框动态级联加载的示例代码
2017/11/29 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
详解vue-cli脚手架中webpack配置方法
2018/08/22 Javascript
js抽奖转盘实现方法分析
2020/05/16 Javascript
[02:20]2014DOTA2西雅图邀请赛 MVP外卡赛首胜采访
2014/07/09 DOTA
python BeautifulSoup使用方法详解
2013/11/21 Python
wxPython中文教程入门实例
2014/06/09 Python
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
django将数组传递给前台模板的方法
2019/08/06 Python
解决Django 在ForeignKey中出现 non-nullable field错误的问题
2019/08/06 Python
python3 图片 4通道转成3通道 1通道转成3通道 图片压缩实例
2019/12/03 Python
Pytorch中Tensor与各种图像格式的相互转化详解
2019/12/26 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
html5文本内容_动力节点Java学院整理
2017/07/11 HTML / CSS
详解HTML5中CSS外观属性
2020/09/10 HTML / CSS
科颜氏加拿大官方网站: Kiehl’s加拿大
2016/08/16 全球购物
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
美国NBA官方商店:NBA Store
2019/04/12 全球购物
学生干部的自我评价分享
2014/01/18 职场文书
旅游市场营销方案
2014/03/09 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
卫生主题班会
2015/08/14 职场文书
go语言map与string的相互转换的实现
2021/04/07 Golang