資訊專欄INFORMATION COLUMN
摘要：現在一般需要分前后端，因為大量前端框架和工具鏈的涌入根源是需求復雜了，讓前端可以跟后端獨立開來。但是，無論是前端去寫模板，亦或是完全前后端分離去寫，都脫離不了與后端進行數據交互。
--> GitHub地址
舊石器時代，Web 開發并不會去刻意區分前后端，寫后端的人覺得寫數據庫跟寫模板都是應該具備的技能。現在一般需要分前后端，因為大量前端框架和工具鏈的涌入（根源是需求復雜了），讓前端可以跟后端獨立開來。但是，無論是前端去寫模板，亦或是完全前后端分離去寫 JSX，都脫離不了與后端進行數據交互。
以上是本工具產生的動因，我們暫且將前后端交互的數據分為模板數據（由后端直接填充）和異步數據（通過 HTTP 接口），工具的作用就是平滑地進行數據交互過渡，降低溝通成本。
名字由來在開發前期，后端可能并沒有開始寫或者沒有寫完，前端此時只能通過本地數據模擬實際數據進行布局和組件的調試，一般叫做 mock 數據。
待前端寫的差不多了，后端可能也差不多了，那么此時需要聯調，因為聯調的過程很可能伴隨著大量的修復工作，前后端雜糅在一起部署的代價太高，高效的方式就是通過代理的方式直接從模擬數據切到后端數據，這里叫 proxy。
如果把 mock 和 proxy 結合起來，那么就叫 moky !
使用說明項目的 GitHub 里面已經簡單的說了下使用方法，不過我覺得還是有必要補充點額外的說明。
首先，需要強調的是，moky 側重點只有 mock 和 proxy，因此可以做到代碼也只有 200 行左右，市場上已經有很多人做這方面工作了，而基本都不能滿足我的需求。
使用跟 webpack 很類似，全局安裝 npm i moky -g ，只需要一個配置文件，然后直接運行在配置文件 moky.config.js 所在目錄運行 moky ，或者通過參數指定配置文件路徑 moky -c /path/to/xxx.js
但是，正確使用前一般需要先配置好 moky.config.js，下面針對配置文件做一個羅嗦的介紹：
// 這里之所以需要 path，是因為下面的文件路徑都必須是絕對路徑
var path = require("path");
module.exports = {
// 本地監聽端口，運行 moky 會起一個 server
localPort: 3000,
// 異步數據的 mock 目錄路徑
asyncMockPath: path.join(__dirname, "mock"),
// 同步數據的 mock 目錄路徑
viewsMockPath: path.join(__dirname, "tplMock"),
// 模板所在目錄，如果你是完全前后端分離，沒有模板，那至少有個 index.html 吧
// 把這個 index.html 所在的目錄當作模板目錄即可
viewsPath: path.join(__dirname, "views"),
// 這個并沒有卵用，如果有 favicon 還是設置下吧
faviconPath: path.join(__dirname, "public", "favicon.ico"),
// 這里不要被 js 和 css 誤導了，這里是設置靜態資源的路由
// 注意，其優先級比較高哦，所以不要漏了/多了/跟其它沖突了
publicPaths: {
"/css": path.join(__dirname, "public", "css"),
"/js": path.join(__dirname, "public", "js"),
},
// 模板引擎的設置，具體參考 koa-views，moky 已經內置了幾個模板引擎，可以直接設置就用
// 注意兩點：如果選擇 freemarker 一定保證 JAVA_HOME 等設置是對的；
// 如果是純 HTML 頁面，你隨便選個模板引擎即可，推薦 nunjucks
viewConfig: {
extension: "html",
map: { html: "nunjucks" },
},
// 這里為了解決很多 Web 容器采用的 Virtual Host 機制（一個 IP:PORT 通過域名對應多個服務）
// 由于我們本地啟動的可能是 http://localhost:3000，如果有 Virtual Host 機制則通不過的
// 如果設置了 hostName，在發送請求前程序會自動替換 Host 頭為 hostName
hostName: "hacker-news.firebaseio.com",
// 這里是proxy 映射表，在啟動的時候如果是 moky -e dev，異步請求會自動走 dev 對應的 proxy
// 如果沒找到對應的，那么默認用本地的 mock 數據作為異步數據
proxyMaps: {
dev: "https://hacker-news.firebaseio.com",
local: "http://localhost:8080",
},
// 這是頁面路由的設置，這里的 key 是路由（URL 里見到的），value 是頁面的相對路徑
// 路徑相對于 viewsPath , 不用加后綴，viewConfig.extension 指明了
urlMaps: {
"/": "index",
"/page": "page/index",
},
}
最簡單的試用就是全局安裝 moky，然后 clone 項目，進入 example 目錄，直接運行 moky
先看下目錄結構：
├── mock
│?? ├── get
│?? │?? ├── test
│?? │?? │?? └── index.json
│?? │?? └── v0
│?? │?? └── item
│?? │?? └── 2921983.json.json
│?? └── post
│?? └── index.json
├── moky.config.js
├── public
│?? ├── css
│?? │?? └── main.css
│?? ├── favicon.ico
│?? └── js
│?? └── main.js
├── tplMock
│?? ├── index.json
│?? └── page
│?? └── index.json
└── views
├── index.html
└── page
└── index.html
直接運行 moky 會默認使用 mock 模式，數據流是這樣的：
我們瀏覽器打開 http://localhost:3000/page
路由會根據我們的設置匹配一遍：靜態資源 -> 頁面 -> 異步接口，這里匹配到頁面就停止了
程序會去 tplMock/page/index.json 下拿模板數據，然后填充渲染返回
此時頁面里的靜態資源的會被首先從 public 下路由
然后會有個異步接口 GET v0/item/2921983.json，會最終被異步處理模塊處理
因為我們啟動的時候是 mock 模式，于是會去 mock/get 文件夾找對應位置的 json 作為本地 mock 數據
如果我們是 moky -e dev 啟動的，那么 GET v0/item/2921983.json 會被從 proxyMaps.dev 反代
遺留問題模板數據無法走 proxy 從遠端獲取
對第三方登錄/認證不友好
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91120.html
摘要：前言自總結完了上篇前端工程化的思想，并在全家桶的項目加以實踐，趁熱給大家總結一篇如何更有效率與質量地開發項目，以及其中踩過的一個個坑。。。 前言 自總結完了上篇前端工程化的思想，并在vue全家桶的項目加以實踐，趁熱給大家總結一篇如何更有效率與質量地開發vue項目，以及其中踩過的一個個坑。。。 基于vue-cli的自定義模板（Custom Templates） 小伙伴們的vue項目應該都...
摘要：背景隨著互聯網應用工程規模的日益復雜化和精細化，我們在開發一個標準應用的早已開始告別單干模式，為了提升開發效率，前后端分離的需求越來越被重視，前端負責展現交互邏輯，后端負責業務數據接口，基本上也成為了我們日常項目分工中的標配，但是前后端分離 背景 隨著互聯網應用工程規模的日益復雜化和精細化，我們在開發一個標準web應用的早已開始告別單干模式，為了提升開發效率，前后端分離的需求越來越被重...
摘要：致力于解決前后端開發協作過程中出現的各類問題，提高開發效率，對接口做統一管理，同時也能為后續的迭代維護提供更便捷的方式。丁香園也將努力持續的做技術輸出產品輸出，為開源社區做出自己的一份力量。 API Mocker 先貼上項目地址：DXY-F2E/api-mocker 隨著web發展，前后端分離的演進，網頁的交互變的越來越復雜。在項目開發過程中，前后端并行開發時，在涉及到接口的部分，總是...
閱讀 2428·2021-11-23 09:51
閱讀 2457·2021-11-11 17:21
閱讀 3097·2021-09-04 16:45
閱讀 2380·2021-08-09 13:42
閱讀 2218·2019-08-29 18:39
閱讀 2879·2019-08-29 14:12
閱讀 1279·2019-08-29 13:49
閱讀 3363·2019-08-29 11:17
