Article Directory
1. About mockjs
1. What is mock.js?
mockjs is a front-end tool for generating random data, used to simulate Ajax requests, generate and return simulated data.
2. Why use mockjs?
When programmers are doing project development, when the front-end engineers want to request the completed data from the back-end, it is possible that the back-end has not yet been completed, but without the back-end data, the previous step cannot be carried out, and they can only wait for the back-end to complete the data , will seriously affect the efficiency of front-end development. At this time, we will wonder if there is a possibility or technology to make front-end development independent of the back-end. Mockjs was born. Mockjs can simulate Ajax requests and send simulated data. After setting the data interface and corresponding fields, etc., the data can be directly replaced after the back-end is ready, without affecting the efficiency of front-end development.
2. Use steps
1. Install
Use the npm way
npm i mockjs
2. Introduce in main.js
// import mockjs
import './api/mock';
3. mockjs file
In the scr root directory, create a new ap folder, and create a new mock.js file
Mock.mock('/api/home/getData','get',homeapi.getStatisticalData); 、
Parameter explanation:
Parameter 1: The address of the server to be requested
Parameter 2: Request method
Parameter 3: The method of customizing the simulated data
// 引入mockJs
import Mock from 'mockjs';
//引入mock参数三中模拟的方法，方法中含有模拟的数据
import homeapi from '../api/mockServerData/home';
Mock.mock('/api/home/getData','get',homeapi.getStatisticalData); Custom mock data
Create a new folder under the mockjs folder—the mockServerData folder—here, take the new home.js file as an example to store the custom mock data to be used on the home page
// mock数据模拟
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: 2200
},
{
name: '三星',
value: 4500
}
],
// 柱状图
userData: [
{
date: '周一',
new: 5,
active: 200
},
{
date: '周二',
new: 10,
active: 500
},
{
date: '周三',
new: 12,
active: 550
},
{
date: '周四',
new: 60,
active: 800
},
{
date: '周五',
new: 65,
active: 550
},
{
date: '周六',
new: 53,
active: 770
},
{
date: '周日',
new: 33,
active: 170
}
],
// 折线图
orderData: {
date: ['20191001', '20191002', '20191003', '20191004', '20191005', '20191006', '20191007'],
data: List
},
tableData: [
{
name: 'oppo',
todayBuy: 500,
monthBuy: 3500,
totalBuy: 22000
},
{
name: 'vivo',
todayBuy: 300,
monthBuy: 2200,
totalBuy: 24000
},
{
name: '苹果',
todayBuy: 800,
monthBuy: 4500,
totalBuy: 65000
},
{
name: '小米',
todayBuy: 1200,
monthBuy: 6500,
totalBuy: 45000
},
{
name: '三星',
todayBuy: 300,
monthBuy: 2000,
totalBuy: 34000
},
{
name: '魅族',
todayBuy: 350,
monthBuy: 3000,
totalBuy: 22000
}
]
}
}
}
}
The way to get the mock from the page
- // Introduce the method of requesting background interface data
- // Call the interface for requesting data
// 引入请求后台接口数据的方法 import { getData } from '../api/index'; // 调用请求数据的接口 getData().then((response) => { const { data } = response.data; }