mock.js的使用尝试

前段日子做了几个静态页，里面要展示表格、搜索和分页，还要实现效果，想了想用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了。

猜你喜欢