搭建Mock Server

1.為什么要搭建mock-server？

為了更好的分工合作，讓前端能在不依賴后端環(huán)境的情況下進(jìn)行開發(fā)，其中一種手段就是為前端開發(fā)者提供一個(gè) web 容器，這個(gè)本地環(huán)境就是 mock-server。

目前很多前端 mock 數(shù)據(jù)的方案的基本流程都是使用 node.js 來模擬 http 請(qǐng)求，配置 router 返回 mock 數(shù)據(jù)。

一個(gè)比較好的 mock-server 該有的能力：

1.與線上環(huán)境一致的接口地址，每次構(gòu)建前端代碼時(shí)不需要修改調(diào)用接口的代碼

2.所改即所得，具有熱更新的能力，每次增加 /修改 mock 接口時(shí)不需要重啟 mock 服務(wù)，更不用重啟前端構(gòu)建服務(wù)

3.能配合 Webpack

4.mock 數(shù)據(jù)可以由工具生成不需要自己手動(dòng)寫

5.能模擬 POST、GET 請(qǐng)求

6.簡(jiǎn)單（包括：文件結(jié)構(gòu)簡(jiǎn)單、編寫代碼簡(jiǎn)單）?

2.我們mock server 服務(wù)器

1.就是一個(gè)基于Node的 Express web 搭建的一個(gè)本地server。

2.數(shù)據(jù)mock的思路就是在這個(gè)本地server端進(jìn)行，Promise 發(fā)出http請(qǐng)求，通過 router 返回mock數(shù)據(jù)。

3.與線上環(huán)境一致，前端代碼構(gòu)建和接口服務(wù)是分開獨(dú)立的

app.listen(3001, () => {

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

}) //啟動(dòng)一個(gè)服務(wù)并監(jiān)聽從 3001 端口進(jìn)入的所有API連接請(qǐng)求

在webpack 配置中, 比較簡(jiǎn)單：

proxy: {

? ? ? '/api/*': {

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

? ? ? ? secure: false,

? ? ? },

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

4.具有熱更新的能力，每次增加 /修改 mock 接口（入口api/index.js）時(shí)自動(dòng)重啟 mock 服務(wù)

nodemon 自動(dòng)重啟的工具?啟動(dòng) mock?server

5.mock 數(shù)據(jù)可以由工具生成不需要自己手動(dòng)寫，還能模擬 POST、GET 請(qǐng)求

用到LowDB，LowDB 基于Lo-Dash 中間件，?基于Node的純Json文件數(shù)據(jù)庫(kù)，LowDB支持 JSON Server 和 JSONPlaceholder.

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

返回或者創(chuàng)建一個(gè)Lo-Dash包裹數(shù)組。然后,您可以使用這些方法: where, find, filter, sortBy, groupBy, ...和來自Underscore.db的方法

目錄結(jié)構(gòu)，根據(jù)大模塊劃分了mock數(shù)據(jù)目錄結(jié)構(gòu)，

每一個(gè)模塊下，都有個(gè)schemas/*.js? Object類型 default 數(shù)據(jù)定義，然后JSON.stringify(data)轉(zhuǎn)為JSON 字符串，同步寫入data.json文件中。用到Faker.js 的一些API。 (mock一些不變的數(shù)據(jù))

每一個(gè)模塊下，都有routes/*.js , 每個(gè)模塊都對(duì)應(yīng)創(chuàng)建了 express.Router() 實(shí)例，在具體app.get(‘/’, (req, res)) 對(duì)應(yīng)的URL 或 路由 來模擬POST 或者GET 請(qǐng)求 以及PUT和DELETE請(qǐng)求，固定的status code 對(duì)應(yīng)了不同的error。

?6.簡(jiǎn)單（包括：文件結(jié)構(gòu)簡(jiǎn)單、編寫代碼簡(jiǎn)單）

如何在src （業(yè)務(wù)代碼） 中調(diào)用mock server呢？

在src 下modules/*.js 中定義Promise 請(qǐng)求

?export const myFun = () => ({

　　type: MYFUN,

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

})

URL 對(duì)應(yīng)配置了不同環(huán)境的url 請(qǐng)求， 生產(chǎn)環(huán)境（真實(shí)），開發(fā)環(huán)境 （mock server 路由），測(cè)試環(huán)境（unit test）

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。