一个mockjs模拟分页数据的简单demo

项目需求

如何在vue项目中使用mockjs模拟并使用一个分页数据

问题解决

• 安装mock

npm install mockjs 

• 创建mock.js

// mock文件夹与src同级，在mock文件夹下创建mock.js文件

const Mock = require('mockjs')
const Random = Mock.Random

let originList = []
const count = 100

for(let i = 0; i < count; i++) {
    originList.push({
        id: '@increment',
        name: Random.ctitle(5, 10),
        number: 'P202203' + Random.integer(1, 1000),
        time: Random.now(),
        desc: Random.csentence()
    })
}

Mock.mock('/api/getList', 'post', (params) => {
    const body = JSON.parse(params.body)
    let { page, pageSize } = body
    let total = originList.length
    let len = total / pageSize
    const totalPage = Number.isInteger(len) ? len + 1 : len
    const list = originList.slice((page - 1) * pageSize, page * pageSize)

    return {
        code: 200,
        message: 'success',
        data: {
            page,
            pageSize,
            total,
            totalPage,
            list
        }
    }
})

• 在main.js中引入

require('../mock/mock.js')

• vue文件中使用

// 引入axios
import axiox from 'axios'

// 获取列表数据
getDemoList() {
    let param = {
        page: this.page,
        pageSize: this.pageSize
    }
    axiox.post('/api/getList', param).then(res => {
        let data = res.data
        this.tableData = data.list
        this.total = data.total
    })
},