介绍
mockjs 是一个强大的东西，根据官网上的一句话来描述：生成随机数据，拦截 Ajax 请求
具体的作用有：
- 基于 数据模板 生成模拟数据
- 基于 HTML模板 生成模拟数据
- 拦截并模拟 ajax 请求
解决问题
开发过程中，后端还没有写好接口，前端只能搁置任务或者手写模拟数据，然而这种数据往往有几个特点：
- 真实性较低
- 重复率过高
- 数据格式单一
- 以牺牲时间为代价改善以上几点
在开发过程中，花费大量的时间去写模拟数据是得不偿失的，这里 mockjs 就体现了它强大的地方。
它可以（官网上写的。。。）
- 让前端攻城师独立于后端进行开发
- 不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据
- 支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等
- 通过随机数据，模拟各种场景
- 符合直觉的接口
- 支持扩展更多数据类型，支持自定义函数和正则
项目中使用
本篇文章介绍的是 mockjs 结合 gulp 的实例，其中使用了 browser-sync 作为静态服务器，主要的 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 就会根据请求的地址进行拦截了。
返回的随机数据：
{
"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 的简单使用，更多的亮点会慢慢更新。:)
