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 |