MOCK.JS 生成随机数据,拦截 Ajax 请求

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 的语法规范包括两部分:

  1. 数据模板定义规范(Data Template Definition,DTD)
  2. 数据占位符定义规范(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

参考文档

上一篇:PAT甲级 1032 Sharing


下一篇:PAT 甲级 1013 Battle Over Cities