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

---

参考文档

• 官方文档
• 官网示例

转载于:https://www.cnblogs.com/yldf55/p/5707237.html