Foreword : When the front-end and back-end are interacting with the back-end, when the back-end data is not obtained, the data needs to be simulated on its own to display it on the page, which improves our development efficiency. The end data only needs to change the interface. At this time, we use our powerful data to simulate
Mock data: simulated data
1. Mock data: simulated data
mockjs official website : http://mockjs.com/
Official mockjs documentation : https://github.com/nuysoft/Mock/wiki/Getting-Started
Specific usage method
The first step is to install mockjs
npm install mockjs
The second step is to create a mock directory to generate mock data
例如：course.js
import Mock from "mockjs";
//mock课程数据
var result=Mock.mock({
code: 200,
msg: "操作成功",
data: {
current_page: 1,
last_page: 18,
total: 178,
"list|10": [
{
id: "@id", //模拟id
"price|100-200.1-2": 100, //模拟小数，在计算机中也称浮点数
"has_buy|1": [0, 1], //模拟状态值,0,1,2,
title: "@ctitle", //模拟中文标题
address: "@county(true)", //模拟省市县
"teachers_list|1": [
{
course_basis_id: "@id",
id: "@id",
teacher_avatar: "@image('150x120', '#ff0000', '1909A')", //模拟图片
teacher_name: "@cname" //模拟中文姓名
}
]
}
]
}
});
export default result;
//创建mock的入口文件，并配置请求的接口地址，提交方式，返回的假数据
import Mock from 'mockjs'
//导入的模拟数据
import courseData from "./course";
/**
* Mock.mock( rurl, rtype, template )
* rurl:请求的接口地址
* rtype:提交方式
* template:返回数据
*/
Mock.mock("http://www.1909A.com/coureslist", "get", courseData);
Step 3: Inject the simulated data into main.js
//注入mock
import './mock'
Step 4: Request data in the component to be requested
axios.get('http://www.1909A.com/coureslist').then(res=>{
console.log(res)
})
二、easy-mock
easy-mock: Generate online fake data based on mockjs. It is a tool that can edit data online.
However, the reason for the request is unstable access. It is not recommended to use it.