前言： 在我们的实际开发当中， 后端的接囗往往是较晚才会出来。于是前端的许多开发都要等到后端的接囗出来了才能进行， 这样对于前端开发来说显得十分别动。如果有什么东西可以制造一些假的测试数据来模拟后端接囗的话， 那样前端开发就要方便很多了。
而Mock.js, 就刚好满足了这样的需求。Mock.js 的特点就是： 生成随机数据、拦截Ajax 请求。
使用：
- 下载mock.js
可百度搜索mock.js官网
也可以访问网址:https://raw.githubusercontent.com/nuysoft/Mock/refactoring/dist/mock.js
下载mock.js
- 在项目中引用mock.js
- mock的语法：
//语法
Mock.mock("请求地址","请求方式",{
返回数据的规则});
//例：
Mock.mock('./StudentInfo.do', "get", {
'list|4': [{
'id|+1': 1, //对象的id属性名依次加1
"name": '@cname()', //随机产生一个中文名
addr: '@county(true)', //随机产生一个地址
'age|18-60': 1, //随机产生一个数字 （范围在18~60之间）
birth: '@date()', //随机产生一个日期
sex: '@integer(0, 1)', //随机产生一个数学（0/1，0代表男，1代表女）
email: '@EMAIL()', //随机产生一个邮箱地址
'like|1':['看书','运动','听音乐'],//在数组中随机选择一个
'num1|1-100.2': 1, //1~100中随机产生一个数字并保留两位小数
mobile: /^1[3-9][0-9]{
9}$/ //以正则产生一个手机号
}]
})
//关于mock的更多用法以及规则可参考百度
使用mock拦截示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="btn">点我获取数据</button>
<!-- 这里引入jquery.js文件 -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<!-- 这里引入mock.js文件 -->
<script src="https://cdn.bootcss.com/Mock.js/1.0.1-beta3/mock-min.js"></script>
<script>
Mock.mock('./StudentInfo.do', "get", {
'list|4': [{
'id|+1': 1, //对象的id属性名依次加1
"name": '@cname()', //随机产生一个中文名
addr: '@county(true)', //随机产生一个地址
'age|18-60': 1, //随机产生一个数字 （范围在18~60之间）
birth: '@date()', //随机产生一个日期
sex: '@integer(0, 1)', //随机产生一个数学（0/1，0代表男，1代表女）
email: '@EMAIL()', //随机产生一个邮箱地址
'like|1':['看书','运动','听音乐'],//在数组中随机选择一个
'num1|1-100.2': 1, //1~100中随机产生一个数字并保留两位小数
mobile: /^1[3-9][0-9]{
9}$/ //以正则产生一个手机号
}]
})
btn.onclick = function () {
$.ajax({
type: "get", //请求的方式
url: "./StudentInfo.do", //请求地址
dataType: "json", //将服务器返回的数据转换为json对象
data: {
}, //传递给后台的参数 若没有可不写
success: function (data) {
//这里写获得数据后需要执行的代码 e就是从后台获得的json对象；
console.log(data);
}, asynh: true //设置使用同步或异步 ，可不写默认为异步
})
}
</script>
</body>
</html>
返回数据"data"示例：
ajax不熟怎么办？一篇教你看懂ajax编程
想了解ajax? 访问：ajax编程详解