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

引言

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

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

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

淺談easy-mock 我有話要說

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

什麼是Mock

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

一張圖帶你看清，什麼叫備胎

如何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"
    }]//首席填坑官∙蘇南的專欄 交流：91259409五、公Z號：honeyBadger8
})

複製代碼

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

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

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

深刻淺出 - 簡介

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

  

  Easy Mock深刻淺出 - 簡介

深刻淺出 - Mock語法回顧

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

深刻淺出 - Mock語法回顧

深刻淺出 - 建立一個接口

• 它的寫法，跟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"
    }:{}
  }//首席填坑官∙蘇南的專欄 交流：91259409五、公Z號：honeyBadger8
}


複製代碼

深刻淺出 - 在線調試

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

深刻淺出 - 在線調試

結尾：

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

用心分享 一塊兒成長 ，作有溫度的攻城獅。

公衆號：IT平頭哥聯盟

做者：蘇南 - 首席填坑官

連接：blog.csdn.net/weixin_4325…

交流羣：91259409五、公衆H：honeyBadger8

本文原創，著做權歸做者全部。商業轉載請聯繫@IT·平頭哥聯盟得到受權，非商業轉載請註明原連接及出處。