mock 模拟数据在框架中的简单使用

首先在框架中需要安装mock模块

cnpm i mockjs -S

其次在src文件夹下新建mock文件夹，在mock文件夹中新建一个index.js文件

代码如下：

const Mock = require('mockjs');

function getBannerFn () {
    let arr = [];
    for (var i = 0; i < 10; i++) {
        arr.push({
            id: 'banner' + i,
            imgSrc: Mock.Random.image('100x100', Mock.mock('@color()')),
            alt: '',
            href: ''
        })
    }
    return {
        code: 200,
        message: 'ok',
        data: arr
    }
}

function getProlist () {
    let arr = []

    for(var i = 0; i < 50; i++){
        arr.push({
            id: 'pro' +i,
            name: Mock.mock('@ctitle()'),
            imgSrc: Mock.Random.image('100x100', Mock.mock('@color()')),
            price:  Math.random() * 450 + 50,
            color: Mock.mock('@color()')
            address: Mock.mock('@county(true)')
        })
    }
    return arr
}

Mock.mock('http://47.103.82.2:3000/getBanner', 'get' ,getBannerFn)
Mock.mock('http://47.103.82.2:3000/getList', 'get' ,getProlist)

在main.js中引入mock    import './mock/index'

在需要请求的数据中直接使用

axios.get('http://47.103.82.2:3000/getBanner').then(res => {
    console.log(res.data)
    // 后续的业务逻辑
})