那最后一节课呢，我们要去说一下前面所遗漏的那几个方法，咱们把它说完之后呢，整个mockJS呢，就算是已经OK了啊。
第一个方法呢，是
Mock.mock( )
数据模板
你看，所有的数据模板是不是都需要去放到这个Mock.mock( ) 当中啊，放到这个方法当中。放到这个方法当中之后呢，我们的数据模板【‘data1|1-4’: ‘陈学辉’, 】才能够真正的解析成一个你想要的那个数据啊，这是第一次用，然后呢，
第二次用呢就是在我们的这个
数据占位符
之前是使用
Random
而在这儿的时候呢，我们用数据占位符想要去生成这个数据怎么办？也是需要通过这个Mock.mock( ) 这个方法，把数据占位符呢当做参数呢，给它传进来，传进来之后呢，就跟我们上边的这个Random去调这个方法是一模一样的。
所以mock( ) 这个方法，第一个功能就是用来生成数据的，当然它需要去根据我们传入的数据模板或者说数据占位符，然后才给你生成相应的一些数据啊。那这个呢仅仅是mock( ) 这个方法的第一个功能，也就是咱们现在已经学的它的第一个功能，那它的功能不止于此，还有另外一个非常强大的功能是什么呢，它可以用来拦截这个ajax的请求。
Mock.JS我们在第一节课的时候说过啊，它有两个特征，第一个呢，就是说它能够生成随机的数据，这个我们已经学会了。第二个特征呢就是说它能够拦截这个ajax的请求，所以说呢，它完全体现了两个功能啊。好，那我们来说一下这个拦截ajax的请求啊，
我们在做开发的时候呢，需要跟后端进行一个数据的交互，那这个交互呢，咱们怎么去交互的呢，当然，这个交互的方式有很多，是不是咱们熟悉的，比如说这个ajax等方式，咱们不去讨论啊，
我们要说的是什么呢，ajax的这种请求，如果说你使用的这种方法去请求数据的话，那是不是必须要有一个后端呀，要有后端吧，另外一个呢，就是说我们在本地测试的话还不行，必须要放在一个服务器的一个环境当中，这是ajax的这种请求它的一个特征。那好，那这两个特征呢我们来说一下啊，
首先第一个呢，就是我们后端，那你看啊，我们的Mock.JS它其实就是为了能够省去后端跟后端那个环节，我们前端直接拿数据，
那前端去用那这个怎么去用呢？
我们项目真正最终肯定是需要去交互的，这个交互假设就是要通过这个ajax，那这个时候呢，你看我们前端发请求，发完请求之后呢，后端需要响应，响应完之后呢，他才把数据丢过来。那你说现在没有后端，那我们怎么办呢，这就需要用到这个拦截ajax，它怎么去拦截呢，是这样的，你正常的去发请求，后端有没有无所谓，咱可以模拟数据，
当然我们的请求不光可以去请求后端的那些文件，我们还可以去请求js， json ，text等等这些文件都能请求，那这些文件我们在前端是不是就可以去自己创建呀，比如说请求的是一个json的这么一个文件，那我自己去创建一个json的文件之后呢，然后你通过ajax去请求，就请求这个地址，那请求之后呢，那后端要响应呀，那现在要注意了，这个Mock,mock( )这个方法，它就能够把这个请求给你拦截了。拦截了是啥意思呢，你就不用去跟后端去发了，其实相当于说啊，就是你发的这个请求呢，它没有到后端，在发送中间呢就被Mock.mock( )这个方法拦截了，拦截之后呢它会给你返回数据，这个Mock.mock( )会给你返回数据，返回的是什么数据呢，就是我们前面那两节课所说的，通过我们的数据模板以及通过我们的数据占位符，或者说通过这个Random身上的这些方法所生成的这些数据，也就是说我们现在呢，可以自己先通过这些方法,去生成一堆咱们想要的那个数据。然后呢，接下来再通过这个Mock.mock( )这个方法，把我们的ajax拦截了，拦截了之后呢，再把刚才咱们所生成的那些数据呢，丢给这个ajax它的返回值。其实丢给的是谁啊,就是我们前端嘛。这个呢，就是它的一套流程，明白吧
那流程说完了之后呢,那接下来咱就要去着重的去介绍一下这个Mock.mock( )方法。那这个方法呢，我们来说一下啊，
Mock.mock( url, type?, template|function（） )
它总共有三个参数
url, type,template
静态 JSON 数据的搭建，模拟后台服务器
{
"status": "success",
"msg": "查询成功",
"data": [
{
"id": 6,
"name": "张某某2",
"birth": 1997,
"sex": 1,
"sNo": "11009",
"email": "382246268@qq.com",
"phone": "18846411586",
"address": "黑龙江省哈尔滨市XXXX",
"appkey": "demo13_1545210570249",
"ctime": 1547190636,
"utime": 1547190636
},
{
"id": 7,
"name": "张某某2",
"birth": 1997,
"sex": 1,
"sNo": "11010",
"email": "382246268@qq.com",
"phone": "18846411586",
"address": "黑龙江省哈尔滨市XXXX",
"appkey": "demo13_1545210570249",
"ctime": 1547190666,
"utime": 1547190666
}
]
}
模拟前端获取服务器数据，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<script src="js/mock.js"></script>
<script src="js/jquery-3.4.1.min.js"></script>
<button id="btn">请求数据</button>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>邮箱</th>
<th>生日</th>
<th>手机号</th>
<th>住址</th>
<th>操作</th>
</tr>
</thead>
<tbody id="table-body"></tbody>
</table>
<script>
$('#btn').click(function () {
$.ajax({
url: 'js/data.json', //请求这个路径的文件js/data.json
type: 'get',
dataType: 'json',//返回数据类型是json
//ajax请求成功，则会自动调用success方法，请求到的数据会当参数传给data
success: function (data) {
console.log(data);
createDom(data.data);//深入数据
}
});
});//成功将拿到的数据打印到了控制台
function createDom(data) {
var str = '';//str变量用来存储结构
data.forEach(function (item, index) {
//ES6中模板字符串语法
str += `
<tr>
<td>${item.sNo}</td>
<td>${item.name}</td>
<td>${item.sex}</td>
<td>${item.email}</td>
<td>${item.birth}</td>
<td>${item.phone}</td>
<td>${item.address}</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
`;
});
$('#table-body').html(str);
};
</script>
</body>
<html></html>
</html>
我们已经完成了前端页面和静态 JSON 数据的搭建并实现前端向服务器请求数据并接收响应数据的过程。
现在我们来用 Mock.js 替代你的 data.json 文件，即实现Mock.mock( )的请求拦截，并返回Mock.mock( )的模拟数据给前端使用，
实现：
✅ 不依赖真实文件、【用 Mock.js 完全替代真实 JSON 文件】
✅ 动态生成大量模拟数据、
✅ 拦截 AJAX 请求并返回“假但合法”的响应
✅ 让你的表格显示更丰富、更多样化的测试数据
🎯 目标：用 Mock.js 完全接管你的 AJAX 请求
当前情况分析
你现在有：
✅ 一个静态文件：js/data.json → 返回 2 条学生数据
✅ 一个页面：点击按钮后通过 jQuery 的 $.ajax() 请求JSON
✅ 数据渲染到表格中
🎯 目标升级：
不让浏览器真的去读 data.json，而是让 Mock.js “假装”它是服务器，返回格式相同但内容随机的大量数据。
Mock.mock()拦截数据
Mock.mock(url,template )拦截请求的地址，接收Mock.mock()模板生成数据
Mock.mock('js/data.json', {
"status": "success",
"msg": "查询成功",
//创造数据阶段【data|10:[] 把数组里的元素重复10次并组成新的数组】
"data|10": [{
"id|+1": 1, //你现在是生成10条数据，而这10条数据的属性id会每条累加
"name": "@cname",
"birth": "@date",
"sex|1": ['男', '女'],
"sNo|+1": 11000,
"email": "@email",
"phone": "@natural(13000000000,19900000000)",
"address": "@county(true) @ctitle(5,10)",
"appkey": "@string(4,7)_@date(T)",
"ctime": "@date(T)",
"utime": "@date(T)"
}],
});
你原来的 AJAX 请求完全不用改！
$.ajax({
url: 'js/data.json', // ✅ 这个地址正好被上面的 Mock 拦截了！
type: 'get',
dataType: 'json',
success: function (data) {
console.log(data);
createDom(data.data);
}
});
👉 效果：
浏览器以为自己在请求 js/data.json
实际上被Mock.mock( )拦截根本没有发出请求
Mock.js 直接返回上面定义的 10 条随机数据！
有时间学习下这个平台
https://github.com/YMFE/yapi
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
