基于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 相关文章推荐
JS上传前预览图片实例
Mar 25 Javascript
js实现select下拉框菜单
Dec 08 Javascript
Bootstrap每天必学之导航条(二)
Mar 01 Javascript
如何消除inline-block属性带来的标签间间隙
Mar 31 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
May 26 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
May 27 Javascript
通过js动态创建标签,并设置属性方法
Feb 24 Javascript
es6新特性之 class 基本用法解析
May 05 Javascript
当vue路由变化时,改变导航栏的样式方法
Aug 22 Javascript
新版小程序登录授权的方法
Dec 12 Javascript
javascript操作向表格中动态加载数据
Aug 27 Javascript
vue实现Toast组件轻提示
Apr 10 Vue.js
深究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
php 伪静态之IIS篇
2014/06/02 PHP
php操作redis中的hash和zset类型数据的方法和代码例子
2014/07/05 PHP
[原创]php常用字符串输出方法分析(echo,print,printf及sprintf)
2016/07/09 PHP
PHP实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
JS在IE和FF下attachEvent,addEventListener学习笔记
2009/11/26 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
jquery实现多级下拉菜单的实例代码
2013/10/02 Javascript
深入理解JavaScript是如何实现继承的
2013/12/12 Javascript
vue2.0父子组件间通信的实现方法
2017/04/19 Javascript
js时间戳与日期格式之间转换详解
2017/12/11 Javascript
原生JS进行前后端同构
2018/04/22 Javascript
VUE 全局变量的几种实现方式
2018/08/22 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
Vuex 单状态库与多模块状态库详解
2018/12/11 Javascript
JavaScript函数定义方法实例详解
2019/03/05 Javascript
js抽奖转盘实现方法分析
2020/05/16 Javascript
[46:43]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第三局
2016/02/28 DOTA
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
Python实现在线音乐播放器
2017/03/03 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
python文件处理fileinput使用方法详解
2020/01/02 Python
基于python实现文件加密功能
2020/01/06 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
解决Python logging模块无法正常输出日志的问题
2020/02/21 Python
Python多个装饰器的调用顺序实例解析
2020/05/22 Python
手把手教你将Flask应用封装成Docker服务的实现
2020/08/19 Python
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
幼儿园中秋节活动方案
2014/02/06 职场文书
购房协议书
2014/04/11 职场文书
出差报告怎么写
2014/11/06 职场文书
2015年全民国防教育日活动总结
2015/03/23 职场文书
NodeJs使用webpack打包项目的方法详解
2022/02/28 NodeJs
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android
Win11怎么把合并的任务栏分开 Win11任务栏合并分开教程
2022/04/06 数码科技
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js