使用mockjs模擬分頁請求

首先安裝mockjs

npm install mockjs --save-dev

創建mock.js

//mock.js
const Mock = require("mockjs");
// const Random = Mock.Random // Mock.Random 是一個工具類，用於生成各種隨機數據
const dataList = []
//用於接受生成數據的數組
for (let i = 0; i < 50; i++) { // 可自定義生成的個數
  const template = {
    "roleId": i,
    "name": "admin" + i,
    "remark": "超級管理員" + i,
    "createBy": null,
    "createTime": "2018-08-14T03:11:11.000+0000",
    "lastUpdateBy": null,
    "lastUpdateTime": null,
    "delFlag": 0
  }
  dataList.push(template)
}
Mock.mock(/role\/query/, 'post', (params) => { //三個參數。第一個路徑，第二個請求方式post/get，第三個回調，返回值
  var info = JSON.parse(params.body)
  var [index, size, total] = [info.params.pageIndex, info.params.pageSize, dataList.length]
  var len = total / size
  var totalPages = len - parseInt(len) > 0 ? parseInt(len) + 1 : len
  var newDataList = dataList.slice((index - 1) * size, index * size)
  return {
    'code': '0',
    'message': 'success',
    'data': {
      'pageIndex': index,
      'pageSize': size,
      'content': newDataList,
      'total': total,
      'totalPages': totalPages,
    }
  }
})

在main.js中引入mock.js

import './mock/index.js'

在組件中模擬請求

//role.vue
 methods: {
    // 獲取數據
    async getSysRoleData () {
      try {
        const url = '/role/query';
        const { data: res } = await this.$http[4].post(url, {
          params: {
            pageIndex: this.query.pageIndex,
            pageSize: this.query.pageSize
          }
        });
        console.log("角色管理列表：", res.data)
      } catch (err) {
        console.dir(err);
        this.$message.error({
          message: err.message,
          duration: 1500
        });
      }
    },
}