Easy Mock的本地搭建和使用

Easy Mock 是一個可視化，并且能快速生成 模拟資料 的持久化服務。 忘掉下面這些實用但麻煩的 Mock 方式吧。在你用了 Easy Mock 之後，你肯定會愛不釋手的。

1、解決的問題

開發時，後端還沒完成資料輸出，前端隻好寫靜态模拟資料。

2、使用Easy Mock的優勢

• 前後端分離：讓前端工程師獨立于後端進行開發。
• 增加單元測試的真實性：通過随機資料，模拟各種場景。
• 開發無侵入：不需要修改既有代碼，就可以攔截Ajax請求，傳回模拟的響應資料。
• 用法簡單：符合直覺的接口。
• 資料類型豐富：支援生成随機的文本、數字、布爾值、日期、郵箱、連結、圖檔、顔色等。
• 友善擴充：支援支援擴充更多資料類型，支援自定義函數和正則。
• 在已有接口文檔的情況下，我們可以直接按照接口文檔來開發，将相應的字段寫好，在接口完成之後，隻需要改變url位址即可。

本地搭建easy-mock

搭建前提：需要已安裝node.js，且版本是8.v的版本，其它版本有可能使用不了esay-mock

1、下載下傳解壓 easy-mock項目

https://github.com/easy-mock/easy-mock

注意：config下面的default.json中host:"0.0.0.0"改成  "host": "127.0.0.1",不改可能會通路不到。

注意：node.js要8.v的版本

2、使用VSCode打開項目後執行指令

npm install​​​​​​​
           

等待相關依賴下載下傳完成。

3.安裝monggoDB (版本>= v3.4 )

安裝參考位址：https://www.runoob.com/mongodb/mongodb-window-install.html

安裝完成後記得打開連結，驗證是否能連接配接上monggoDB 。

4.安裝 redis （版本>= v4.0）

安裝參考位址：https://www.runoob.com/redis/redis-install.html

在redis安裝目錄按住shift+滑鼠右鍵打開cmd 執行如下指令

redis-server.exe redis.windows.conf
           

另啟一個 cmd 視窗測試redis，原來的不要關閉，不然就無法通路服務端了。

redis-cli.exe -h 127.0.0.1 -p 6379
           

set myKey abc
           

get myKey
           

測試完成，redis能正常使用。

5.運作Easy Mock

npn run dev
           

6.使用Easy Mock

輸入任務使用者名和密碼進入系統，然後建立項目

7.Mock資料的JSON示例

{
  "success": true,
  "code": 20000,
  "message": "demo示範",
  "data": {
    //随機産生1-10條資料
    "items|1-10": [{
      //id自動生成
      "id": "@id",
      //c表示中文，不加c就預設産生英文的
      "name": "@cname",
      //随機的中文句子
      "intro": "@csentence",
      //随機的段落
      "career": "@cparagraph",
      //清單值中選一個
      "level|1": [1, 2, 3],
      //生成文字頭像圖檔，寬高，背景色，前景色，文字
      "avator": "@image('200x100','#50B347','#FFF','Mock')",
      //排序字段，生成1-100直接的資料，示例1
      "sort|1-100": 1,
      //布爾值給一個值即可
      "deleted|1": true,
      //時間随機生成
      "gmtCreate": "@datetime",
      "gmtModified": "@datetime"
    }]
  }
}
           

上面是加了注釋的版本，下面這個可以直接複制使用

{
  "success": true,
  "code": 20000,
  "message": "demo示範",
  "data": {
    "items|1-10": [{
      "id": "@id",
      "name": "@cname",
      "intro": "@csentence",
      "career": "@cparagraph",
      "level|1": [1, 2, 3],
      "avator": "@image('200x100','#50B347','#FFF','Mock')",
      "sort|1-100": 1,
      "deleted|1": true,
      "gmtCreate": "@datetime",
      "gmtModified": "@datetime"
    }]
  }
}
           

生成的圖檔通路測試：

Mock的接口通路測試：