介紹
mockjs 是一個強大的東西，根據(jù)官網上的一句話來描述：生成隨機數(shù)據(jù)，攔截 Ajax 請求
具體的作用有：
- 基于 數(shù)據(jù)模板 生成模擬數(shù)據(jù)
- 基于 HTML模板 生成模擬數(shù)據(jù)
- 攔截并模擬 ajax 請求
解決問題
開發(fā)過程中鼓蜒，后端還沒有寫好接口，前端只能擱置任務或者手寫模擬數(shù)據(jù)征字，然而這種數(shù)據(jù)往往有幾個特點：
- 真實性較低
- 重復率過高
- 數(shù)據(jù)格式單一
- 以犧牲時間為代價改善以上幾點
在開發(fā)過程中都弹，花費大量的時間去寫模擬數(shù)據(jù)是得不償失的，這里 mockjs 就體現(xiàn)了它強大的地方匙姜。
它可以（官網上寫的畅厢。。氮昧。）
- 讓前端攻城師獨立于后端進行開發(fā)
- 不需要修改既有代碼框杜，就可以攔截 Ajax 請求，返回模擬的響應數(shù)據(jù)
- 支持生成隨機的文本袖肥、數(shù)字咪辱、布爾值、日期昭伸、郵箱梧乘、鏈接、圖片庐杨、顏色等
- 通過隨機數(shù)據(jù)选调，模擬各種場景
- 符合直覺的接口
- 支持擴展更多數(shù)據(jù)類型，支持自定義函數(shù)和正則
項目中使用
本篇文章介紹的是 mockjs 結合 gulp 的實例灵份，其中使用了 browser-sync 作為靜態(tài)服務器仁堪，主要的 js 文件有 gulpfile.js 與 mock.js。
/**
* gulpfile.js
*/
// 這里省略了其他插件的定義
var browserSync = require('browser-sync').create();
var mock = require('./mock/mock.js');
gulp.task('server', ['build', 'watch'], function () {
browserSync.init({
server: {
middleware: mock.api() // 這里配置中間件
}
})
})
/**
* mock.js
*/
var Mock = require('mockjs');
var url = require('url');
exports.api = function () {
return [
{
route: '/api',
handle: function (req, res, next) {
var urlObj = url.parse(req.url, true),
method = req.method;
res.setHeader('Content-Type', 'application/json');
switch (urlObj.pathname) {
case '/data':
if (method === "GET") {
res.end(JSON.stringify(
{
"status": "GET data"
}
));
return;
} else if (method === "POST") {
res.end(JSON.stringify(
{
"status": "POST data"
}
));
return;
} else {
res.end(JSON.stringify(
{
"status": "error"
}
));
return;
}
default:
res.end(JSON.stringify(
Mock.mock(
{
"items|6": [{
'title': '@cword(6)',
'url': "@url()",
'name': "@cname(2,3)",
'id|0-200': 1,
'percent': /\d{1,2}[\.]\d{1}[%]{1}/
}]
}
)
));
}
}
}
]
};
這里我把 mock.js 里面寫的很長填渠，目的是為了明確不同的請求地址與方法所對應的情況弦聂，其中 default 內的寫法就是 mock 中最大的亮點了鸟辅，具體的寫法看這里。
最后就可以去使用 ajax 了：
$.ajax({
url: "/api/data",
type: "POST",
data: {
test: 1
},
success: function(data){
console.log(data);
},
error: function(err){
console.log(err);
}
})
mockjs 就會根據(jù)請求的地址進行攔截了莺葫。
返回的隨機數(shù)據(jù)：
{
"items": [
{
"title": "問市制具飛再",
"url": "mailto://jyvzt.pt/ihxiwr",
"name": "易敏",
"id": 95,
"percent": "7.0%"
},
{
"title": "百老三行如斗",
"url": "rlogin://ndgwuqcv.eh/eorgshc",
"name": "錢磊",
"id": 106,
"percent": "0.5%"
},
{
"title": "教林技我組增",
"url": "nntp://djrenaicjt.es/xwnpkwuy",
"name": "胡濤",
"id": 154,
"percent": "80.5%"
},
{
"title": "切什被五多情",
"url": "telnet://jqnmjot.nl/ouau",
"name": "田麗",
"id": 13,
"percent": "76.2%"
},
{
"title": "問低連且三了",
"url": "nntp://hvhqclj.coop/bnfrg",
"name": "傅杰",
"id": 103,
"percent": "63.8%"
},
{
"title": "計與此元已給",
"url": "nntp://pwjlpbyg.cu/pmfgy",
"name": "黎秀蘭",
"id": 46,
"percent": "83.1%"
}
]
}
結尾
上面就是 gulp + mockjs 的簡單使用匪凉，更多的亮點會慢慢更新。:)
