Easy Mock模拟数据，实现模拟后台数据分页，get,post方式均可

前言

01）本篇文章不介绍如何创建账号，以及创建接口，如果没有账号的话花个5分钟左右创建一个账号，并创建一条接口，附上传送门：Easy Mock官网

02）文章中使用了 “name|1：[ ]” 的写法，这里用到的是mock.js的语法，表示随机返回数组的其中一项，附上传送门：mock.js语法规则

easy mock接口
01）将代码片段全部拷贝下来，复制到 easy mock 的模拟接口上

02）复制接口api链接到浏览器的地址栏，输入两个参数，api?page=1&pageSize=10 （页数，条数）

03）page, pageSize 可自行修改名字，并不是写死的，如需修改将下面代码对应地方的进行修改即可

以下是使用get请求的代码（post请求稍微有点区别，请使用文章后面1.26新增部分）

{
  "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),
         "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'
          ]
        })
      );
    }
    return _data;
  },
  "msg": "请求数据成功"
}

1.26号新增：
01）get请求和post请求稍微有一点区别，需要修改两行代码 _req.query.page 和 _req.query.pageSize 替换成 _req.body.page 和 _req.body.page

以下是使用post请求的代码

{
  "count": 1000,
  "data": function({
    _req,
    Mock
  }) {
    let i = 0,
      _data = [],
      page = _req.body.page, // 页数
      pageSize = _req.body.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),
          "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'
          ]
        })
      );
    }
    return _data;
  },
  "msg": "请求数据成功"
}

在浏览器效果图:
以下是get请求再浏览器的样子

以下是post请求在浏览器的样子，可以看见浏览器返回为空，但是不影响ajax请求返回数据

get- -post请求，ajax请求之后返回是一样的，就不分开写效果图了

如果本篇文章对你有帮助的话，很高兴能够帮助上你。

当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。