快捷導(dǎo)航

基于vue2框架的機(jī)器人自動(dòng)回復(fù)mini-project實(shí)例代碼

更新時(shí)間：2017年06月13日 08:23:23 作者：大康子

本篇文章主要介紹了基于vue2框架的機(jī)器人自動(dòng)回復(fù)mini-project實(shí)例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下

這是一個(gè)mini-project，主要是基于vue2.0的一個(gè)移動(dòng)端的機(jī)器自動(dòng)回復(fù)小項(xiàng)目，下面是我的一個(gè)回顧總結(jié)https://github.com/xuweikang/rebotChat

1. 項(xiàng)目搭建

在開始該項(xiàng)目之前，使用vue-cli腳手架搭建整個(gè)projec

//安裝vue-cli
npm install vue-cli
//初始化項(xiàng)目 rebotChat是我的項(xiàng)目名稱
vue init webpack-simple rebotChat

這樣我的項(xiàng)目結(jié)構(gòu)就出來了，如下：

這里寫圖片描述

2. 模擬數(shù)據(jù)，命名為mockdata.json，該數(shù)據(jù)包括用戶基本信息數(shù)據(jù)和聊天記錄，以后所有的對(duì)話都是模擬在該mock基礎(chǔ)上的。

3. 在build/dev.server.js中加入對(duì)模擬數(shù)據(jù)的所有mock

//對(duì)所有的內(nèi)容數(shù)據(jù)進(jìn)行mock
let appData=require('../mockdata.json');
let dialogue=appData.dialogue;
//獲得聊天內(nèi)容 (如果聊天id參數(shù)不存在的話就獲取所有)
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
 })
}) 
//接入圖靈機(jī)器人接口
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. 創(chuàng)建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.到目前為止，整個(gè)項(xiàng)目的api接口都已經(jīng)封裝完畢，接下來是對(duì)各個(gè)組件的封裝和數(shù)據(jù)接口的調(diào)用，我使用的是vuex的組件通信管理，將mock的數(shù)據(jù)作為全局供每個(gè)組件使用和修改。

6.路由的配置，在路由中將所有組件進(jìn)行拼裝組合，正確的顯示在想要的頁(yè)面，至此，項(xiàng)目基本完成。npm run dev后，瀏覽器顯示效果：

這里寫圖片描述

總結(jié)：

該開始vue組件通信一塊，使用的是bus通信，發(fā)現(xiàn)到了后來代碼越來越臃腫，而且有很多莫名其妙的小bug，就停住了繼續(xù)的項(xiàng)目，在項(xiàng)目中加入了vuex，刪除已有的bus，對(duì)組件進(jìn)行了一次重新的規(guī)范，雖然重新規(guī)劃通信花掉了一點(diǎn)時(shí)間，但是確是大大降低了代碼的冗余，而且思路非常清晰，就覺得自己停止現(xiàn)有的方式去嘗試另一種方式來完成一個(gè)任務(wù)的選擇是正確的。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: