您當前位置: 南順網絡>> 官方資訊>> 建站知識

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兩個版本結構,一定會有所收獲。

前端的架構追求就是盡量 完美復用和解耦



編輯:--史志成

龙王捕鱼上分期下分期