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

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

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