mock数据简单使用

1.创建mock.js文件,在main.js文件中引入

import '../mock/mock.js'

//mock.js文件中的代码
import Mock  from 'mockjs'
Mock.setup({
    timeout: '200-600'
})

import banner from './banner.json'

Mock.mock('/api/banner', {code:200,message:'成功', data:banner})

Mock.mock('/api/getList', 'get', {
    'list|10': [{
        'id|+1': 1,
        'imgUrl': '@image("200x100", "#4A7BF7", "Hello")',
        'title': '@ctitle(5, 10)',
        'desc': '@cparagraph(1, 3)',
        'price': '@float(0, 100, 2, 2)',
        'num': '@integer(0, 100)'
    }]
})

// mock表格数据
Mock.mock('/api/getTable', 'get', {
    'list|10': [{
        'id|+1': 1,
        'name': '@cname',
        'age|1-100': 1,
        'birthday': '@date("yyyy-MM-dd")',
        'city': '@city("上海市")',
        'job': '@cword(2, 5)',
        'salary': '@float(0, 100, 2, 2)',
        // 电话号
        'phone': /^1[3456789]\d{9}$/,
        // 地址
        'address': '@county(true)',
        }]
})

banner.json文件中的数据

2.最后在组件中使用mock的数据