您当前位置: 南顺网络>> 官方资讯>> 建站知识

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两个版本结构,一定会有所收获。

前端的架构追求就是尽量 完美复用和解耦



编辑:--史志成

填写您的服务需求,项目经理一对一为您服务!