Vue + webpack 項(xiàng)目配置化、接口請求統(tǒng)一管理

準(zhǔn)備工作

需求由來： 當(dāng)項(xiàng)目越來越大的時候提高項(xiàng)目運(yùn)行編譯速度、壓縮代碼體積、項(xiàng)目維護(hù)、bug修復(fù)......等等成為不得不考慮而且不得不做的問題。
又或者后面其他同事接手你的模塊，或者改你的bug時避免人家看的眼痛以及心里千百句mamaipi...問候。
并且一個好的開發(fā)思路也能大大提高開發(fā)效率，以及檢驗(yàn)自己。

進(jìn)入正題：
在本地用 vue-cli 新建一個項(xiàng)目，這個步驟參照vue的官網(wǎng)。
這里展示一下我的項(xiàng)目架構(gòu)目錄 這次主要講紅字具體實(shí)現(xiàn)部分

1、項(xiàng)目地圖

├── build                       // 項(xiàng)目build腳本
      ├── config                      // 項(xiàng)目配置目錄
      ├── dist                        // 項(xiàng)目輸出部署目錄，執(zhí)行 npm run build后生成
      ├── src                         // 生產(chǎn)目錄
      │   ├── assets                  // 靜態(tài)資源，包含圖片等
      │   ├── components              // 項(xiàng)目公用組件，例如Header、Footer組件等
      │   ├── mock                    // 接口mock文件目錄
      │       └── index.js            // mock接口集合文件
      │   ├── pages                   // 頁面目錄
      │   │   ├── Demo                // Demo模塊，必須用大寫開頭
      │   │   │   ├── components      // Demo模塊專用組件 組件建議全部首字母大寫
      │   │   │   ├── style           // Demo模塊專用css
      │   │   │   ├── services        // Demo模塊服務(wù)，可以包含相應(yīng)方法類
      │   │   │   ├── interface.js    // Demo模塊接口結(jié)合文件
      │   │   │   └── index.vue       // Demo模塊頁面入口
      │   │   └── Other               // 其他頁面目錄
      │   ├── router                  // 路由配置文件，如果路由太多了，可以拆分
      │   ├── services                // 項(xiàng)目公用配置服務(wù)
      │   │   │   ├── ajax.js         // 所有接口請求公共配置   可以和 request.js 合并一起 不嫌代碼太長的話
      │   │   │   ├── request.js      // (需求有則添加) 為所有接口設(shè)置公共請求頭
      │   │   │   ├── prompt.js       // 全局的提示  例如：接口錯誤提示、保存成功提示、操作錯誤提示等等...
      │   │   │   ├── validate.js     // 全局表單校驗(yàn)具體封裝可參照element-ui form表單模塊
      │   ├── App.vue                 // 組件入口
      │   ├── config.js               // 項(xiàng)目配置文件  例如：權(quán)限校驗(yàn)，cookie設(shè)置、access_token獲取等等...
      │   ├── interface.js            // 項(xiàng)目公共接口文件
      │   └── main.js                 // Webpack 預(yù)編譯主入口
      ├── style                       // 項(xiàng)目公用style
      ├── static                      // 靜態(tài)文件目錄，保留
      │   └── i18n                    // 國際化目錄，每一個目錄為一種語言
      │       ├── zh                  // 中文目錄
      │       │   └── index.json      // 配置文件
      │       └── en                  // 英文目錄
      ├── index.html                  // 項(xiàng)目入口文件，一般不用改動
      ├── package.json                // 項(xiàng)目配置
      ├── README.md                   // 項(xiàng)目說明
      ├── CHANGE_LOG.md               // 項(xiàng)目更新歷史文檔
      └── test                        // 測試目錄

2、services/aiax.js文件

/**
 * ajax 模塊，可以將 axios 替換成 $.ajax 等
 */
import axios from 'axios';
import globalConfig from '../config'
import { Notification } from 'element-ui'

// 注： 具體設(shè)置具體判斷 根據(jù)公司項(xiàng)目需求 以及 接口需求   現(xiàn)在以我公司為例

const init = function () {
  // 添加 axios 請求攔截器為所有請求加上前綴 、 access_token  （我公司所有接口都比要有 access_token才能訪問）
  // 有對 axios 不是很了解的 可以看看 axios 官方文檔  https://www.kancloud.cn/yunye/axios/234845
  axios.interceptors.request.use(function (config) {
    // 為所有接口加上前綴 例 https://www.kancloud.cn/yunye/axios/234845 前綴為 https://www.kancloud.cn
    // 因?yàn)橄嗤h(huán)境下的所有接口前綴肯定是一樣的 window.localStorage.gatewayDomain 為前綴域名  倘若后面更改域名之類的  只需改一個地方就行了 就不用說每個調(diào)接口的地方都去改  維護(hù)便捷
    // 若想了解分環(huán)境打包以及分環(huán)境設(shè)置 公共域名、前綴等  請看以往博文 https://www.cnblogs.com/ljx20180807/p/9456489.html
    config.url = window.localStorage.gatewayDomain + config.url
    
    // 登錄時設(shè)置 cookies
    var cookies = globalConfig.getCookies()
    if (config.url.indexOf('?') < 0) {
      config.url += '?'
    }
    // 為所有接口加上 access_token
    config.url += ('access_token=' + cookies['access_token'])
    if (!config.data) config.data = {}
    return config;
  }, function (err) {
    // 錯誤處理
    return Promise.reject(err)
  })

  // 添加 axios 響應(yīng)攔截器
  axios.interceptors.response.use(function (response) {

    // 這里是當(dāng)接口請求服務(wù)器成功響應(yīng)的情況   解構(gòu)賦值出需要的數(shù)據(jù)
    const {status, data} = response;

    if (status === 200) {
      // 如果不出現(xiàn)錯誤，直接向回調(diào)函數(shù)內(nèi)輸出 data  狀態(tài)200
      if (data.error === 'SUCCESS') {
        // 成功不用提示
        return data
      } else {
        // 若出現(xiàn)錯誤則彈窗錯誤提示
        if (data.message) {
          Notification({
            title: '錯誤',
            message: data.message,
            type: 'error',
            customClass: 'el-error-msg',
            duration: 2000
          })
        }
        return data
      }
    } else {
      return response;
    }
  }, function (error) {
    // 這里是當(dāng)接口請求失敗的情況 （例如服務(wù)器沒響應(yīng)、后臺代碼問題之類的）  （具體的響應(yīng)判斷根據(jù)你后臺返回狀態(tài)碼結(jié)構(gòu)）
    const {response} = error;

    // 這里處理錯誤的 http code
    if (!response || response.status === 404) {
      if (!response) {  // access_token 失效的情況 彈窗提示
        Notification({
          title: '錯誤',
          message: 'access_token已失效請重新登錄',
          type: 'error',
          customClass: 'el-error-msg',
          duration: 1500,
          onClose() {
            window.location.href = window.localStorage.loginUrl  // 自動跳轉(zhuǎn)返回登錄頁重新獲取access_token
          }
        })
      } else {
        // 這是請求url不對的情況
        console.log('404 error %o' + error);
      }
    }
    // Do something with response error 對響應(yīng)錯誤做點(diǎn)什么
    return Promise.reject(error.message);
  });
};

export default {
  init
}

3、services/prompt.js文件

const init = function () {
  const _this = this;
  // 建議為了方便使用，這里可以包裝window.Alert  具體怎么使用往下看
  window.Alert = function (msg, duration = 3000) {
    // 錯誤提示
    _this.$notify({
      title: '錯誤',
      message: msg,
      type: 'error',
      customClass: 'el-error-msg',
      duration
    });
  }
　// 成功提示
  window.Tips = function (msg, duration = 3000) {
    _this.$notify({
      title: '成功',
      message: msg,
      type: 'success',
      duration
    });
  }
　// 警告提示
  window.Warning = function (msg, duration = 3000) {
    _this.$notify({
      title: '警告',
      message: msg,
      type: 'warning',
      duration
    });
  }

  // 全局延時器
  window.SetTimeout = function (path, queryObject) {
    setTimeout(_ => {
      _this.$router.push({
        path: path,
        query: queryObject
      });
    }, 500)
  }
};

export default {
  init
}

3、page/Demo/interface.js文件 (pc端不建議用vuex 具體看需求吧 vuex管理版本 往下看)

import axios from 'axios';

const ajax = {
  // 獲取影像件上傳列表
  GET_IMAGE_LIST: 'images?'
};
// 提取公共部分
const API_PATH_PRE_FIX = 'apply/v1/'; 

// 增加接口模塊前綴
let INTERFACE = {};
for (let key in ajax) {
  INTERFACE[key] = API_PATH_PRE_FIX + ajax[key];
}

