初識easy-mock-cli,始於一場緣分
在談及easy-mock-cli的時候，先說一下easy-mock是什么把？官方解釋是：Easy Mock 是一個可視化，並且能快速生成 模擬數據 的持久化服務。通俗易懂的話，就是假數據。使用的目的就是為了在前后端開發的過程中，前端會比后端先行一步，在還原完頁面就需要等后端的接口在去開發功能，這樣，就會造成前后端開發時間不同步，浪費開發的時候，mock的出現就解決了這個困境。前端在還原完頁面之后，可以根據與后端定義好的mock接口，進行開發。等后端開發完成之后，與后端聯調。項目大功告成，也沒有誰等誰，互相嫌棄的問題了。
easy-mock-cli 的自我介紹
Easy Mock 是一個可視化，並且能快速生成模擬數據的服務。以項目管理的方式組織 Mock List，能幫助我們更好的管理 Mock 數據，不怕丟失。
Easy Mock CLI 是一個基於 Easy Mock 快速生成 API 調用文件的命令行工具。
可以根據你mock的接口，結合axios生成的api層，一開始覺得真好啊，不用去一個個手寫api層，自動生成了mock中所有的，覺得真開心呀，省事省力，然后就開始用mock模擬數據，進行接口測試。
-
easy-mock-cli的安裝
npm install -g easy-mock-cli -
創建配置文件 .easymockrc
{
"output": "api",
"template": "axios",
"projects": [
{
"id": "你要創建的 Easy Mock 項目的 id",
"name": "demo"
}
]
}
- 配置文件的參數
| 屬性名 | 描述 | 可空 | 類型 | 默認值 |
|---|---|---|---|---|
| host | 指定一個源，將在該源下獲取接口數據 | true | String | https://www.easy-mock.com |
| output | 生成 API 的基礎目錄（基於項目目錄，無需手動創建） | true | String | easy-mock-api |
| template | 指定一個 API 模板 | false | String | |
| projects | 項目列表 | false | Array | |
| projects[id] | Easy Mock 項目 | id | false | String |
| projects[name] | 項目名（開心就好，盡量簡單，不用中文) | false | String | |
| projects[white] | 白名單（只生成白名單中的接口) | true | Array[String] | |
| projects[black] | 黑名單（不生成黑名單中的接口） | true | Array[String] |
-
配置文件的命名格式
支持以下文件格式- json
- yml
- ymal
- js
-
生成api層
easymock init . -
結果如下：
- 文件的介紹
這個文件是根據你的mock自動生成的api層，注釋是你mock中對接口的描述，函數名是你路由和方法的拼接。
咱們在項目中使用的提供的axios模板，所以，他已經在util.js文件中創建了axios的實例，所以，咱們之前在assets中的axios.js就不生效了。需要在util.js中進行攔截器的處理。
mock聯調與yu后端聯調的battle
因接口規范規定，再獲取表格數據的時候，我們需要把分頁的信息拼接在路由上，但是我們在mock上制定的url是 /salary/support/divideProportion/proportion/page/size，但是真的在真機聯調的時候，我們傳給后端的是具體的page和size,所以，就造成mock與后端聯調造成不一致的問題。有沒有解決的方案，讓mock聯調與與后端聯調保持一致呢？這樣子，也不用為難我們前端了。easy-mock-cli中沒有詳細的介紹，如何解決。但是你看utils的文件 就能發現其中的奧妙。
上圖中的第一個函數creatAPI,就是為了生成api層的模板，第二個函數convertRESTAPI（）就是為了在路由上拼接參數，通過path字段來標識，這對象中的數據是拼接在路由上的。
在項目中的使用：
mock接口的定義：
數據的請求：
在mock的接口地址中，需要使用{}來表明路由中的哪些字段是變量，在請求傳參的時候，需要用path字段來標識。
不經意間發現的驚喜
在post請求傳參的時候，發現在與后端的聯調過程中，參數傳不過去，好可怕呀，又要掉坑了！！axios的官網上的使用說明中，post 請求的參數 是通過data 來標識的，
如下：
而easy-mock-cli中沒有指定data參數，所以，咱們再數據請求傳參的時候，需要加data標識
這樣子，感覺終於能夠再mock聯調完之后，不用在去更改api層在去與后端聯調了。只要保證前后端開發的過程中，按着mock定好的接口，我們就可以很順利的聯調了。
自力更生，豐衣足食
除了使用 easy-mock-templates 提供的模板外，我們還可以自定義模板，以滿足不同的需求。如果你的業務需求，easy-mock-cli的模板不能滿足，就可以自己創建模板。關於他的介紹，在這里就不做太多的講解了。 可以看官方文檔學習一下：https://easy-mock.github.io/easy-mock-cli/#/?id=自定義模板
完美的ending
本篇博客介紹了easy-mock-cli如何在項目中使用，以及在使用的過程中遇見的坑。easy-mock-cli的兩大核心就是配置文件和API模板，首先要安裝好easy-mock-cli，然后配置你的mock的路徑，輸出文件，項目的名字和id。對項目進行初始化，這樣，生成api文件，你就離勝利只有一步之遙了。然后就要去看他util.js文件，通過看他的代碼來了解他的思想，因為他的官方文檔比較簡單的介紹了如何使用，而沒有具體的講解怎么避免與mock的聯調和與后端聯調 保持一致的問題。這種時候，就需要我們去看人家的源碼來理解。他是如何生成api層，如何通過axios進行數據的請求的。
突然發現在好多網站發現轉載，如需轉載請注明來源，本博客只為了與大家分享，謝謝。
轉載地址：https://i.cnblogs.com/EditPosts.aspx?postid=11242197