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請求之後返回是一樣的，就不分開寫效果圖了

如果本篇文章對你有幫助的話，很高興能夠幫助上你。

當然，如果你覺得文章有什麼讓你覺得不合理、或者有更簡單的實現方法又或者有理解不來的地方，希望你在看到之後能夠在評論裏指出來，我會在看到之後儘快的回覆你。