Mock.js 官网
Mockjs Github地址
作用:生成随机数据,拦截 Ajax 请求
使用npm i mockjs进行安装,然后在 api 下新建 mock.js
import Mock from 'mockjs'// 定义mock请求拦截
Mock.mock('/api/home/getData',function () {// 拦截到请求后的处理逻辑console.log('拦截到请求');
});
然后在 main.js 引入
import './api/mock'
我们运行项目,刷新首页,控制台信息:

我们看到已经拦截到了请求,但是data数据是空的,因为我们没有在mock中返回信息
我们来进行改造下,在 api 下新建 /mockServeData/home.js
import Mock from 'mockjs'// 图表数据
let List = []
export default {getStatisticalData:()=>{// Mock.Random.float 产生随机数100-8000之间 最小位0位 最大位0位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:20000,data:{// 饼图videoData:[{name:'小米',value:2999},{name:'苹果',value:5999},{name:'vivo',value:1500},{name:'oppo',value:1999},{name:'魅族',value:2999},{name:'三星',value:3999},],// 柱状图userData:[{date:'周一',new:5,active:200},{date:'周二',new:10,active:500},{date:'周三',new:12,active:550},{date:'周四',new:3,active:100},{date:'周五',new:20,active:600},{date:'周六',new:8,active:120},{date:'周日',new:5,active:330},],// 折线图orderData:{date:['20221001','20221002','20221003','20221004','20221005','20221006','20221007'],data:List},tableData:[{name:'oppo',todayBuy:500,monthBuy:3500,totalBuy:22000}, {name:'vivo',todayBuy:200,monthBuy:1500,totalBuy:2000}, {name:'小米',todayBuy:1000,monthBuy:5500,totalBuy:42000}, {name:'三星',todayBuy:800,monthBuy:3500,totalBuy:32000}, {name:'魅族',todayBuy:80,monthBuy:400,totalBuy:1000}, {name:'苹果',todayBuy:700,monthBuy:5500,totalBuy:42000},]}}}
}
然后修改刚才的mock.js
import Mock from 'mockjs'
import homeApi from './mockServeData/home'// 定义mock请求拦截
Mock.mock('/api/home/getData',homeApi.getStatisticalData());
刷新首页,查看控制台,发现已经有了返回数据:

![]()
Admin
超级管理员
上次登录的时间:2022-11-11
上次登录的地点:深圳
¥{{item.value}}
{{item.name}}
