Vue.js項目API、Router配置拆分實踐

先後端分離開發方式前端擁有更高的控制權

隨着前端框架技術的飛速發展，Router這個概念也被迅速普及到前端項目中，在早期先後的沒有分離的時期下，並無明確的路由概念，前端頁面跳轉大可能是經過後端進行請求轉發的，好比在Spring MVC項目中，進行一個頁面跳轉以下（畫紅線部分）：

前端須要一個超連接，連接的href=/manager，這樣這個超連接被轉發到scs/waitFollowed路徑指定的頁面。

先後的分離後，前端頁面跳轉的方式發生了變化，再也不須要後端處理了，數據交換方式也改變了，由此前端須要定義Router配置文件，須要定義API配置文件。在項目的權限配置管理中，徹底不須要後端什麼事了，能夠說，權限配置表能夠單獨拿出來由前端維護了。

好比這個url字段，在先後端不分離的狀況下，嚴重依賴於後端，url就是後端接口地址，若是須要更改就須要後端修改代碼修改接口地址，而如今，前端能夠自由控制url的值是什麼了。

在接口層面，前端也會有本身的配置文件，能夠對後端提供的接口進行重命名，組合等。好比

前端都統一使用模塊名+接口名的方式管理，管後端提供的接口叫啥已經不重要，在視覺上和維護上都比較方便。在頁面上使用，查詢起來也很直觀：

看到DISTRBUTE().Leads.dataGrid這個接口，就知道這是DISTRBUTE模塊下Leasd功能下的列表查詢接口

Vue.js中的API、Router配置

在Vue.js項目下，一開始咱們只使用一個api.config.js配置文件，全部的接口都定義在這裏面，router也同樣，都配置在一個router.config.js中，下面是咱們項目中API配置文件

能夠看到，不少的業務模塊，不少的接口，已經達到了570多行，隨着業務進一步推動，接口快速膨脹，文件愈來愈大。

這時候迫切須要拆分，把不一樣的業務模塊單獨拆分爲一個個API配置文件。一樣，咱們來看看拆分前的Router配置文件：

這樣router一多最大的缺點就是會致使router命名衝突。

拆分！拆分！拆分！

首先考慮API配置文件怎麼拆分，對於接口，咱們確定有多套環境，多套環境那麼API的URL也不同，拆分紅多個文件後多個文件須要共用同一個獲取apiBase的方法，因此這個apiBase就要寫在公共的地方，在這裏原來的api.config.js就變成了公共配置，apiBase就放在此文件內。

export function apiBase() {
  let hostname = window.location.hostname,
    API_BASE_URL = 'http://test2api.dunizb.com';//默認環境
  if(hostname === 'crm.dunizb.cn') {  //正式環境
    API_BASE_URL = 'http://api.dunizb.cn';
  } else if(hostname === 'admin.dunizb.com') {//公網測試環境
    API_BASE_URL = 'http://testapi.dunizb.com';
  } else if(hostname === 'manager.dunizb.com') {//內網測試環境
    API_BASE_URL = 'http://test2api.dunizb.com';
  }
  return API_BASE_URL;
}

而後在每一個子API配置文件中引入便可：

import {apiBase} from '../api.config';

具體功能API不須要更改，直接拷貝相應模塊API到子模塊API配置文件便可。

Router的拆分稍微複雜一點，拆分後的文件目錄與API的目錄相同：

拆分思路也徹底同樣，但要保證只有一個router.start即：

return router.start(App, '#app');

雖然你在子router配置文件中也寫上頁面是能正常工做的，可是Vue.js會在控制檯報一個錯誤：

這個錯誤的意思就是router已經啓動，無需啓動屢次。因此，子router文件中不能存在 return router.start(App, '#app'); 這樣的代碼。

拆分後router.config.js內容以下：

/**
 * 路由總文件
 * Created by Bing on 2017/6/19 0019.
 */
import App from './App';
import authority from './routers/authority';
import publics from './routers/public';
import study from './routers/study';
... ...
export default function(router){
  authority(router);//基礎與權限模塊
  publics(router);//公共模塊
  study(router);//教學相關
  ... ...
  return router.start(App, '#app');
}

而子router配置文件的寫法就是這樣（以study模塊爲例）：

/**
 * 教學排課
 * 教研
 * Created by Bing on 2017/6/19 0019.
 */
import courseIndex from 'components/studyCourse/index/index';
import waitCourse from 'components/studyCourse/waitCourse/waitCourse';
import alreadyCourse from 'components/studyCourse/alreadyCourse/alreadyCourse';
import gearCourse from 'components/studyCourse/waitCourse/gearCourse';
import courseWare from 'components/teachingResearch/courseware/courseware.vue';
import courseWareLibrary from 'components/teachingResearch/courseware/library.vue';
export default function(router) {
  router.map({
    '/study/index': {component: courseIndex},
    '/study/waitCourse': {component: waitCourse},//待排課程
    '/study/waitCourse/gearCourse': {component: gearCourse},//待排
    '/study/course': {component: alreadyCourse},//已排課程
    '/tr/courseware': {component: courseWare},//課件管理
    '/tr/courseWare/library': {component: courseWareLibrary},//自主上傳課件庫
  });
}

拆分後，每一個模塊管理它本身領域的router、api，router.config.js和api.config.js就大大瘦身了，也下降了命名衝突的問題和未來混亂的問題。

---

此前的Vue.js系列文章：

• Vue.js開發常見問題解析

• Vue.js經常使用開發知識簡要入門（一）

• Vue.js經常使用開發知識簡要入門（二）

• Vue.js經常使用開發知識簡要入門（三）

文章首發於個人微信公衆號，關注可得到每次最新推送