引言
今天我們來聊聊Mock
,隨著網際網路發展,這兩年前後端分離的開發模式興起,Mock也從以住的幕後走上了檯面,讓更多的人而得知,以前傳統的開發方式Mock大多侷限在後端人員接觸較多一些。
Mock
已經是老生常談了,網上一搜尋就很多,各位前輩們都講的很到位,但今天我只講它——easy-mock。
為什麼會突然來聊它,這個就說來話長了,個人簡介裡就說過,專注於分享工作中遇到的坑,但這一次不是我的坑,來源於QQ群友(#
如果您有想知道的故事,而正好我也會,那麼就由我為您講出來吧,歡迎留言哦 #
),請看下圖:
這裡是@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"
}]//首席填坑官∙蘇南的專欄 交流:912594095、公Z號:honeyBadger8
})複製程式碼
什麼是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"
}:{
}
}//首席填坑官∙蘇南的專欄 交流:912594095、公Z號:honeyBadger8
}複製程式碼
深入淺出 – 線上除錯
- 再優秀的工程師寫出的程式碼也一樣要測試,沒有人敢說自己的程式碼無
Bug
, Easy Mock
它是真的懂你的,已經為你準備好了,介面編寫好後,立馬就能讓你測試,- 是不是覺得很棒棒呢??如果是你自己本地寫mock資料,你需要重啟服務、手動寫引數、可能還需要整個測試頁,
- 知道你已經非常飢渴迫切的想要知道,具體的除錯方式了:
- 看不清嗎??已經為你備好線上除錯連結,支援POST、GET、PUT等方式,因gif圖載入比較大,就不一一演示了
結尾:
天下無不散之宴席,又到說再見的時候了,以上就是今天蘇南
為大家帶來的分享,您GET到了嗎?Easy Mock
更多強大之處自己去折騰吧,#
用心分享 做有溫度的攻城獅#
,希望今天的分享能給您帶來些許成長,如果覺得不錯記得點個贊哦,,順便關注下方公Z號就更棒了呢,每週為您推最新分享??。
用心分享 一起成長 ,做有溫度的攻城獅。
作者:蘇南 – 首席填坑官
交流群:912594095、公眾H:
honeyBadger8
本文原創,著作權歸作者所有。商業轉載請聯絡
@IT·平頭哥聯盟
獲得授權,非商業轉載請註明原連結及出處。