利用Easy Mock簡單模擬開發資料介面

Preference發表於2019-03-02
Mock

前言

在開發過程中遇到一個情況：專案的頁面已經全部完成開發，但是後端的介面還沒完成。這個時候一直等的話就比較浪費時間。試想是否可以自己模擬一些資料先來開發功能呢？比如資料繫結、渲染等。這個時候就可以用到 Easy Mock 來模擬介面返回資料。

想要這樣做，必須做到一點：和後端商量統一介面命名、請求引數欄位與返回欄位等。

使用方法

  1. 開啟Easy-mock官網登入（沒有賬號可以直接註冊）
  2. 登入之後點選右下角的加號建立專案，如圖所示，吐槽一下，這個建立按鈕真的不好找… ?
01
  1. 建立專案，填寫專案的相關配置。
    02

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

  1. 建立好了之後可以根據API文件新增模擬資料了。常用的快捷按鈕如題所示：
    03

點選預覽介面效果如下：

需要注意的是：點選send之後才能看到請求和響應。

04

點選編輯介面效果如下：

右邊的按鈕開啟的話點選更新介面後會自動回到圖三的控制皮膚，關閉點選更新會停留在當前，可以根據需要自行調節。

05

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)"
複製程式碼
  1. 編輯好各個模擬API後複製連結在專案中使用就行。

總結 ?

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

部落格地址: 戳我

相關文章