前后分離的開發(fā)模式中，我們難免需要mock數(shù)據(jù)固惯，一說到mock數(shù)據(jù)我們就想到大名鼎鼎的mockjs凌摄，但是每次使用mock數(shù)據(jù)時涡驮，我們都需要引入mockjs，為了做到對原始代碼不做到侵入镇辉，我們還需要將mock的數(shù)據(jù)用單獨文件保存词身，為了模擬線上環(huán)境還要本地搭建個服務器厅目，總之就是比較麻煩。法严。损敷。
為此我做了一個vscode拓展，Mock-Myself渐夸，它提供了如下功能:
- 1.自動在項目工程生成文件夾保存mock數(shù)據(jù)嗤锉，方便其他人使用mock數(shù)據(jù)
- 2.自動在本地啟動mock服務器
- 3.自定義mock數(shù)據(jù)，符合mockjs生成規(guī)則
- 4.圖形化界面墓塌，方便查看使用
- 5.自定義接口數(shù)據(jù)規(guī)則
- 6.適配vscode主流主題色
- 7.支持多個命令瘟忱，更加方便使用。
如下圖 我們在vscode插件中搜索Mock-Myself插件苫幢，下載安裝后執(zhí)行 mock-myself 就可啟動mock服務器访诱，開始我們的mock數(shù)據(jù)了。
如何使用呢韩肝？
一般情況下我們只需要簡單生成mock數(shù)據(jù)触菜，那么我們只需要寫入我們簡單的mock數(shù)據(jù)，這個mock數(shù)據(jù)是基于mockjs生成的哀峻，想生成一些特殊的mock數(shù)據(jù)你可以查看mockjs 使用涡相。
有時我們需要根據(jù)提交數(shù)據(jù)不同來生成不同的數(shù)據(jù)，這時我們就需要用到query這個函數(shù)了剩蟀。
/**
* req：是請求接口提交的數(shù)據(jù)對象
* fn：是執(zhí)行函數(shù)回調(diào)催蝗，函數(shù)的參數(shù)是需要生成mock數(shù)據(jù)
**/
function query(req,fn){
}
舉個例子：假如我們有這樣一個接口--‘http://localhost:8989/test/deatil’；現(xiàn)在我們需要根據(jù)請求參數(shù)不同返回不同數(shù)據(jù)如下：
const url = http://localhost:8989/test/deatil;
$.post(url,
{name:'mock-self'},
function(result){
console.log(result);
// 期望數(shù)據(jù) {id:'370000201007178245',name:'Mock-Myself'}
})
$.post(url,
{name:'easy-mock'},
function(result){
console.log(result);
// 期望數(shù)據(jù) {id:'370000201007178245',name:'Easy-Mock'}
})
從上面代碼可以看出來育特，我們請求參數(shù)name不同需要返回不同的數(shù)據(jù)丙号。Mock-myself就可以很方便實現(xiàn)：
function query(req,fn){
switch (req.name) {
case 'mock-myself':
fn({id: '@id',name:'mock-self'})
break;
case 'easy-mock':
fn({id: '@id',name:'easy-mock'})
break;
default:
fn(true)
}
}
通過fn參數(shù)來自定義mock返回的數(shù)據(jù)，這樣以后我們想怎么mock就怎么mock缰冤，根據(jù)需要變化mock數(shù)據(jù)犬缨，讓我們可以模擬更多是環(huán)境和狀態(tài)。
小貼士
Mock-Myself目前支持下面三個命令：
mock-myself:啟動mock服務器和可視化操作界面（啟動服務器同時生成可視化界面編輯mock數(shù)據(jù)）
mock-run:直接啟動mock服務器（一般本地數(shù)據(jù)都寫好棉浸，只需要啟動服務是使用）
mock-stop:停止mock服務器
Mock-Myself用起來雖然很爽但是還是有幾點要注意：
- mock服務器會在你工作的項目中生成一個_MOCK_的文件夾存放mock數(shù)據(jù)怀薛，所有項目中不要用_MOCK_文件名；
- mock服務器會啟動8989端口迷郑，所以建議不要占用乾戏；
- 一般情況直接編寫mock數(shù)據(jù)迂苛，如果需要自定義規(guī)則時編寫
query函數(shù)記得一定要執(zhí)行fn回調(diào)； - 每次請求接口數(shù)據(jù)都會變化鼓择，如果想數(shù)據(jù)保持不變的話在請求參數(shù)加上{...data,default:true}
（當然在下一個迭代中這些問題都不會存在了）
[Unreleased]
- 增加自定義 mock 根目錄
- 動態(tài)配置mock服務端口
- 自定義規(guī)則query函數(shù)支持異步規(guī)則
- ...
