Easy Mock模拟数据(实现模拟后台数据分页)

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为空:

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_43233914/article/details/84841148
今日推荐