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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM