美文网首页
(Vue-cli)十一、mockjs(两个功能:1.生成随机数据

(Vue-cli)十一、mockjs(两个功能:1.生成随机数据

作者: Jinx要睡懒觉 | 来源:发表于2022-01-08 16:50 被阅读0次

    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
        }
    });
    

    相关文章

      网友评论

          本文标题:(Vue-cli)十一、mockjs(两个功能:1.生成随机数据

          本文链接:https://www.haomeiwen.com/subject/qviucrtx.html