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)

    // 后续的业务逻辑

})

巴特西

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

最新文章

热门文章