這是一個mini-project，主要是基于vue2.0的一個移動端的機器自動回復(fù)小項目，下面是我的一個回顧總結(jié)https://github.com/xuweikang/rebotChat
成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),五龍口企業(yè)網(wǎng)站建設(shè),五龍口品牌網(wǎng)站建設(shè),網(wǎng)站定制,五龍口網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,五龍口網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。
1. 項目搭建
在開始該項目之前，使用vue-cli腳手架搭建整個projec
//安裝vue-cli npm install vue-cli //初始化項目 rebotChat是我的項目名稱 vue init webpack-simple rebotChat
這樣我的項目結(jié)構(gòu)就出來了，如下：
2. 模擬數(shù)據(jù)，命名為mockdata.json，該數(shù)據(jù)包括用戶基本信息數(shù)據(jù)和聊天記錄，以后所有的對話都是模擬在該mock基礎(chǔ)上的。
3. 在build/dev.server.js中加入對模擬數(shù)據(jù)的所有mock
重慶分公司
重慶分公司
//對所有的內(nèi)容數(shù)據(jù)進行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 {
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. 創(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.到目前為止，整個項目的api接口都已經(jīng)封裝完畢，接下來是對各個組件的封裝和數(shù)據(jù)接口的調(diào)用，我使用的是vuex的組件通信管理，將mock的數(shù)據(jù)作為全局供每個組件使用和修改。
6.路由的配置，在路由中將所有組件進行拼裝組合，正確的顯示在想要的頁面，至此，項目基本完成。npm run dev后，瀏覽器顯示效果：
總結(jié)：
該開始vue組件通信一塊，使用的是bus通信，發(fā)現(xiàn)到了后來代碼越來越臃腫，而且有很多莫名其妙的小bug，就停住了繼續(xù)的項目，在項目中加入了vuex，刪除已有的bus，對組件進行了一次重新的規(guī)范，雖然重新規(guī)劃通信花掉了一點時間，但是確是大大降低了代碼的冗余，而且思路非常清晰，就覺得自己停止現(xiàn)有的方式去嘗試另一種方式來完成一個任務(wù)的選擇是正確的。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