/**
 * 方式1： 多參數(shù)情況  獲取列表
 * @param data 參數(shù)
 * @returns {*}
 */
function getImageList(data) {
  return axios.get(INTERFACE.GET_IMAGE_LIST, {
    params: data
  }).catch(function (error) {
    window.Alert(error);
  });
}

/**
 * 方式2： es6模板語法  獲取基本信息
 * @param data 參數(shù)
 * @returns {*}
 */
function getContrantInfo(API_PATH_PRE_FIX, agreementId) {
  return axios.get(`${API_PATH_PRE_FIX}/middle/agreement/basic?agreementId=${agreementId}&`).catch(function (error) {
    window.Alert(error);
  });
}
export default {
  getImageList,
  getContrantInfo,
};

4、page/Demo/index.vue文件

<script>
// 引入上面的接口文件
import INTERFACE from './interface'
export default {
  data() {
    return {
      imageList: [],
      deleteList: []
    }
  },
  created() {
    // 獲取列表 （調(diào)用封裝好的請求）
    INTERFACE.getImageList().then(data => {
      if (data && data.data) this.imageList = data.data
    })
  },
  methods: {
    // 確認(rèn)刪除
    handleDelete() {
      INTERFACE.deleteAgreement(this.deleteList).then(data => {
        // 操作成功提示 （上面定義好的全局提示）
        window.Tips('刪除成功!')
      })
    }
  }
}
</script>

5、src/main.js文件

import Vue from 'vue'
import ElementUI from 'element-ui'
import App from './App'
import ajax from '@/services/ajax'

// axios 統(tǒng)一配置
ajax.init()

// 全局變量
indow.localStorage.gatewayDomain = 'https://dev-api.cn/'
window.localStorage.defaultLanguage = 'ZH_CN'

6、src/App.vue文件

<script>
import prompt from '@/services/prompt'
export default {
  name: 'app',
  mounted() {
    // 全局錯誤初始化
    prompt.init.call(this)
  }
}
</script>

以上就是pc端的項(xiàng)目配置化、請求統(tǒng)一管理內(nèi)容了。有疑問的地方留言看到后會第一時間回復(fù)，或可改進(jìn)的地方歡迎指導(dǎo)， 下面介紹vuex管理版本。

7、移動端結(jié)合Vuex 統(tǒng)一管理請求 stroe/actions.js文件

import Vue from 'vue'

// 全局域名
const apiUrlBase = window.apiUrlBase

const API_URL = {
  GET_APPLICENT: `${apiUrlBase}/app/v1/apply/dictionaries`
}

const actions = {
   /**
 * 獲取投保人數(shù)據(jù)字典
 */
actions.getApplicent = ({ state }) => {
  return new Promise((resolve, reject) => {
    Vue.http.get(`${API_URL.GET_APPLICENT}?access_token=${state.accessToken}`).then((ret) => {
        resolve(ret.body)
      }).catch((err) => {
        reject(err)
      })
    })
  }
}

export default actions

8、.vue文件里調(diào)用

this.$store.dispatch(`${storeName}/getApplicent`)
      .then((data) => {
        console.log(data)
      })

這就可以啦。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 基于Vue的一些資料 內(nèi)容 UI組件 開發(fā)框架 實(shí)用庫 服務(wù)端 輔助工具 應(yīng)用實(shí)例 Demo示例 element★...
    嘗了又嘗閱讀 1,296評論 0贊 1
  • F7+Vue+WebPack移動端單頁應(yīng)用腳手架 1 簡介 F7-VUE-WEBPACK-SCAFFOLD，是一個...
    bluexiii閱讀 6,000評論 0贊 8
  • 來源：http://www.cnblogs.com/opendigg/p/6513510.html UI組件 el...
    YU_XI閱讀 2,943評論 0贊 25
  • 最愜意的生活，莫過于做自己喜歡做的事，生活成自己喜歡的樣子。我想我自己莫過于在文字里取暖，在文字中找到自己的影子。...
    落葉蘭秋閱讀 1,503評論 6贊 46
  • ：為什么學(xué)歷不值錢，而學(xué)區(qū)房值錢？ ：學(xué)歷已無預(yù)期，學(xué)區(qū)房有無限預(yù)期。 總結(jié)：“保狀態(tài)，穩(wěn)預(yù)期”是營銷的終極目標(biāo)
    馬唐閱讀 130評論 0贊 0

友情鏈接更多精彩內(nèi)容