淺談easy-mock 最好的備胎沒有之一

時間 2019-11-06

標籤淺談 easy mock 最好沒有之一简体版

原文原文鏈接

引言

　　今天咱們來聊聊Mock，隨着互聯網發展，這兩年先後端分離的開發模式興起，Mock也從以住的幕後走上了檯面，讓更多的人而得知，之前傳統的開發方式Mock大多侷限在後端人員接觸較多一些。前端

　　Mock已是老生常談了，網上一搜索就不少，各位前輩們都講的很到位，但今天我只講它——easy-mock。node

　　爲何會忽然來聊它，這個就說來話長了，我的簡介裏就說過，專一於分享工做中遇到的坑，但這一次不是個人坑，來源於QQ羣友（# 若是您有想知道的故事，而正好我也會，那麼就由我爲您講出來吧，歡迎留言哦 # ），請看下圖：
git

這裏是 @IT·平頭哥聯盟，我是 首席填坑官— 蘇南,用心分享作有溫度的攻城獅。

什麼是Mock

　　什麼是Mock?? Mock其實就是真實數據存在以前，即調試期間的代替品，是個虛擬的存在，用人話講它就是個備胎，如女生長的好看，追她的人多，但又不是很滿意但也不拒絕，在本身心儀的小哥哥出現以前，一直吊着你😂！
github

如何Mock數據？

不要告訴我 new 一個哦，對象能夠 new，備胎可new不出來呢🤫；
方法一：最low的方式將 Mock 數據寫在代碼裏、json文件裏；
方法二：利用 Charles 、Fiddler等代理工具，將 URL 映射到本地文件；
方法三：本地起 Mock Server，即mockjs，有點麻煩每次修改了後還要重啓服務，nodemon能解決，但開的東西多了，電腦卡出翔，維護也麻煩；
方法四：規範些的公司本身已經集成了一套mock數據體系；
重點來了：easy-mock一個在線 Mock 平臺，活兒好又性感是你備胎的最佳選擇。
固然優秀的你可能還有不少其餘的方式，歡迎補充。

//mock 基本使用示例
import Mock from "mockjs";
Mock.mock({
    "code": 0,
    "message": "請求成功",
    "data|20": [{
        "name": "@cname",//cname 中文，name 英文
        "userId": "@id",
        "lastDate": "@datetime"
    }]
})

什麼是easy-mock，能給咱們帶來什麼？

Easy Mock 是一個可視化，而且能快速生成模擬數據的持久化服務，
Easy Mock 支持基於 Swagger 建立項目，以節省手動建立接口的時間；
簡單點說：Easy Mock就是一個在線建立mock的服務平臺，幫你省去你配置、安裝、起服務、維護、多人協做Mock數據不互通等一系列繁瑣的操做，它能在不用1秒鐘的時間內給你所要的一切，呼之即來、揮之即去的2018最優秀備胎沒有之一，徹底不用擔憂負任何責任哦。
更多優勢它在等你去發現哦……

深刻淺出 - 簡介

就跟人同樣長的再好看，瞭解事後才懂，同樣東西也是如何，誰用誰知道；
Easy Mock支持團隊協做，也能夠是我的項目，
如下以我的項目爲例，與多人協做沒有區別，只是少了成員邀請；

深刻淺出 - Mock語法回顧

@ip -> 隨機輸出一個ip；
@id -> 隨機輸出長度18的字符，不接受參數；
"array|1-10" -> 隨機輸出1-10長度的數組，也能夠直接是固定長度；
"object|2" -> 輸出一個兩個key值的對象，
"@image()" 返回一個佔位圖url，支持size, background, foreground, format, text；
等等，這裏就再也不一一介紹。

深刻淺出 - 建立一個接口

它的寫法，跟Mock.js如出一轍,上面代碼已經展現過，更多示例
使用Easy Mock建立一個接口，請看下圖：

深刻淺出 - 高階用法 Function

在線編輯，它也能支持 function ，
是否是很優秀，能獲取到所有請求頭，可讓咱們像寫在js裏同樣寫邏輯，寫運算，
固然它確定是還有不少侷限性的，如並不支持ES6，
有一點須要注意的是 function 裏要寫傳出Mock對象，不能直接@...，
來看示例：

對象	描述
Mock	Mock 對象
_req.url	得到請求 url 地址
_req.method	獲取請求方法
_req.params	獲取 url 參數對象
_req.querystring	獲取查詢參數字符串(url中?後面的部分)，不包含 ?
_req.query	將查詢參數字符串進行解析並以對象的形式返回，若是沒有查詢參數字字符串則返回一個空對象
_req.body	當 post 請求以 x-www-form-urlencoded 方式提交時，咱們能夠拿到請求的參數對象
...	_req.cookies、ip、host等等，`我只是一個代碼的搬運`，更詳細請看這裏

//簡單模擬登陸，根據用戶傳入的參數，返回不一樣邏輯數據
{
  defaultName:function({_req}){
    return _req.query.name;
  },
  code: function({_req}){
    return this.defaultName ? 0 : -97;
  },
  message: function({_req}) {
    return this.defaultName ? "登陸成功" : "參數錯誤";
  },
  data: function({_req,Mock}){
    return this.defaultName ? {
      token: Mock.mock("@guid()"),
      userId: Mock.mock("@id(5)"),
      cname: Mock.mock("@cname()"),
      name: Mock.mock("@name()"),
      avatar: Mock.mock("@image(200x100, #FF6600)"),
      other:"@IT·平頭哥聯盟-首席填坑官∙蘇南 帶你再談Mock數據之easy-mock"
    }:{}
  }
}

深刻淺出 - 在線調試

再優秀的工程師寫出的代碼也同樣要測試，沒有人敢說本身的代碼無Bug，
Easy Mock 它是真的懂你的，已經爲你準備好了，接口編寫好後，立馬就能讓你測試，
是否是以爲很棒棒呢？？若是是你本身本地寫mock數據，你須要重啓服務、手動寫參數、可能還須要整個測試頁，
知道你已經很是飢渴迫切的想要知道，具體的調試方式了：
看不清嗎？？已經爲你備好在線調試連接，支持POST、GET、PUT等方式，因gif圖加載比較大，就不一一演示了

結尾：

　　天下無不散之宴席，又到說再見的時候了，以上就是今天蘇南爲你們帶來的分享，您GET到了嗎？Easy Mock更多強大之處本身去折騰吧，#用心分享作有溫度的攻城獅#，但願今天的分享能給您帶來些許成長，若是以爲不錯記得點個贊哦，，順便關注下方公衆號就更棒了呢，每週爲您推最新分享👇👇。面試

淺談easy-mock 最好的備胎沒有之一

更多文章：