基于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)目名稱(chē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使用typescript后打包巨慢的問(wèn)題
這篇文章主要介紹了解決vue cli使用typescript后打包巨慢的問(wèn)題,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09Vue設(shè)置別名聯(lián)想路徑即@/生效的方法
這篇文章主要給大家介紹了Vue設(shè)置別名聯(lián)想路徑即@/生效的方法,文中有詳細(xì)的代碼示例和圖文講解,具有一定的參考價(jià)值,需要的朋友可以參考下2023-11-11Vue實(shí)現(xiàn)大屏頁(yè)面的屏幕自適應(yīng)
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)大屏頁(yè)面的屏幕自適應(yīng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10elementui的table列超出隱藏tooltip懸浮顯示問(wèn)題
這篇文章主要介紹了elementui的table列超出隱藏tooltip懸浮顯示問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11Vue3實(shí)現(xiàn)自定義指令攔截點(diǎn)擊事件的示例代碼
某些應(yīng)用場(chǎng)景會(huì)給點(diǎn)擊事件添加權(quán)限,不存在權(quán)限就攔截點(diǎn)擊事件,有權(quán)限就繼續(xù)正常觸發(fā)點(diǎn)擊事件。這樣的效果是如何實(shí)現(xiàn)的呢,本文就來(lái)和大家詳細(xì)講講2023-02-02vue項(xiàng)目中jsonp跨域獲取qq音樂(lè)首頁(yè)推薦問(wèn)題
這篇文章主要介紹了vue項(xiàng)目中jsonp跨域獲取qq音樂(lè)首頁(yè)推薦問(wèn)題,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-05-05