引言
今天我們來聊聊Mock，隨着互聯網發展，這兩年前後端分離的開發模式興起，Mock也從以住的幕後走上了檯面，讓更多的人而得知，以前傳統的開發方式Mock大多侷限在後端人員接觸較多一些。
Mock已經是老生常談了，網上一搜索就很多，各位前輩們都講的很到位，但今天我只講它——easy-mock。
爲什麼會突然來聊它，這個就說來話長了，個人簡介裏就說過，專注於分享工作中遇到的坑，但這一次不是我的坑，來源於QQ羣友（# 如果您有想知道的故事，而正好我也會，那麼就由我爲您講出來吧，歡迎留言哦 # ），請看下圖：
什麼是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"
}]
})
什麼是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更多強大之處自己去折騰吧，#用心分享 做有溫度的攻城獅#，希望今天的分享能給您帶來些許成長，如果覺得不錯記得點個贊哦，，順便關注下方公衆號就更棒了呢，每週爲您推最新分享👇👇。
更多文章：
immutability因React官方出鏡之使用總結分享！
小程序項目之做完項目老闆給我加了6k薪資～
小程序項目之填坑小記
面試踩過的坑，都在這裏了～
你應該做的前端性能優化之總結大全！
如何給localStorage設置一個過期時間？
動畫一點點 - 如何用CSS3畫出懂你的3D魔方？
動畫一點點 - 手把手教你如何繪製一輛會跑車
SVG Sprites Icon的使用技巧
作者：蘇南 - 首席填坑官
鏈接：https://blog.csdn.net/weixin_43254766
交流羣：912594095、公衆H：honeyBadger8
本文原創，著作權歸作者所有。商業轉載請聯繫@IT·平頭哥聯盟獲得授權，非商業轉載請註明原鏈接及出處。