如何優雅的使用Mock Server

時間 2019-11-09

標籤如何優雅使用 mock server 简体版

原文原文鏈接

事出有因

昨天跟同事討論咱們在用的rap2(一個集接口編寫和mock server的開源項目)和剛上線了一個easy-mock的server，到底哪一個好用。前端

咱們主要討論的點有個兩個：接口的一致性、編碼的無侵入性。java

背景

自從先後端分離後，完成先後端的分工以後，你們就能夠各司其職，並行開發。先後端的協議標準就是接口文檔。前端的全部邏輯和展示所有依賴接口文檔中規定的數據結構。因此接口文檔就變成了開發過程的重中之重。webpack

固然有一份文檔也是不夠的，前端開發頁面邏輯調試、測試同窗測試接口、接口文檔不斷的更新、接口複雜的返回狀況等諸多問題，這就須要有一個Mock Server來幫忙。ios

更多的關於Mock內容的請你們自行Google瞭解再也不贅述。git

接口的一致性

接口文檔，是整個開發過程當中的約定和依據，因此同步更新文檔也成爲關鍵一環。github

以前的辦法

使用markdown維護一個文檔，更新以後分發給你們；或者就是放到wiki來管理，每次更新到wiki上面，供你們來閱讀。若是要Mock數據（easy-mock或者其餘mock server），相關人員修改mock字段，更新完畢。web

優雅的作法

在線編輯接口，實時保存，同步更新。例如採用Rap2（支持JSON複製，支持接口的移動複製），保存後就是接口文檔，全部人實時更新，同時Mock數據自動更新。數據庫

編碼的無侵入性

Mock 對代碼的侵入越小，咱們維護和開發的成本也越低。以 Vue-cli2.x生成的項目爲例：axios

在工程中的config目錄dev.env.js，配置開發環境下API數據來源地址後端

...
module.exports = merge(prodEnv, {
    NODE_ENV: '"development"',
    ENV_CONFIG: '"dev"',
    // BASE_API: '"dev server"',
    BASE_API: '"http://rap2.taobao.org:8080/app/mock/39"', // mock server
})

複製代碼

這樣咱們在開發過程當中，用到axios，只須要根據不一樣環境編寫一次代碼便可

const service = axios.create({
  baseURL: process.env.NODE_ENV === 'production' ? process.env.BASE_API : '/api',
  ...
});
複製代碼

從Mock數據切換到Dev Server的API只須要註釋一行配置文件代碼，無需修改項目源代碼。很是友好。

這時候咱們再看easy-mock 跟rap2生成的Mock Url：

http://easy-mock.com/mock/5c08e554bd9f9c3a01c5abf6/api/info
=> host/mock/projectId/:path

http://rap2.taobao.org:8080/app/mock/45/GET/api/info 
=> host/app/mock/:repositoryId/:method/:path
複製代碼

ps:後來發現rap2的url能夠不帶method，可是就是不能使用restful API這種根據method區分的接口了。

從生成的url來看，rap2中有:method的變量，如果要無縫切換須要更多的工做。沒法直接替換BASE_API。若是在代碼裏拼接會有很大的代碼侵入性。

因此考慮在工程層面進行優化：

在工程目錄config目錄中index.js中，能夠設置代理來統一處理:method變量。在proxyTable對象中加入bypass方法，對每一個經過代理的接口，處理request url成爲一個合格的rap2 mock的url。

module.exports = {
  dev: {
    ...
    proxyTable: {
      '/api': {
        target: config.BASE_API.substring(1, config.BASE_API.length - 1),
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
        },
        bypass: function (req, res, proxyOptions) {
          if (proxyOptions.target.indexOf('mock') !== -1) {
            const path = req.url.replace(proxyOptions.context, proxyOptions.context + '/' + req.method);
            // path => /api/GET/path
            req.url = path;
          }
        }
      }
    },
複製代碼