mock.js 的用处
- 前后端分离 ：让前端攻城师独立于后端进行开发。
- 增加单元测试的真实性 ：通过随机数据，模拟各种场景。
- 开发无侵入 ：不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。
- 用法简单 ：符合直觉的接口。
- 数据类型丰富 ：支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
- 方便扩展 ：支持支持扩展更多数据类型，支持自定义函数和正则。
配置模拟数据案例
Mock.mock('http://g.cn', {
'name' : '@name',
'age|1-100': 100,
'color' : '@color'
});
发送Ajax请求：
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://mockjs.com/dist/mock.js"></script>
<script type="text/javascript" src="data.js"></script>
<script type="text/javascript">
$.ajax({
url: 'http://g.cn',
dataType:'json'
}).done(function(data, status, xhr){
console.log(
JSON.stringify(data, null, 4)
)
})；
</script>
返回json数据
{
"name": "William Garcia",
"age": 74,
"color": "#f27c79"
}
mock.js 语法
Mock.js 的语法规范包括两部分：
- 数据模板定义规范（Data Template Definition，DTD）
- 数据占位符定义规范（Data Placeholder Definition，DPD）
数据模板定义规范 DTD
数据模板中的每个属性由 3 部分构成：** 属性名、生成规则、属性值：**
// 属性名 name
// 生成规则 rule
// 属性值 value
'name|rule': value
Mock.Random
方法
Mock.Random 提供的完整方法（占位符）如下：
| ** Type ** | ** Method** |
|---|---|
| Basic | boolean, natural, integer, float, character, string, range, date, time, datetime, now |
| Image | image, dataImage |
| Color | color |
| Text | paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle |
| Name | first, last, name, cfirst, clast, cname |
| Web | url, domain, email, ip, tld |
| Address | area, region |
| Helper | capitalize, upper, lower, pick, shuffle |
| Miscellaneous | guid, id |