基于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 相关文章推荐
获取body标签的两种方法
Oct 13 Javascript
jQuery事件绑定.on()简要概述及应用
Feb 07 Javascript
JavaScript设计模式之单件模式介绍
Dec 28 Javascript
jQuery中 delegate使用的问题
Jul 03 Javascript
JavaScript中的闭包
Feb 24 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
Feb 04 Javascript
详细AngularJs4的图片剪裁组件的实例
Jul 12 Javascript
在HTML文档中嵌入JavaScript的四种方法
May 07 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
Jul 25 Javascript
基于webpack4+vue-cli3项目实现换肤功能
Jul 17 Javascript
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
design vue 表格开启列排序的操作
Oct 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
php cli 方式 在crotab中运行解决
2010/02/08 PHP
PHP OPCode缓存 APC详细介绍
2010/10/12 PHP
php设计模式 FlyWeight (享元模式)
2011/06/26 PHP
php站内搜索并高亮显示关键字的实现代码
2011/12/29 PHP
PHP中cookie和session的区别实例分析
2014/08/28 PHP
php生成数字字母的验证码图片
2015/07/14 PHP
JavaScript 字符串处理函数使用小结
2010/12/02 Javascript
JS 无限级 Select效果实现代码(json格式)
2011/08/30 Javascript
JavaScript数字和字符串转换示例
2014/03/26 Javascript
JavaScript文本框脚本编写的注意事项
2016/01/25 Javascript
深入浅析JavaScript中的scrollTop
2016/07/11 Javascript
js select下拉联动 更具级联性!
2020/04/17 Javascript
彻底学会Angular.js中的transclusion
2017/03/12 Javascript
Vue.js常用指令之循环使用v-for指令教程
2017/06/27 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
2017/07/09 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
vue实现下拉菜单树
2020/10/22 Javascript
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
Python 切分数组实例解析
2019/11/07 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
Python中常用的高阶函数实例详解
2020/02/21 Python
Python SMTP发送电子邮件的示例
2020/09/23 Python
error和exception有什么区别
2012/10/02 面试题
专科毕业生自我鉴定
2013/12/01 职场文书
餐厅考勤管理制度
2014/01/28 职场文书
《分一分》教学反思
2014/04/13 职场文书
防灾减灾标语
2014/10/07 职场文书
服务明星事迹材料
2014/12/29 职场文书
丧事答谢词
2015/01/05 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
调研报告的主要写法
2019/04/18 职场文书
OpenCV-Python实现轮廓的特征值
2021/06/09 Python
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL