活兒好又性感的線上 Mock 平臺 - Easy Mock

小芋頭君發表於2017-04-25

今天的資料,感謝大家的支援,有問題可以加QQ群反饋,實時答覆:595325417

活兒好又性感的線上 Mock 平臺 - Easy Mock

什麼是 Easy Mock

Easy Mock 是一個極其簡單、高效、視覺化、並且能快速生成模擬資料的線上 mock 服務
以專案管理的方式組織 Mock List,能幫助我們更好的管理 Mock 資料,不怕丟失。
你問我為什麼要用它?請聽我一一道來它的過人之處。

網站地址:www.easy-mock.com 歡迎註冊體驗。

目前 easy-mock 在大搜車已經支援了200個專案,4000條mock資料的量級,並且完全獨立部署,請大家放心使用。

前言

今天我們要說一說 如何有效提高前端開發效率 ,這個話題似乎有些大了,
更確切的說應該是 如何使用 Easy Mock 提高前端開發效率。在前後端分離的大浪潮下,如何有效保障我們在開發環節不被打斷?(介面開發需要的時間往往比前端多)

資料偽造

我相信大家都有各自的辦法。比如說,

  • 將 Mock 資料寫在程式碼裡
  • 利用請求攔截
  • 利用 Charles 等代理工具,將 URL Map 到本地檔案
  • 本地 Mock Server

上面這些方法雖然可以解決我們的問題,但同樣伴隨著一些問題。比如說,

  • 髒程式碼
  • 依賴特定的框架
  • 增加切換成本
  • 介面資料結構重構需要手動更新
  • 效率低下
  • 無法優雅的進行協同編輯
  • 無法持久化

看到這些,它們真的能夠提高我們的開發效率嗎?答案就在你的心中。
為此,Easy Mock 就這樣誕生了。

支援 Swagger

Swagger 是一個規範和完整的框架,用於生成、描述、呼叫和視覺化 RESTful 風格的 Web 服務。

效率一直我們關注的問題,Easy Mock 支援基於 Swagger 生成 Mock List。並且,智慧的更新操作只會對已經變動的介面做覆蓋式更新。
並且基於 Swagger 建立的介面是支援引數顯示的,也就是說我們能看到這個介面的請求引數和響應資料結構。

再簡單點講,它的強大之處在於徹底解放我們的雙手。只要後端用了 Swagger(並且按照規範生成 API 文件),生成 Mock 資料只是 1秒鐘 的事情。

具體的使用方式見 Easy Mock 官網文件。

活兒好又性感的線上 Mock 平臺 - Easy Mock

更簡單的團隊協作

Easy Mock 提供了 2 種方式以實現團隊協作編輯。

  • 個人專案 下邀請小夥伴一起參與編輯
  • 建立團隊加入團隊 即可參與該團隊下所有專案的編輯

響應資料

如果能根據傳入的引數動態返回資料該多好?Easy Mock 支援處理 Request 物件。
也就是說我們可以通過 Request 物件的某些屬性進行條件判斷,從而實現 響應式資料
那麼,Request 物件都有些什麼屬性呢?如下,

  • header
  • method
  • url
  • querystring
  • host
  • hostname
  • query
  • cookies

這些只是一部分,更多屬性和使用方式見 Easy Mock 官網文件

活兒好又性感的線上 Mock 平臺 - Easy Mock

介面代理

有了介面代理可以做更多的事情。

  • 程式碼除錯
  • 跨域請求

工作臺

如何在茫茫的專案列表中找到你想要進行編輯的專案?
搜尋雖然很方便,但有時候來回切換專案也需要時間成本,並且這是煩人的。
為此我們可以通過將專案新增到工作臺中,以提高我們的使用效率。

活兒好又性感的線上 Mock 平臺 - Easy Mock

快捷鍵

為了進一步提升效率,值得一提的小細節是 Easy Mock 支援快捷鍵操作。

建立專案 & 建立介面

專案列表介面列表 中,按下 ctrl + c

搜尋

專案列表介面列表 中,按下 ctrl + s

更多特性

匯出介面

有可能你需要在本地用到這些介面,正好 Easy Mock 支援匯出資料。

複製

這對於介面版本升級是很有用的。試想一下,一個專案超過 200 個介面,如果後面介面版本升級,同時以前的介面不變。再一次建立 200 個介面是什麼感覺?

Restful

如果後端提供 /restful/:id/list 或者 /restful/{id}/list 這樣的介面地址。別慌,Easy Mock 是支援的

擴充套件

移動端除錯

步驟如下:

  • 利用 Charles Fiddler 等代理工具,抓取客戶端中包含頁面入口的介面
  • Easy Mock 上建立一個介面
  • 將剛剛抓取的介面資料複製到 資料模型 中,修改頁面入口為本地的入口然後儲存。要用本地 ip 哦,localhost 在手機上是無效的
  • 點選 預覽,複製介面地址
  • 回到代理工具。點選最開始抓取的介面,將其代理成剛剛複製的地址即可

這個方式可以為除錯帶來極大的幫助。

聯絡方式

反饋問題請加QQ群:595325417

相關文章