Vue項目架構優化

時間  2019-12-05
標籤 vue 項目 架構 優化 欄目 系統架構 简体版
原文   原文鏈接

寫在前面

這篇博客我將爲你介紹vue的架構思想，固然這只是我根據遇到的項目總結的vue架構，這是我發現的一個小三輪，若是你有好的架構也歡迎指教哦。html

好了，咱們開始聊吧！前端

以我手擼的一個小項目 低配餓了麼外賣平臺 爲例：線上演示地址vue

2019.4.14 最近一次重構git地址ios

最初的版本

目錄結構

├── src                // 生產目錄
│   ├── api            // axios操做
│   ├── components     // 組件 
│   │		├── common  // 公共組件
│   │		├── admin   // 用戶組件
│   │		└── seller  // 商家組件  		
│   ├── router         // 路由
│   ├── store          // vuex狀態管理器
│	├── App.vue        // 首頁
│   └── main.js        // Webpack 預編譯入口 
複製代碼

代碼邏輯

很簡單先訪問App.vue，根據路由映射不一樣組件渲染頁面，每一個頁面都有ajax請求git

ajax請求長這樣github

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 Github地址：elm1.0ajax

目錄結構

├── src                // 生產目錄
│   ├── api            // axios操做
│   ├── components     // 組件 
│   ├── router         // 路由
│   ├── store          // vuex狀態管理器
│	├── App.vue        // 首頁
│   └── main.js        // Webpack 預編譯入口
複製代碼

沒錯只是將ajax請求都集中到了api目錄下 api目錄下的index.js文件vuex

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請求長這樣axios

getUserInfo: function() {
    this.api.getUser()
    .then(res => {
        if (res.data.status) {
            this.user = res.data.data;
        }
    })
    .catch(error => {
        console.log(error);
    });
},
複製代碼

前端第二次重構

2018.7.8 Github地址：elm2.0api

目錄結構

講道理此次重構的有點過度

├── 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兩個版本結構，必定會有所收穫。

前端的架構追求就是儘可能 完美複用和解耦

前端第三次重構

2019.4.14 Github地址：elm3.0

可能並無優化多少，可是提供一個思路

elm2版本中的axios處理邏輯是：封裝一個AxiosCache的基類，裏面有一些共用的方法，其餘axios對象則繼承這個基類，在各自頁面中進行實例化，若是這個頁面須要請求用戶相關接口則實例化一個UserCache，可若是另外一個頁面也有用到則再實例化一個UserCache，重複的實例化讓我以爲性能上的浪費。因此我想到了另一種不使用類繼承和實例化的axios的結構

elm3版本結構以下

├── axios           // axios操做
|         ├──index.js   // axios配置表
|         ├──base       // axios公共部分
|         |    ├──index.js     //axios公共方法
|         |    └──setting.js  //狀態碼
|         └── user
|               ├──cache.js     //請求函數
|               └──config.js    //配置信息
複製代碼

elm3版本中的axios處理邏輯是這樣的：在axios目錄下的index.js中引入各Cache的配置信息和狀態碼構成一個配置表

// 引入狀態碼錶
import setting from './base/setting'
// 引入config配置表
import userConfig from './user/config';
import goodConfig from './good/config';
import sellerConfig from './seller/config';

export default {
    __setting: setting,
    __config:  {
        'user_cache_key': userConfig,
        'good_cache_key': goodConfig,
        'seller_cache_key': sellerConfig
    }
}

複製代碼

將這個配置表導入賦值給Vue（main.js）：

import axios from '@/axios' 
Vue.$axios = axios;
複製代碼

而base目錄下的index.js中只保留公共方法 （這裏我使用了Promise）

import axios from 'axios'
import Vue from 'vue'

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';

// 判斷狀態碼
function resultJudge(code) {
	return code
}
// 處理錯誤公共方法
function handleErrorCase(error) {
	if (typeof error == 'Number') {
		console.log(error)
	} else {
		alert(error)
	}
}
// 發送請求
export default function sendRequest(settingKey, key, data) {
	let send = Vue.$axios.__config[settingKey][key];
	let baseURL = send.url;
	send.method == 'get'
		? data && (send.url += data)
		: send.data = data;
	return new Promise((resolve,reject) => {
		axios(send)
		.then((res)=>{
			send.url = baseURL;
			resultJudge(res.data.status) ? resolve(res.data.data) : reject(res.data.data);
		}).catch((err)=>{
			handleErrorCase(err)
		});
	});
}
複製代碼

而在其餘的Cache頁面的請求函數

import sendRequest from '../base';
const CACHE_KEY = 'good_cache_key'

export default {
	getGood(options) {
		return sendRequest(CACHE_KEY, 'good-getGood',options);
	},
	getGoods(options) {
		return sendRequest(CACHE_KEY, 'good-getGoods',options);
	}
}
複製代碼

這樣作的好處是在頁面第一次加載時就制定好了一張ajax請求的信息表並存儲在Vue.$axios中，後期頁面使用時不需求實例化，直接按表索引就行了

前端第四次重構？

未完待續...... 你有好的架構也歡迎你fork個人master版本！ ^_^

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程