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)