在vue项目中使用Mock来模拟数据

安装mock

npm install mockjs

使用Mock

项目目录结构

在src目录下的api目录下新建mock.js

import Mock from 'mockjs'
import homeApi from './mockServerData/home'
//定义mock请求拦截
Mock.mock('/api/home/getData',homeApi.getStatisticalData)

api目录下新建mockServerData文件夹，新建home.js文件

//mock数据模拟
import Mock from 'mockjs'

//图表数据
let List = []
export default {
    getStatisticalData: () => {
        for (let i = 0; i < 7; i++) {
            List.push(
                Mock.mock({
                    苹果: Mock.Random.float(100,8000,0,0),
                    vivo: Mock.Random.float(100,8000,0,0),
                    oppo: Mock.Random.float(100,8000,0,0),
                    魅族: Mock.Random.float(100,8000,0,0),
                    三星:Mock.Random.float(100,8000,0,0),
                    小米:Mock.Random.float(100,8000,0,0)
                })
            )
        }
        return {
            code:2000,
            data:{
                //饼图
                videoData: [
                    {
                        name:'小米',
                        value:2999
                    },
                    {
                        name:'苹果',
                        value:5999
                    },
                    {
                        name:'vivo',
                        value:1999
                    },
                    {
                        name:'oppo',
                        value:1500
                    },
                    {
                        name:'魅族',
                        value:500
                    },
                    {
                        name:'三星',
                        value:4999
                    }
                ],
                //柱状图
                userData: [
                    {
                        data:'周一',
                        new:5,
                        active:200
                    },
                    {
                        data:'周二',
                        new:10,
                        active:500
                    },
                    {
                        data:'周三',
                        new:12,
                        active:550
                    },
                    {
                        data:'周四',
                        new:8,
                        active:300
                    },
                    {
                        data:'周五',
                        new:11,
                        active:400
                    },
                    {
                        data:'周六',
                        new:28,
                        active:600
                    },
                    {
                        data:'周日',
                        new:33,
                        active:800
                    }
                ],
                //折线图
                orderData:{
                    date:['20191001','20191002','20191003','20191004','2191005','20191006','20191007'],
                    data:List
                },
                //表格数据
                tableData:[
                    {
                        name:'oppo',
                        todayBuy:500,
                        monthBuy:3500,
                        totalBuy:22000
                    },
                    {
                        name:'vivo',
                        todayBuy:1000,
                        monthBuy:5000,
                        totalBuy:32000
                    },
                    {
                        name:'小米',
                        todayBuy:800,
                        monthBuy:3000,
                        totalBuy:21000
                    },
                    {
                        name:'三星',
                        todayBuy:1200,
                        monthBuy:3000,
                        totalBuy:50000
                    },
                    {
                        name:'苹果',
                        todayBuy:1500,
                        monthBuy:5500,
                        totalBuy:62000
                    },
                    {
                        name:'魅族',
                        todayBuy:700,
                        monthBuy:3900,
                        totalBuy:32000
                    }
                ]
            }
        }
    }
}

在main.js中引入 mock.js文件

 在组件中调用接口

    mounted(){
        getData().then((data) => {
            console.log(data)
        })
    }

getData方法：

控制台效果展示：