Mock.js是用来模拟产生一些虚拟的数据,可以让前端在后端接口还没有开发出来时独立开发。我们可以使用真实的url,mockjs可以拦截ajax请求,返回设定好的数据。
mockjs提供了两个功能:1.生成随机数据 2.拦截 Ajax 请求
1.安装
npm install mockjs -D
(mockjs只用于开发阶段,无需一起打包,所以此处-D)
2.在src下新建mock文件夹,创建index.js文件
3.建立虚拟数据(mockjs下index.js文件)
三部曲=>>>导入,设置请求延迟时间,生成一个数组数据
// 导入mockjs
import Mock from "mockjs";
// 设置请求延迟时间
Mock.setup({
// 延迟时间200毫秒
timeout: 200,
});
// 生成一个数组数据
const {subjects,grades} = Mock.mock({
//随机生成一个10到20条的数组
"subjects|5-10": [
{
'SubjectId|+1': 1,
SubjectName: '@ctitle(10,15)',
ClassHour: '@integer(20,80)',
GradeId:'@integer(1,3)'
}
],
"grades|3": [
{
'GradeId|+1': 1,
"GradeName": '@cname(2,4)'
}
]
});
// 给课程数组添加年级信息
subjects.forEach(r => {
// 给每个课程信息,添加一个年级的完整信息
r.Grade ={
GradeId:r.GradeId,
GradeName:grades.find(g=>g.GradeId===r.GradeId).GradeName
}
});
网友评论