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

蘇南發表於2018-11-26

引言

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

  Mock已經是老生常談了,網上一搜尋就很多,各位前輩們都講的很到位,但今天我只講它——easy-mock

  為什麼會突然來聊它,這個就說來話長了,個人簡介裡就說過,專注於分享工作中遇到的坑,但這一次不是我的坑,來源於QQ群友(# 如果您有想知道的故事,而正好我也會,那麼就由我為您講出來吧,歡迎留言哦 # ),請看下圖:

首席填坑官∙蘇南專欄,淺談easy-mock 我有話要說,寶劍鋒從磨礪出,梅花香自苦寒來,做有溫度的攻城獅!,公Z號:honeyBadger8
淺談easy-mock 我有話要說

這裡是@IT·平頭哥聯盟,我是首席填坑官蘇南,用心分享 做有溫度的攻城獅。公Z號:honeyBadger8,群:912594095

什麼是Mock

  什麼是Mock?? Mock其實就是真實資料存在之前,即除錯期間的代替品,是個虛擬的存在,用人話講它就是個備胎,如女生長的好看,追她的人多,但又不是很滿意但也不拒絕,在自己心儀的小哥哥出現之前,一直吊著你?!

一張圖帶你看清,什麼叫備胎,公Z號:honeyBadger8
一張圖帶你看清,什麼叫備胎

如何Mock資料?

  • 不要告訴我 new 一個哦,物件可以 new,備胎可new不出來呢?;
  • 方法一:最low的方式將 Mock 資料寫在程式碼裡、json檔案裡;
  • 方法二:利用 CharlesFiddler等代理工具,將 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"
}]//首席填坑官∙蘇南的專欄 交流:912594095、公Z號:honeyBadger8
})複製程式碼

什麼是easy-mock,能給我們帶來什麼?

  • Easy Mock 是一個視覺化,並且能快速生成 模擬資料 的持久化服務,
  • Easy Mock 支援基於 Swagger 建立專案,以節省手動建立介面的時間;
  • 簡單點說:Easy Mock就是一個線上建立mock的服務平臺,幫你省去你 配置安裝起服務維護多人協作Mock資料不互通等一系列繁瑣的操作, 它能在不用1秒鐘的時間內給你所要的一切,呼之即來、揮之即去的2018最優秀備胎沒有之一,完全不用擔心負任何責任哦。
  • 更多優點它在等你去發現哦……
什麼是easy-mock,能給我們帶來什麼?, Easy-mock讓團隊協作效率提高不止一點點
什麼是easy-mock,能給我們帶來什麼?

深入淺出 – 簡介

  • 就跟人一樣長的再好看,瞭解過後才懂,一樣東西也是如何,誰用誰知道;
  • 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語法回顧,公H號:honeyBadger8, Easy-mock讓團隊協作效率提高不止一點點
深入淺出 – Mock語法回顧

深入淺出 – 建立一個介面

  • 它的寫法,跟Mock.js一模一樣,上面程式碼已經展示過,更多示例
  • 使用Easy Mock建立一個介面,請看下圖:
深入淺出 - 建立一個介面,公Z好:honeyBadger8
深入淺出 – 建立一個介面

深入淺出 – 高階用法 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"
}:{
}
}//首席填坑官∙蘇南的專欄 交流:912594095、公Z號:honeyBadger8
}複製程式碼

深入淺出 – 線上除錯

  • 再優秀的工程師寫出的程式碼也一樣要測試,沒有人敢說自己的程式碼無Bug
  • Easy Mock 它是真的懂你的,已經為你準備好了,介面編寫好後,立馬就能讓你測試,
  • 是不是覺得很棒棒呢??如果是你自己本地寫mock資料,你需要重啟服務、手動寫引數、可能還需要整個測試頁,
  • 知道你已經非常飢渴迫切的想要知道,具體的除錯方式了:
  • 看不清嗎??已經為你備好線上除錯連結,支援POST、GET、PUT等方式,因gif圖載入比較大,就不一一演示了
深入淺出 - 線上除錯,公Z號:honeyBadger8
深入淺出 – 線上除錯

結尾:

  天下無不散之宴席,又到說再見的時候了,以上就是今天蘇南為大家帶來的分享,您GET到了嗎?Easy Mock更多強大之處自己去折騰吧,#用心分享 做有溫度的攻城獅#,希望今天的分享能給您帶來些許成長,如果覺得不錯記得點個贊哦,,順便關注下方公Z號就更棒了呢,每週為您推最新分享??。

用心分享 一起成長 ,做有溫度的攻城獅。

用心分享 一起成長 ,做有溫度的攻城獅
公眾號:IT平頭哥聯盟

作者:蘇南 – 首席填坑官

連結:blog.csdn.net/weixin_4325…

交流群:912594095、公眾H:honeyBadger8

本文原創,著作權歸作者所有。商業轉載請聯絡@IT·平頭哥聯盟獲得授權,非商業轉載請註明原連結及出處。

來源:https://juejin.im/post/5bfb36a2f265da61476fe444#comment

相關文章