利用Easy Mock簡單模擬開發數據接口

前言

在開發過程當中遇到一個狀況：項目的頁面已經所有完成開發，可是後端的接口還沒完成。這個時候一直等的話就比較浪費時間。試想是否能夠本身模擬一些數據先來開發功能呢？好比數據綁定、渲染等。這個時候就能夠用到 Easy Mock 來模擬接口返回數據。

想要這樣作，必須作到一點：和後端商量統一接口命名、請求參數字段與返回字段等。

使用方法

1. 打開Easy-mock官網登陸（沒有帳號能夠直接註冊）
2. 登陸以後點擊右下角的加號建立項目，如圖所示，吐槽一下，這個建立按鈕真的很差找... 😂

3. 建立項目，填寫項目的相關配置。

   

沒有Swagger Docs API可填寫 https://petstore.swagger.io/v2/swagger.json

4. 建立好了以後能夠根據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)"
複製代碼

6. 編輯好各個模擬API後複製連接在項目中使用就行。

總結 💯

使用Easy Mock 可以很方便的模擬出想要的數據，文檔中還有不少強大的功能我沒有用到，只用到了最基礎的模擬數據，可是已經給開發帶來了很大的便捷。吐個槽：Easy Mock 網址在我使用的時候不怎麼穩定，會時常卡死請求緩慢，畢竟是免費用的，先偷着樂就好了，不過仍是但願網址能再優化一下。

博客地址: 戳我