專案需求

如何在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
    })
},