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

 更新时间:2017年06月13日 08:23:23   作者:大康子  
本篇文章主要介绍了基于vue2框架的机器人自动回复mini-project实例代码,具有一定的参考价值,有兴趣的可以了解一下

这是一个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,该数据包括用户基本信息数据和聊天记录,以后所有的对话都是模拟在该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后,浏览器显示效果:

这里写图片描述 

这里写图片描述

总结:

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

相关文章

  • 详解vue-cli中的ESlint配置文件eslintrc.js

    详解vue-cli中的ESlint配置文件eslintrc.js

    本篇文章主要介绍了vue-cli中的ESlint配置文件eslintrc.js详解 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 10个Vue3中常用的组合式 API用法详解

    10个Vue3中常用的组合式 API用法详解

    通过Vue 3,组合式API增强了我们利用Vue的能力,使我们的代码更具模块性和可读性,本文主要来和大家分享10个常用的Vue3组合式API,希望对大家有所帮助
    2024-01-01
  • ant-design-vue导航菜单a-menu的使用解读

    ant-design-vue导航菜单a-menu的使用解读

    这篇文章主要介绍了ant-design-vue导航菜单a-menu的使用解读,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • 使用vue-cli脚手架工具搭建vue-webpack项目

    使用vue-cli脚手架工具搭建vue-webpack项目

    这篇文章主要介绍了使用vue-cli脚手架工具搭建vue-webpack项目,通过几个默认的步骤帮助你快速的构建Vue.js项目。非常具有实用价值,需要的朋友可以参考下
    2019-01-01
  • 在Vuex中Mutations修改状态操作

    在Vuex中Mutations修改状态操作

    这篇文章主要介绍了在Vuex中Mutations修改状态操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue自动构建发布脚本的方法示例

    Vue自动构建发布脚本的方法示例

    这篇文章主要介绍了Vue自动构建发布脚本的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • vue form表单使用resetFields函数出现的问题

    vue form表单使用resetFields函数出现的问题

    这篇文章主要介绍了vue form表单使用resetFields函数出现的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • 分享Vue组件传值的几种常用方式(一)

    分享Vue组件传值的几种常用方式(一)

    这篇文章主要给大家分享的是Vue组件传值的几种常用方式,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的朋友可以参考一下
    2022-09-09
  • element上传文件对格式限制的处理方案

    element上传文件对格式限制的处理方案

    最近做项目遇到这样的需求,需要上传的文件格式必须是pdf格式,方便我们查看,本文给大家分享element上传文件对格式限制的处理方案,感兴趣的朋友一起看看吧
    2024-02-02
  • 一文带你搞懂Vue中i18n的使用方法

    一文带你搞懂Vue中i18n的使用方法

    i18n是"国际化"的简称,它的主要目的是让应用程序能够适应不同的语言和地区的需求,下面就跟随小编一起来看看Vue中i18n的具体使用方法吧
    2025-01-01

最新评论