基于vue2框架的機(jī)器人自動(dòng)回復(fù)mini-project實(shí)例代碼
這是一個(gè)mini-project,主要是基于vue2.0的一個(gè)移動(dòng)端的機(jī)器自動(dòng)回復(fù)小項(xiàng)目,下面是我的一個(gè)回顧總結(jié)https://github.com/xuweikang/rebotChat
1. 項(xiàng)目搭建
在開(kāi)始該項(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)就出來(lái)了,如下:

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)封裝完畢,接下來(lái)是對(duì)各個(gè)組件的封裝和數(shù)據(jù)接口的調(diào)用,我使用的是vuex的組件通信管理,將mock的數(shù)據(jù)作為全局供每個(gè)組件使用和修改。
6.路由的配置,在路由中將所有組件進(jìn)行拼裝組合,正確的顯示在想要的頁(yè)面,至此,項(xiàng)目基本完成。npm run dev后,瀏覽器顯示效果:

總結(jié):
該開(kāi)始vue組件通信一塊,使用的是bus通信,發(fā)現(xiàn)到了后來(lái)代碼越來(lái)越臃腫,而且有很多莫名其妙的小bug,就停住了繼續(xù)的項(xiàng)目,在項(xiàng)目中加入了vuex,刪除已有的bus,對(duì)組件進(jìn)行了一次重新的規(guī)范,雖然重新規(guī)劃通信花掉了一點(diǎn)時(shí)間,但是確是大大降低了代碼的冗余,而且思路非常清晰,就覺(jué)得自己停止現(xiàn)有的方式去嘗試另一種方式來(lái)完成一個(gè)任務(wù)的選擇是正確的。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解vue-cli中的ESlint配置文件eslintrc.js
本篇文章主要介紹了vue-cli中的ESlint配置文件eslintrc.js詳解 ,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
ant-design-vue導(dǎo)航菜單a-menu的使用解讀
這篇文章主要介紹了ant-design-vue導(dǎo)航菜單a-menu的使用解讀,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10
使用vue-cli腳手架工具搭建vue-webpack項(xiàng)目
這篇文章主要介紹了使用vue-cli腳手架工具搭建vue-webpack項(xiàng)目,通過(guò)幾個(gè)默認(rèn)的步驟幫助你快速的構(gòu)建Vue.js項(xiàng)目。非常具有實(shí)用價(jià)值,需要的朋友可以參考下2019-01-01
Vue自動(dòng)構(gòu)建發(fā)布腳本的方法示例
這篇文章主要介紹了Vue自動(dòng)構(gòu)建發(fā)布腳本的方法示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
vue form表單使用resetFields函數(shù)出現(xiàn)的問(wèn)題
這篇文章主要介紹了vue form表單使用resetFields函數(shù)出現(xiàn)的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05

