你有沒有過這種經歷?做前端開發時,后端同事的接口還沒寫完,你這邊要調頁面數據,只能對著空控制臺發呆?要么手動寫個 JSON 文件當假數據,改一次數據就得重新保存文件、刷新頁面;要么用在線 Mock 工具,每次換電腦還得重新配,遇到網絡差的時候直接加載不出來,那叫一個鬧心!
其實我之前也總被這問題卡殼,直到上個月在 Github 逛開源項目時,發現了 Mockoon—— 一個免費開源的本地 Mock 服務工具,它的 Github 倉庫地址是https://github.com/mockoon/mockoon,支持 Windows、Mac、Linux,下載下來就能用,不用裝任何依賴。小索奇用它搭了一次 Mock 服務后,現在做項目再也不用等后端接口了,今天就跟你好好說說它有多實用。
先講它最核心的優勢:完全本地運行,不用依賴網絡。你想想看,不管你是在沒網的會議室,還是地鐵上改代碼,打開 Mockoon 就能啟動 Mock 服務,接口地址是localhost開頭的本地地址,響應速度比在線工具快多了。上次我去客戶公司對接需求,他們會議室網特別差,在線 Mock 工具根本打不開,我掏出 Mockoon,三分鐘搭好用戶登錄、列表查詢的接口,前端頁面直接跑起來,客戶當場就說 “你們效率真高”,其實全靠這工具救場。
而且它的可視化界面真的太友好了,不用寫一行命令。打開軟件后,點 “新建環境”,再點 “新建路由”,就能設置接口路徑(比如 /api/user/list)、請求方法(GET/POST 都支持),然后在 “響應” 里填 JSON 數據就行。更方便的是,它還能生成動態數據 —— 比如你需要隨機的用戶名、手機號,不用手動編,直接用它自帶的變量,比如 {{faker:name.firstName}} 能生成隨機名,{{faker:phone.phoneNumber}} 能生成隨機手機號,甚至還能設置響應延遲,模擬真實接口的加載時間,這對測試 loading 狀態太有用了。
我舉個具體例子:上次做電商項目,需要一個商品列表接口,要返回 10 條商品數據,每條有 id、名稱、價格、庫存。用 Mockoon 的話,先建個 GET /api/goods/list 的路由,然后在響應里寫個 JSON 數組,id 用 {{uuid}} 生成唯一 ID,價格用 {{number:between (10, 200)}} 生成 10 到 200 之間的隨機數,庫存用 {{number:between (0, 1000)}},保存后啟動服務,前端直接調這個接口,每次刷新都能拿到不同的價格和庫存數據,比手動寫 10 條靜態數據省事多了,而且還能模擬庫存為 0 的情況,不用改代碼就能測試缺貨狀態。
說到細節,有個功能我必須夸:支持多環境切換。比如你開發時需要 “開發環境” 的 Mock 數據(比如返回測試賬號),測試時需要 “測試環境” 的 Mock 數據(比如返回異常狀態碼,像 401 未登錄、500 服務器錯誤),不用刪了重建,直接在 Mockoon 里建兩個環境,點一下就能切換。小索奇上次做登錄功能,要測試 “賬號不存在”“密碼錯誤” 的情況,建了個 “異常場景” 環境,每個錯誤狀態對應一個接口,測試的時候切過去就行,不用每次改響應數據,效率直接翻倍。
可能有人會問:“這工具是開源的,會不會有 bug 啊?更新及時嗎?” 我翻它 Github 倉庫的時候注意到,維護團隊更新挺頻繁的,最近一次更新就在上個月,而且 Issues 里的問題回復也快。我之前遇到過一次 “響應頭設置不生效” 的問題,去 Github 提了個 Issue,兩天就有人回復解決辦法,后來新版本還直接修復了這個小 bug,這種開源項目的社區支持真的很良心。
還有個小技巧要分享:它支持導入導出配置。你把自己搭好的 Mock 環境導出成 JSON 文件,發給團隊同事,他們導入到自己的 Mockoon 里就能直接用,不用每個人都重復配置。上次我們團隊做同一個項目,我把用戶、訂單、商品三個模塊的 Mock 配置導出來,同事們導入后,大家調的接口都一致,后期對接后端接口時,只需要把請求地址從localhost改成真實接口地址,不用改任何邏輯,省了很多溝通成本。
不過有個小提醒:它主要是做本地 Mock 服務,如果你需要團隊共享的在線 Mock 服務,可能還需要配合其他工具,但對于個人開發或者小團隊本地聯調,它絕對夠用了。我問過做后端的朋友,他們有時候也用 Mockoon 模擬前端請求,測試自己的接口邏輯,沒想到一個工具還能前后端都用。
現在你是不是也想試試?其實 Mockoon 還有很多隱藏功能,比如支持 HTTPS、自定義響應頭、批量導入路由,這些你用熟了之后還能玩出更多花樣。小索奇現在做項目,第一步就是用它搭好 Mock 服務,后端接口好之前,我這邊就能把頁面邏輯、交互都做好,等接口一好,無縫切換,根本不用等。
最后想問問你:你平時做 Mock 數據都是用什么方法?是寫靜態 JSON 文件,還是用在線工具?有沒有遇到過 Mock 數據和真實接口格式不匹配的情況?評論區跟我聊聊唄,大家一起交流點提高效率的小技巧。
我是【即興小索奇】,點擊關注,獲取更多相關資源