引言
今天我們來聊聊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支援
團隊協作，也可以是個人專案， - 以下以個人專案為例，與多人協作沒有區別，只是少了成員邀請；
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·平頭哥聯盟獲得授權，非商業轉載請註明原連結及出處。