前段日子做了几个静态页,里面要展示表格、搜索和分页,还要实现效果,想了想用mock能模拟后台请求,就尝试用了一下。
首先要在页面中引入mock.js,然后去模拟数据,这里我单独建了个文件data.js用来创建数据。
<script src="./js/mock.js"></script>
<script src="./js/data.js"></script>
首先要了解一下mock的基本用法。
Mock.mock('@string("number", 2)')
// 这句意思是随机生成一个2位数字的字符串
我们再生成假数据的时候就需要用到mock上述的语法,然后把生成的多个数据存放到一个list里面。
然后就是怎么发请求了,首先我们正常使用$ajax发送请求。
$.ajax({
url:'/api/list',
type: 'POST',
dataType:'json',
data: JSON.stringify({
pageNum: pageNum,
pageSize: 10
}),
success: function (res){
// 操作返回数据
}
})
接着在data.js中需要生成好假数据,同时处理相应的请求。
var dataList = [];
for (var i = 0; i < 46; i++) {
// 可自定义生成的个数
const template = {
id:Mock.mock('@id'),
name:Mock.mock('@cname'),
userNumber: Mock.mock('@string("number", 18)'),
time:Mock.mock('@date(yyyy-MM-dd HH:mm:ss)')
}
dataList.push(template)
}
Mock.mock('/api/list','post',function(params){
var info = JSON.parse(params.body)
var index = info.pageNum
var size = info.pageSize
var total = dataList.length
var len = total / size
var totalPages = Math.floor(len)
var newDataList = dataList.slice(index * size, (index + 1) * size)
return {
'code': '0',
'message': 'success',
'data': {
'data': newDataList,
'total': total,
'totalPages': totalPages
}
}
});
这样在发送ajax请求后就会被mock拦截并形成相应的数据返回到success函数的res中去,然后我们对返回值进行处理就OK了。