搭建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）

總結

以上是生活随笔為你收集整理的搭建Mock Server的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。