送給前端的你：可視化快速生成模擬數據服務——Easy Mock

內容來源：2017年11月18日，大搜車前端工程師高攀在「2017中國開源年會」進行《Easy Mock 介面數據模擬服務》演講分享。IT 大咖說（微信id：itdakashuo）作為獨家視頻合作方，經主辦方和講者審閱授權發布。

閱讀字數：1940 | 5分鐘閱讀

摘要

Easy Mock 是一個極其簡單、高效、可視化、並且能快速生成模擬數據的在線 Mock 服務。以項目管理的方式組織 Mock List，能幫助我們更好的管理 Mock 數據，不怕丟失。你問我為什麼要用它？請聽我一一道來它的過人之處。

嘉賓演講視頻及PPT回顧：http://suo.im/1HsWF9

需求

大部分前端或者客戶端開發對 Mock 都是有需求的，這是由於後端的介面開發往往會慢於前端進度。

從前端編碼階段到開發環境、預發環境、線上環境這樣一個流程中，其實後期的預發、線上環境階段對應的 API 是不用太過關心的，因為這個時候開發已經處於完成階段了。唯一無法把控的是開發階段，這個時候後端往往會因為某些情況滯後前端，這樣就會造成節點同步的問題，需要使用 Mock 環境來解決。

Mock常見方法

代碼層硬編碼

代碼層硬編碼是將 Mock 的數據統一寫在代碼內，這樣的缺點就是耦合性非常強，有著局限性，無法模擬真實請求。

代碼中請求攔截

這種方式和第一種很相似，唯一的不同是 Mock 的數據不是放在代碼中而是放在本地的文件中，缺點也是和第一種一樣。

代理工具攔截

代理工具攔擊和代碼中請求類似，是藉助代理工具進行請求攔截，缺點是操作繁瑣，成本比較高

Mock Server

Mock Server 就是在本地或者遠端啟一個新的線上Mock 伺服器。像 Mock Server 這樣的線上服務阿里和網易都是有提供的，但是 Mock 在它們的服務里其實只是一個附帶的功能。

什麼是Easy Mock

如果可以用一句話來總結，那就是「可視化，並且能快速生成模擬數據的持久化服務」。

同步Swagger

Easy Mock 的第一個核心特性是同步 Swagger，生成介面只需要1秒。Swagger 簡單來說是一套介面管理工具，後端一般是使用它管理介面。這套工具同樣提供了 Mock 功能，但是我們只是用它來進行介面的管理和測試。所以藉助這個介面文檔，我們把它集成到了 Easy Mock 內，這樣就可以基於 Swagger 直接生成現成的 Mock 介面，極大的提升了效率。

Swagger 其實是基於 Open API 規範的，這套規範已經發布了3.0，不過目前用得更多的是1.2和2.0，好在 Easy Mock 都支持。

介面代理

介面代理是 Easy Mock 的第二個特性。 有時候我們會需要一些特殊的場景，例如需要介面的轉發，這個介面可能是線上的也可能是線下等等不同的情況。這個時候就可以很輕鬆的通過Easy Mock 完成介面代理的任務。

協同編輯

開發的過程中會有不同的人員參與進來，包括前端、後端、客戶端等等，這個時候協同編輯就顯得比較重要了。因為一個項目里只能一個人編輯的話，其他人就會顯的非常被動，這個時候邀請相關的開發人員參與進來，就能夠獲得更高的執行效率。

工作台

當使用到眾多項目中某一個項目的時候，就可以將這個特定的項目添加到工作台方便進行管理。

響應式數據

除開簡單的數據外，Easy Mock 還可以去模擬動態化的響應，例如根據不同參數寫一些腳本，然後根據腳本判斷應該生成什麼樣的數據，使得數據能動態響應，並且更加的真實化。

Easy Mock CLI

Easy Mock CLI是基於 Easy Mock 快速創建 API 文件的命令行工具，在我們的業務開發中創建一個 API 大致是下面這樣的流程。

首先抽象出一個目錄用來放置 API 文件，然後判斷當前業務是否需要新建該文件，如果需要就新建 API.JS 文件。接著在文件里定義一個新的請求方法，這個方法往往伴隨著 Easy Mock 上對應的介面，最後就是實現具體的代碼細節，比如複製代碼，更改url之類的。使用這個 CLI 工具，只需要一份配置文件加上一行命令就可以生成 API 文件。

擁抱後端

Easy Mock 只專註於 Mock 領域而沒有介面方面的管理，而藉助 Swagger 後就可以快速的生成項目並查看相應的參數。但是卻無法進行編輯，這樣一來對後端其實是不太友好的，後端需要先在 Swagger 內修改，完成後再通過同步功能進行同步。

為了避免誤操作，EasyMock 提供了一個非常實用的特性。當用戶修改配置文件的結構後再進行同步，文件的配置結構會被回填，保留原有的結構，而文件的內容則是可以被直接修改的。

今天的分享就到這裡，喜歡本次分享請給我點贊~謝謝大家！有什麼問題可以在評論區討論。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！