搭建Mock Server

1.爲何要搭建mock-server？

爲了更好的分工合做，讓前端能在不依賴後端環境的狀況下進行開發，其中一種手段就是爲前端開發者提供一個 web 容器，這個本地環境就是 mock-server。

目前不少前端 mock 數據的方案的基本流程都是使用 node.js 來模擬 http 請求，配置 router 返回 mock 數據。

一個比較好的 mock-server 該有的能力：

1.與線上環境一致的接口地址，每次構建前端代碼時不須要修改調用接口的代碼

2.所改即所得，具備熱更新的能力，每次增長 /修改 mock 接口時不須要重啓 mock 服務，更不用重啓前端構建服務

3.能配合 Webpack

4.mock 數據能夠由工具生成不須要本身手動寫

5.能模擬 POST、GET 請求

6.簡單（包括：文件結構簡單、編寫代碼簡單） 

2.咱們mock server 服務器

1.就是一個基於Node的 Express web 搭建的一個本地server。

2.數據mock的思路就是在這個本地server端進行，Promise 發出http請求，經過 router 返回mock數據。

3.與線上環境一致，前端代碼構建和接口服務是分開獨立的

app.listen(3001, () => {

  debug(`The fake API server is listening on ${'3001'.rainbow}.`)

}) //啓動一個服務並監遵從 3001 端口進入的全部API鏈接請求

在webpack 配置中, 比較簡單：

proxy: {

      '/api/*': {

        target: `http://${host}:3001`,

        secure: false,

      },

將匹配 ‘/api/*’ 這種格式的API的域名重定向爲 http://${host}:3001

4.具備熱更新的能力，每次增長 /修改 mock 接口（入口api/index.js）時自動重啓 mock 服務

nodemon 自動重啓的工具 啓動 mock server

5.mock 數據能夠由工具生成不須要本身手動寫，還能模擬 POST、GET 請求

用到LowDB，LowDB 基於Lo-Dash 中間件， 基於Node的純Json文件數據庫，LowDB支持 JSON Server 和 JSONPlaceholder.

dbs[entry] = low(`${entries[i]}/data.json`)

返回或者建立一個Lo-Dash包裹數組。而後,您可使用這些方法: where, find, filter, sortBy, groupBy, ...和來自Underscore.db的方法

目錄結構，根據大模塊劃分了mock數據目錄結構，

每個模塊下，都有個schemas/*.js  Object類型 default 數據定義，而後JSON.stringify(data)轉爲JSON 字符串，同步寫入data.json文件中。用到Faker.js 的一些API。 (mock一些不變的數據)

每個模塊下，都有routes/*.js , 每一個模塊都對應建立了 express.Router() 實例，在具體app.get(‘/’, (req, res)) 對應的URL 或 路由 來模擬POST 或者GET 請求 以及PUT和DELETE請求，固定的status code 對應了不一樣的error。

 6.簡單（包括：文件結構簡單、編寫代碼簡單）

如何在src （業務代碼） 中調用mock server呢？

在src 下modules/*.js 中定義Promise 請求

 export const myFun = () => ({

　　type: MYFUN,

　　promise: (dispatch, getStore, api) => api.get(URL.myFun)

})

URL 對應配置了不一樣環境的url 請求， 生產環境（真實），開發環境 （mock server 路由），測試環境（unit test）