安装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方法:
控制台效果展示: