资讯 小学 初中 高中 语言 会计职称 学历提升 法考 计算机考试 医护考试 建工考试 教育百科
栏目分类:
子分类:
返回
空麓网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
空麓网 > 计算机考试 > 软件开发 > 后端开发 > Java

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

Java 更新时间: 发布时间: 计算机考试归档 最新发布

在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方法:

控制台效果展示:

 

 

转载请注明:文章转载自 http://www.konglu.com/
本文地址:http://www.konglu.com/it/1094267.html
免责声明:

我们致力于保护作者版权,注重分享,被刊用文章【在vue项目中使用Mock来模拟数据】因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理,本文部分文字与图片资源来自于网络,转载此文是出于传递更多信息之目的,若有来源标注错误或侵犯了您的合法权益,请立即通知我们,情况属实,我们会第一时间予以删除,并同时向您表示歉意,谢谢!

我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2023 成都空麓科技有限公司

ICP备案号:蜀ICP备2023000828号-2