南順網絡
Vue項目架構優化
最初的(de)版本
目錄結構
├── src // 生産目錄 │ ├── api // axios操作 │ ├── components // 組件 │ │ ├── common // 公共組件 │ │ ├── admin // 用戶組件 │ │ └── seller // 商家組件 │ ├── router // 路由 │ ├── store // vuex狀态管理(lǐ)器 │ ├── App.vue // 首頁 │ └── main.js // Webpack 預編譯入口 複制代碼
代碼邏輯
很簡單先訪問App.vue，根據路由映射不同組件渲染頁面，每個頁面都有ajax請求
ajax請求長(cháng)這樣
getUserInfo: function() {
this.axios.get('user/infor')
.then(res => {
if (res.data.status) {
this.user = res.data.data;
}
})
.catch(error => {
console.log(error);
}); }, 複制代碼前端第一(yī)次重構
2018 4月21日
目錄結構
├── src // 生産目錄 │ ├── api // axios操作 │ ├── components // 組件 │ ├── router // 路由 │ ├── store // vuex狀态管理(lǐ)器 │ ├── App.vue // 首頁 │ └── main.js // Webpack 預編譯入口 複制代碼
沒錯隻是将ajax請求都集中到了api目錄下 api目錄下的(de)index.js文件
import axios from 'axios';
import store from '../store';
let httpURL = "http://www.xuguobin.club/api/elm/" //這是我服務器的(de)api接口
let localURL = 'http://localhost/api/elm/'; //這是本地(dì)koa2的(de)api接口
axios.defaults.baseURL = localURL; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
export default {
//獲取用戶信息
getUser() {
return axios.get('user/infor');
},
//獲取訂單
getOrders(orderType) {
return axios.get('user/order?type=' + orderType);
},
//提交訂單
submitOrder(order) {
return axios.get('user/submit?order=' + order);
},
//确認收貨
confirmOrder(orderId) {
return axios.get('user/confirm?orderId=' + orderId);
},
//提交評價
submitRating(rating) {
return axios.get('user/rating?rating=' + rating);
},
//用戶登錄
userLogin(user) {
return axios.post('user/login',`username=${user.username}&password=${user.password}`);
}, }; 複制代碼這樣子(zǐ)做(zuò)，很好的(de)将axios請求與vue頁面解耦和(hé)了！ 現在ajax請求長(cháng)這樣
getUserInfo: function() {
this.api.getUser()
.then(res => {
if (res.data.status) {
this.user = res.data.data;
}
})
.catch(error => {
console.log(error);
}); }, 複制代碼前端第二次重構
目錄結構
講道(dào)理(lǐ)這次重構的(de)有點過分
├── src // 生産目錄 │ └── axios // axios操作 | ├──base // axios模闆 | | ├──base.js //axios基類 | | └──setting.js //狀态碼 | └── user | ├──cache.js //請求函數 | └──config.js //配置信息 | | ├── base //vue模闆 │ ├── components // 組件 | | ├──common //公共組件 | | └──admin | | ├── ui.vue // 輸出組件 | | ├── component.html // template | | ├── component.js // script | | └── component.less // style | | │ ├── router // 路由 │ ├── store // vuex狀态管理(lǐ)器 │ ├── App.vue // 首頁 │ └── main.js // Webpack 預編譯入口 複制代碼
第一(yī)次的(de)重構雖然已經将axios請求和(hé)頁面分離(lí)開來了，但是每次請求後都要驗證狀态碼，處理(lǐ)錯誤信息。
其實這完全沒有必要每個頁面都來一(yī)下，這些公共操作可(kě)以一(yī)起放在axios的(de)基類
import axios from 'axios'
import setting from './setting' let httpURL = "http://www.xuguobin.club/api/elm/" //這是我服務器的(de)api接口
let localURL = 'http://localhost/api/elm/'; //這是本地(dì)koa2的(de)api接口
axios.defaults.baseURL = httpURL;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
export default class AxiosCache {
constructor() {
this.__config = {} this.__setting = setting; this.init();
} init() { this.doFlushSetting(CACHE_KEY, )
} doFlushSetting(key, conf) {
if (!key && typeof key !== 'string') { return } this.__config[key] = conf
} /*判斷狀态碼*/ resultJudge(code) {
return code } /*發送請求數據*/ sendRequest(key, options) {
let send = this.__config[this.settingKey][key];
let self = this;
let baseURL = send.url;
send.method == 'get' ? options.data && (send.url += options.data) :
send.data = options.data axios(send) .then(function (response) {
send.url = baseURL; if (self.resultJudge(response.data.status)) {
options.success(response.data.data)
} else { options.fail ? options.fail(response.data.data) : self.handleErrorCase(response.data.status)
} }).catch(function (error) { self.handleErrorCase(error) })
} /*處理(lǐ)錯誤信息*/ handleErrorCase(error) {
if (typeof error == 'Number') { console.log(error) } else { alert(error) } } } 複制代碼而發送請求的(de)時候，隻需要這樣
getUSer: function() {
this.userCache.getUser({
success: res => this.user = res
}) }, 複制代碼是不是很簡潔。這樣做(zuò)，又進一(yī)步的(de)解耦了axios操作，你可(kě)以對比我github上的(de)elm1和(hé)elm2兩個版本結構，一(yī)定會有所收獲。
前端的(de)架構追求就是盡量 完美複用和(hé)解耦
編輯:--史志成
