Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：
1.根据数据模板生成模拟数据
2.模拟 Ajax 请求，生成并返回模拟数据
3.基于 HTML 模板生成模拟数据
无意间发现mock很好用，可以在前端完全模拟后端的数据，使前端的工作可以独立于后端进行，尤其是在前后端分离的今天更是不可或缺的。故写了一个简单的demo以便记录mock的学习。
mock知识点介绍：
Mock.mock()
1.Mock.mock(template)
根据数据模板生成模拟数据。
2.Mock.mock(rurl, template)
记录数据模板，当拦截到匹配的 Ajax 请求时，生成并返回模拟数据。
参数的含义和默认值如下所示：
参数 rurl：可选。表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如 //domain/list.json/、'/domian/list.json'。
参数 template：必须。表示数据模板，可以是对象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。
数据模板中的每个属性由 3 部分构成，以 'data|1-10':[{}] 为例：
属性名：例如 data。
参数：指示生成数据的规则。例如 |1-10，指示生成的数组中含有 1 至 10 个元素。
属性值：表示初始值、占位符、类型。例如 [{}]，表示属性值一个数组，数组中的元素是 {}。属性值中含有占位符时，将被替换为对应的随机数据，例如 'email': '@EMAIL'，'@EMAIL'将被替换为随机生成的邮件地址。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<button type="button">點擊查看控制台</button>
</div>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="http://mockjs.com/dist/mock.js"></script>
<script type="text/javascript">
//调用mock方法模拟数据
let template = {
"userName": '@name', //模拟名称
"age|1-100": 100, //模拟年龄(1-100)
"color": "@color", //模拟色值
"date": "@date('yyyy-MM-dd')", //模拟时间
"url": "@url()", //模拟url
"content": "@cparagraph()" //模拟文本
};
//拦截所有的.json类型的ajax请求
let result = Mock.mock(/\.json/, template);
//ajax请求
$("button").on("click", function() {
console.log(result )
$.ajax({
url: "abczzzz.json", //请求的url地址(只需要包含.json)
dataType: "json", //返回格式为json
async: true, //请求是否异步，默认为异步，这也是ajax重要特性
data: {}, //参数值
type: "GET", //请求方式
beforeSend: function() {},
success: function(req) {
console.log(req);
},
complete: function() {},
error: function() {}
});
});
</script>
</body>
</html>
网友评论