1.模拟分页数据
注:在这里默认已经拥有easy mock账号,并会基本的创建接口,
"name|1"是随机返回数组的其中一项, 写法自行参照 百度-> mock.js ->语法规则
将代码全部拷贝下来,复制到easy mock 上的模拟接口
复制接口api地址输入浏览器,输入两个参数,api?page=1&pageSize=10
第一个参数表示第几页,第二个参数表示返回几条数据
(page,pageSize可自行修改名字,将代码中对应地方代码替代)
{
"success": true,
"count": 1000, //数据长度
"data": function({
_req,
Mock
}) {
let i = 0,
_data = [],
page = _req.query.page, //当前页数
pageSize = _req.query.pageSize, //每次返回的条数
len = (1000 - pageSize * (page - 1)) < pageSize ? (1000 - pageSize * (page - 1)) : pageSize;
for (i; i < len; i++) {
_data.push(
Mock.mock({
"id": (page - 1) * pageSize + (i + 1),
"name|1": [
'钢铁战狼', '梦之队',
'博时基金', '平安保险'
],
"urlImg|1": [
'https://goss.veer.com/creative/vcg/veer/612/veer-134669323.jpg',
'https://goss2.veer.com/creative/vcg/veer/612/veer-133071017.jpg',
'https://goss.veer.com/creative/vcg/veer/612/veer-147395960.jpg',
'https://goss4.veer.com/creative/vcg/veer/612/veer-161959036.jpg'
],
"num": "123456789"
})
);
}
return _data;
},
"msg": "请求数据成功"
}
效果图:
1.4号新增:
有位小伙伴评论说数据返回为空,我自己也测试了一下,get 方式在 ajax 请求暂时没发现什么问题,请求方式为 post 的时候,浏览器是能正常有数据返回的,但是发送 ajax 请求的时候data返回为空。
分页数据一般都是get请求,使用的时候使用get请求即可,至于post请求返回为空问题,暂时还没找到解决方法,后续问题找到了会及时把解决方法贴上
以下是post请求演示
浏览器返回有数据:
ajax请求:
返回数据data为空: