(Vue-cli)十一、mockjs(两个功能:1.生成随机数据 2.拦截 Ajax 请求)

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
    }
});
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容