不為人知的easy-mock-cli

梔子花編織著留戀發表於2019-07-25
Mock

初識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"
       }
     ]
   }
![](https://img2018.cnblogs.com/blog/1323801/201907/1323801-20190725140456113-333562477.png)
  • 配置檔案的引數
屬性名 描述 可空 型別 預設值
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 .

  • 結果如下：

不為人知的easy-mock-cli

  • 檔案的介紹
    不為人知的easy-mock-cli
    這個檔案是根據你的mock自動生成的api層，註釋是你mock中對介面的描述，函式名是你路由和方法的拼接。

不為人知的easy-mock-cli

我們們在專案中使用的提供的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的檔案 就能發現其中的奧妙。
不為人知的easy-mock-cli
上圖中的第一個函式creatAPI,就是為了生成api層的模板，第二個函式convertRESTAPI（）就是為了在路由上拼接引數，通過path欄位來標識，這物件中的資料是拼接在路由上的。
在專案中的使用：
mock介面的定義：
不為人知的easy-mock-cli

資料的請求：
不為人知的easy-mock-cli

在mock的介面地址中，需要使用{}來表明路由中的哪些欄位是變數，在請求傳參的時候，需要用path欄位來標識。

不經意間發現的驚喜

在post請求傳參的時候，發現在與後端的聯調過程中，引數傳不過去，好可怕呀，又要掉坑了！！axios的官網上的使用說明中，post 請求的引數 是通過data 來標識的，
如下：
不為人知的easy-mock-cli
而easy-mock-cli中沒有指定data引數，所以，我們們再資料請求傳參的時候，需要加data標識
不為人知的easy-mock-cli

這樣子，感覺終於能夠再mock聯調完之後，不用在去更改api層在去與後端聯調了。只要保證前後端開發的過程中，按著mock定好的介面，我們就可以很順利的聯調了。

自力更生，豐衣足食

除了使用 easy-mock-templates 提供的模板外，我們還可以自定義模板，以滿足不同的需求。如果你的業務需求，easy-mock-cli的模板不能滿足，就可以自己建立模板。關於他的介紹，在這裡就不做太多的講解了。 可以看官方文件學習一下：https://easy-mock.github.io/easy-mock-cli/#/?id=%e8%87%aa%e5%ae%9a%e4%b9%89%e6%a8%a1%e6%9d%bf

完美的ending

本篇部落格介紹了easy-mock-cli如何在專案中使用，以及在使用的過程中遇見的坑。easy-mock-cli的兩大核心就是配置檔案和API模板，首先要安裝好easy-mock-cli，然後配置你的mock的路徑，輸出檔案，專案的名字和id。對專案進行初始化，這樣，生成api檔案，你就離勝利只有一步之遙了。然後就要去看他util.js檔案，通過看他的程式碼來了解他的思想，因為他的官方文件比較簡單的介紹瞭如何使用，而沒有具體的講解怎麼避免與mock的聯調和與後端聯調 保持一致的問題。這種時候，就需要我們去看人家的原始碼來理解。他是如何生成api層，如何通過axios進行資料的請求的。

相關文章