你是如何構建 Web 前端 Mock Server 的？
時間：2022-08-31 22:33:01 | 來源：網(wǎng)站運營
時間：2022-08-31 22:33:01 來源：網(wǎng)站運營
謝邀
為了更好的分工合作，讓前端能在不依賴后端環(huán)境的情況下進行開發(fā)，其中一種手段就是為前端開發(fā)者提供一個web容器，這個本地環(huán)境就是 mock server。
要完整運行前端代碼，通常并不需要完整的后端環(huán)境，我們只要在mock server中實現(xiàn)以下幾點就行了：
- 能渲染模板
- 實現(xiàn)請求路由映射
- 數(shù)據(jù)接口代理到生產(chǎn)或者測試環(huán)境
能渲染模板很簡單，在mock server中集成模板引擎就行了，然后提供模擬的頁面數(shù)據(jù)用于完整渲染頁面，不過有時候生產(chǎn)環(huán)境中的模板引擎可能有一些環(huán)境依賴的擴展，這個要單獨實現(xiàn)。
請求路由映射，實現(xiàn)原理就是要讓本地的mock server有一個router，能接收所有HTTP請求，然后在router中根據(jù)線上的路由約定，實現(xiàn)一套一樣的規(guī)則，這個也不難，不贅述了。
最后數(shù)據(jù)接口代理。與前端相關的HTTP請求一共就3種響應情況：
- 渲染頁面的請求；
- 靜態(tài)資源的請求；
- 獲取數(shù)據(jù)的請求。
由于實現(xiàn)了router，我們把渲染頁面的請求在mock server中處理掉，直接輸出本地模板的渲染結果；靜態(tài)資源的請求直接返回文件內(nèi)容；而把數(shù)據(jù)請求代理到測試或者生產(chǎn)環(huán)境，本地就不用mock了（當然，如果出現(xiàn)新的接口測試環(huán)境沒有的，可以追加router，在mock server想響應假數(shù)據(jù)）
至于題主說的url一致性問題，其實不存在的。你的這個
http://www.foo.com/bar 的數(shù)據(jù)請求，在js中應該這樣寫：
$.get('/bar', callback)這種寫法，省略了host，在線下開發(fā)時，其最終結果是請求
http://127.0.0.1:3000/bar，而由于我們在mock server中實現(xiàn)了路由規(guī)則，這個請求實際上被代理到了測試/生產(chǎn)環(huán)境去獲取數(shù)據(jù)。而當你把代碼部署到線上時，其訪問真實請求地址又自動變成了你期望的
http://www.foo.bar，正常運行。
畫個圖總結一下：
補充一些Tips：
- 由于Mock Server需要具備渲染模板的能力，因此可能需要一種輕量的服務端跨平臺server實現(xiàn)方案，如果是java的后端，可以考慮使用jetty，一個1.8M的jar即可；如果是php的后端，可以考慮使用php 5.4以后內(nèi)置的server，啟動命令是 php -S 127.0.0.1:3000 router.php；如果是Nodejs，那就很簡單了，估計都不需要Mock Server，本地也可以跑的
- 當代理數(shù)據(jù)接口的生產(chǎn)/測試環(huán)境不具備新接口的時候，Mock Server要在本地制造假數(shù)據(jù)響應請求，可以使用 http://beta.json-generator.com/ 這類在線的JSON數(shù)據(jù)生成工具，非常方便。
很多前端工程師以為前端分離的唯一途徑是接入NodeJS作為UI層，其實不是的，還有一種方案就是這種Mock Server，前端工程師直接寫后端模板，效果有時候甚至更好，而且對已有前后端架構的改動成本最小。
====== 更新 ======
評論中
@相守鼎 給出了常用腳本語言下開啟簡易web server的方法，可以用于實現(xiàn)Mock Server：
- ruby -run -e httpd . -p 9090
- python -m SimpleHTTPServer 8000
- php -S 127.0.0.1:8088 router.php
在線咨詢
