前言
在開發過程中遇到一個情況：項目的頁面已經全部完成開發，但是后端的接口還沒完成。這個時候一直等的話就比較浪費時間。試想是否可以自己模擬一些數據先來開發功能呢？比如數據綁定、渲染等。這個時候就可以用到 Easy Mock 來模擬接口返回數據。
想要這樣做，必須做到一點：和后端商量統一接口命名、請求參數字段與返回字段等。
使用方法
- 打開Easy-mock官網登錄（沒有賬號可以直接注冊）
- 登錄之后點擊右下角的加號創建項目，如圖所示，吐槽一下，這個創建按鈕真的不好找... 😂
- 創建項目，填寫項目的相關配置。
沒有Swagger Docs API可填寫
https://petstore.swagger.io/v2/swagger.json
- 創建好了之后可以根據API文檔添加模擬數據了。常用的快捷按鈕如題所示：
點擊預覽接口效果如下：
需要注意的是：點擊send之后才能看到請求和響應。
點擊編輯接口效果如下：
右邊的按鈕打開的話點擊更新接口后會自動回到圖三的控制面板，關閉點擊更新會停留在當前，可以根據需要自行調節。
5.根據常用語法編輯模擬API。
Easy Mock 引入了 Mock.js，使其功能強大好用。
- 支持生成隨機的文本、數字、布爾值、日期、郵箱、鏈接、圖片、顏色等
- 支持擴展更多數據類型，支持自定義函數和正則
常用占位語法，詳細文檔在 mockjs.com
"string|1-2": "@string", "integer": "@integer(10, 30)", "float": "@float(60, 100, 2, 2)", "boolean": "@boolean", "date": "@date(yyyy-MM-dd)", "datetime": "@datetime", "now": "@now", "url": "@url", "email": "@email", "region": "@region", "city": "@city", "province": "@province", "county": "@county", "upper": "@upper(@title)", "guid": "@guid", "id": "@id", "image": "@image(200x200)", "title": "@title", "cparagraph": "@cparagraph", "csentence": "@csentence", "range": "@range(2, 10)" - 編輯好各個模擬API后復制鏈接在項目中使用就行。
總結 💯
使用Easy Mock 能夠很方便的模擬出想要的數據，文檔中還有很多強大的功能我沒有用到，只用到了最基礎的模擬數據，但是已經給開發帶來了很大的便捷。吐個槽：Easy Mock 網址在我使用的時候不怎么穩定，會時常卡死請求緩慢，畢竟是免費用的，先偷着樂就行了，不過還是希望網址能再優化一下。