南順網絡
Vue項目架構優化
最初的版本
目錄結構
├── src // 生產目錄 │ ├── api // axios操作 │ ├── components // 組件 │ │ ├── common // 公共組件 │ │ ├── admin // 用戶組件 │ │ └── seller // 商家組件 │ ├── router // 路由 │ ├── store // vuex狀態管理器 │ ├── App.vue // 首頁 │ └── main.js // Webpack 預編譯入口 復制代碼
代碼邏輯
很簡單先訪問App.vue，根據路由映射不同組件渲染頁面，每個頁面都有ajax請求
ajax請求長這樣
getUserInfo: function() {
this.axios.get('user/infor')
.then(res => {
if (res.data.status) {
this.user = res.data.data;
}
})
.catch(error => {
console.log(error);
}); }, 復制代碼前端第一次重構
2018 4月21日
目錄結構
├── src // 生產目錄 │ ├── api // axios操作 │ ├── components // 組件 │ ├── router // 路由 │ ├── store // vuex狀態管理器 │ ├── App.vue // 首頁 │ └── main.js // Webpack 預編譯入口 復制代碼
沒錯只是將ajax請求都集中到了api目錄下 api目錄下的index.js文件
import axios from 'axios';
import store from '../store';
let httpURL = "http://www.xuguobin.club/api/elm/" //這是我服務器的api接口
let localURL = 'http://localhost/api/elm/'; //這是本地koa2的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}`);
}, }; 復制代碼這樣子做，很好的將axios請求與vue頁面解耦和了！ 現在ajax請求長這樣
getUserInfo: function() {
this.api.getUser()
.then(res => {
if (res.data.status) {
this.user = res.data.data;
}
})
.catch(error => {
console.log(error);
}); }, 復制代碼前端第二次重構
目錄結構
講道理這次重構的有點過分
├── 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狀態管理器 │ ├── App.vue // 首頁 │ └── main.js // Webpack 預編譯入口 復制代碼
第一次的重構雖然已經將axios請求和頁面分離開來了，但是每次請求后都要驗證狀態碼，處理錯誤信息。
其實這完全沒有必要每個頁面都來一下，這些公共操作可以一起放在axios的基類
import axios from 'axios'
import setting from './setting' let httpURL = "http://www.xuguobin.club/api/elm/" //這是我服務器的api接口
let localURL = 'http://localhost/api/elm/'; //這是本地koa2的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) })
} /*處理錯誤信息*/ handleErrorCase(error) {
if (typeof error == 'Number') { console.log(error) } else { alert(error) } } } 復制代碼而發送請求的時候，只需要這樣
getUSer: function() {
this.userCache.getUser({
success: res => this.user = res
}) }, 復制代碼是不是很簡潔。這樣做，又進一步的解耦了axios操作，你可以對比我github上的elm1和elm2兩個版本結構，一定會有所收獲。
前端的架構追求就是盡量 完美復用和解耦
編輯:--史志成
