欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

在Vue项目中使用Mock.js

程序员文章站 2022-03-18 13:47:46
...

安装

npm install mockjs

使用

src根目录下新建mock文件夹和api文件夹:

在Vue项目中使用Mock.js

main.js

import './mock/index.js'

mock/index.js

// 保存模拟数据路径
import Mock from 'mockjs'
import itemList from './itemList'

Mock.mock(/\/itemList\/getItemList/,'get',itemList.getItemList)

mock/itemList/index.js

import Mock from 'mockjs'
let params =  Mock.mock({ // 数据池
    'userTableData|10': [{ // 图表过滤所需数据
        'name': '@cname',
        'date': '@date',
        'province': '@province',
        'city': '@city',
        'address': '@county(true) @ctitle() @natural(1000,9999) 号',
        'zip': '@zip'
    }]
})

export default {
    getItemList: () => ({
        code: 200,
        data: params
    })
}
在页面中使用
import * as mockApi from '../api/api.js'
mockApi.getItemList().then(res=>{
                console.log(res)
            }).catch(err=>{
                
 })

效果

在Vue项目中使用Mock.js

相关标签: vue