• mock的基本用法

    mock的基本用法

    一.mock解决的问题

    开发时，后端还没完成数据输出，前端跨域用mock来模拟出数据，将代码写在js文件中，等后端完成数据输出后将用mock模拟的接口一一替换就好。某些逻辑复杂的代码，加入或去除模拟数据时要小心。可以编写更多的代码或是手动修改模拟数据，例如ip、随机数、图片、地址需要去收集

    二.mock的优点

    1. 前后端分离

      让前端工程师独立于后端开发

    2. 增加测试的真实性

      通过随机数据，模拟各种场景

    3. 开发无侵入

      不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。

    4. 用法简单

    5. 数据类型丰富

      支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

    6. 方便扩展

      支持扩展更多数据类型，支持自定义函数和正则

    7. 在已有接口文档的情况下，我们可以直接按照接口文档来开发，将相应的字段写好，在接口完成后，只需要改变url地址即可

    8. 不涉及跨域的问题

    三、案例

    1. 首先需要下载安装mockjs模块

      npm i mockjs 

      • 1

    2. 在项目的src文件夹下创建一个mock文件夹专门用来放模拟接口的mock文件

      Mock.mock('接收路径','请求方法get或者post',()=>{return [数据]})

      当没有指定方式时是get请求

      name:'@name':表示外国人的英文名，占位符

      name:'@cname'：会自己生成一个随机的人名

      phone|13000000000-19999999999:1：电话号码

      email:@email:邮箱

      'address:'@province':只是生成市

      'address:'@county':生成区

      'address:'@county(true)':省市区的生成

      id:'@id':生成的是身份证号

      'id|+1': 1:生成的是序号

      index.js文件

      import Mock, { mock } from 'mockjs'


// 通知类型列表请求数据
var alertdata = Mock.mock({
    "alertlist": [
        {
            id: 1,
            alerttype: '通知',
            property: '内置',
            statu: '启用',
        },
        {
            id: 2,
            alerttype: '公告',
            property: '内置',
            statu: '启用',
        },
        {
            id: 3,
            alerttype: '活动',
            property: '内置',
            statu: '启用',
        },
        {
            id: 4,
            alerttype: '家园任务',
            property: '内置',
            statu: '启用',
        },
        {
            id: 5,
            alerttype: '缴费通知',
            property: '内置',
            statu: '启用',
        },
        {
            id: 6,
            alerttype: '选课通知',
            property: '内置',
            statu: '启用',
        },
    ]
})
// 通知类型列表请求
Mock.mock('/api/alerttype/list', 'get', () => {
    return alertdata;
})

// 通知类型列表请求删除
Mock.mock('/api/alerttype/delete', 'post', (req) => {
    // 接收参数，req.body是字符串格式，需要转为json对象
    var { id } = JSON.parse(req.body)

    // 通过id，找到要删除的那一条数据，执行删除
    var i = alertdata.alertlist.findIndex((item) => {
        return item.id == id;
    })
    if (i != -1) {
        alertdata.alertlist.splice(i, 1);
        localStorage.setItem('alertlist', JSON.stringify(alertdata))
    }
    return { status: 200, msg: '删除成功！', alertlist: alertdata.alertlist };
})


// 通知类型列表请求状态修改停用/启用
Mock.mock('/api/alerttype/edit', 'post', (req) => {
    // 接收参数，req.body是字符串格式，需要转为json对象
    var body = JSON.parse(req.body)
    console.log(body);
    // 通过id，找到要删除的那一条数据，执行删除
    var i = alertdata.alertlist.findIndex((item) => {
        return item.id == body.id;
    })
    if (i != -1) {
        if (body.statu == '停用') {
            body.statu = '启用'
        } else {
            body.statu = '停用'
        }
        alertdata.alertlist.splice(i, 1, body);
        console.log(body);
        localStorage.setItem('alertlist', JSON.stringify(alertdata))
    }
    return { status: 200, msg: '删除成功！', alertlist: alertdata.alertlist };
})


// 通知类型列表请求添加
Mock.mock('/api/alerttype/add', 'post', (req) => {
    // 接收参数，req.body是字符串格式，需要转为json对象
    var body = JSON.parse(req.body)
    console.log(body);
    // 拿到要添加的这个类型的在已存储的数据进行比较是否已存在
    const id = body.id
    let flag = true
    for (const item of alertdata.alertlist) {
        if (item.id === id) flag = false
    }
    if (flag) {
        alertdata.alertlist.push(body);
        localStorage.setItem('alertlist', JSON.stringify(alertdata))
    }
    return { status: 200, msg: '添加成功！', alertlist: alertdata.alertlist };
})

// 通知类型列表请求改变状态
// Mock.mock('/api/alerttype/add', 'post', (req) => {
//     // 接收参数，req.body是字符串格式，需要转为json对象
//     var body  = JSON.parse(req.body)
//     const id = body.id
//     // 通过id，找到要修改的那一条数据，执行修改
//     var item = alertdata.alertlist.find((item) => {
//         return item.id == id;
//     })

//     if (item.statu == '启用') {
//         alertdata.alertlist.splice(i,1,body);
//         localStorage.setItem('alertlist', JSON.stringify(alertdata))
//     }else if(item.statu == '停用'){
//         alertdata.alertlist.splice(i,1,body);
//         localStorage.setItem('alertlist', JSON.stringify(alertdata))
//     }
//     return { status: 200, msg: '修改成功！', alertlist: alertdata.alertlist };
// })


// 通知列表数据
var alertlistdata = Mock.mock({
    "list|6": [
        {
            'id|+1': 1,
            'name|1': ['关于防控疫情的通知', '高温橙色预警通知', '关于2022年暑期活动通知', '2022学年第一学期家园任务', '2022学年第一学期缴纳班费通知'],//通知标题
            'region|1': ['通知', '公告', '活动', '家园任务'],//通知类型
            date1: '@date(yyyy-MM-dd)',//发布时间
            'type|1': ['学生', '老师', '家长'],//发布对象
            resource: '全校',//发布范围
            desc: '“书香润泽校园 阅读提升思想”“我阅读 我快乐 我成长”',//通知内容
        },
    ]
})

// 通知列表请求
Mock.mock('/api/alert/list', 'get', () => {
    return alertlistdata;
})

// 通知列表查询
Mock.mock('/api/alert/search', 'post', (req) => {
    // 接收参数，req.body是字符串格式，需要转为json对象
    var { region } = JSON.parse(req.body)

    // 通过id，找到要删除的那一条数据，执行删除
    var item = alertlistdata.list.find((item) => {
        return item.region == region;
    })
    console.log(item);
    if (item != ' ') {
        var item = JSON.stringify(item)
        return { status: 200, msg: '查询成功！', item };
    } 
})

// 通知列表请求删除
Mock.mock('/api/alert/delete', 'post', (req) => {
    // 接收参数，req.body是字符串格式，需要转为json对象
    console.log(req);
    var { id } = JSON.parse(req.body)

    console.log(id);
    // 通过id，找到要删除的那一条数据，执行删除
    var i = alertlistdata.list.findIndex((item) => {
        return item.id == id;
    })
    console.log(i);
    if (i != -1) {
        alertlistdata.list.splice(i, 1);
        localStorage.setItem('list', JSON.stringify(alertlistdata))
    }
    return { status: 200, msg: '删除成功！', list: alertlistdata.list };
})

// 通知列表请求添加
Mock.mock('/api/alert/add', 'post', (req) => {
    // 接收参数，req.body是字符串格式，需要转为json对象
    var body = JSON.parse(req.body)
    console.log(body);
    // 拿到要添加的这个类型的在已存储的数据进行比较是否已存在
    const id = body.id
    let flag = true
    for (const item of alertlistdata.list) {
        if (item.id === id) flag = false
    }
    if (flag) {
        alertlistdata.list.push(body);
        localStorage.setItem('list', JSON.stringify(alertlistdata))
    }
    return { status: 200, msg: '添加成功！', alertlistdata: alertlistdata.list };
})


// 评价列表数据
var evaluatelist = Mock.mock({
    "evallist|10": [
        {
            'id|+1': 1,
            name: '@name',//学生姓名
            grade: '一年级一班',//年级班级
            type: '一年级一班',//评价类型
            content: '字迹工整，按时完成',//评价类型
            score: '+1',//分值
            people: '杨老师',//分值
            date1: '@date(yyy-MM-dd)',//发布时间
        }
    ]
})

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      • 36
      • 37
      • 38
      • 39
      • 40
      • 41
      • 42
      • 43
      • 44
      • 45
      • 46
      • 47
      • 48
      • 49
      • 50
      • 51
      • 52
      • 53
      • 54
      • 55
      • 56
      • 57
      • 58
      • 59
      • 60
      • 61
      • 62
      • 63
      • 64
      • 65
      • 66
      • 67
      • 68
      • 69
      • 70
      • 71
      • 72
      • 73
      • 74
      • 75
      • 76
      • 77
      • 78
      • 79
      • 80
      • 81
      • 82
      • 83
      • 84
      • 85
      • 86
      • 87
      • 88
      • 89
      • 90
      • 91
      • 92
      • 93
      • 94
      • 95
      • 96
      • 97
      • 98
      • 99
      • 100
      • 101
      • 102
      • 103
      • 104
      • 105
      • 106
      • 107
      • 108
      • 109
      • 110
      • 111
      • 112
      • 113
      • 114
      • 115
      • 116
      • 117
      • 118
      • 119
      • 120
      • 121
      • 122
      • 123
      • 124
      • 125
      • 126
      • 127
      • 128
      • 129
      • 130
      • 131
      • 132
      • 133
      • 134
      • 135
      • 136
      • 137
      • 138
      • 139
      • 140
      • 141
      • 142
      • 143
      • 144
      • 145
      • 146
      • 147
      • 148
      • 149
      • 150
      • 151
      • 152
      • 153
      • 154
      • 155
      • 156
      • 157
      • 158
      • 159
      • 160
      • 161
      • 162
      • 163
      • 164
      • 165
      • 166
      • 167
      • 168
      • 169
      • 170
      • 171
      • 172
      • 173
      • 174
      • 175
      • 176
      • 177
      • 178
      • 179
      • 180
      • 181
      • 182
      • 183
      • 184
      • 185
      • 186
      • 187
      • 188
      • 189
      • 190
      • 191
      • 192
      • 193
      • 194
      • 195
      • 196
      • 197
      • 198
      • 199
      • 200
      • 201
      • 202
      • 203
      • 204
      • 205
      • 206
      • 207
      • 208
      • 209
      • 210
      • 211
      • 212
      • 213
      • 214
      • 215
      • 216
      • 217

    3. 模拟数据完成后，在需要入口主文件main.js中引入这个模拟数据的文件

      import "./mock/index.js"

      • 1

    4. 在页面中，我们可以直接进行axios请求，我这里的请求是对请求进行二次封装api文件

      // 通知类型列表获取
export function alert_list(params = {}) {
    return service.get('/api/alerttype/list', { params })
}

// 删除类型列表中的数据
// /api/alert/delete

export function alert_delete(params = {}) {
    return service.post('/api/alerttype/delete', params)
}

// 修改类型列表中的数据
// /api/alerttype/edit
export function alert_edit(params = {}) {
    return service.post('/api/alerttype/edit', params)
}


      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18

      四、mock的用法规则

      1. 通过重复string生成一个字符串，重复次数大于等于min，小于等于max

        'string|1-10':'哈'

        结果随机生成1~10个哈

      2. 通过重复string生成一个字符串，重复次数等于count

        'string|5':'哈'

        结果生成五个哈

      3. 属性值是数字

        'name|+1':number:属性自动加1，初始值为number

        name|min-max:number:生成一个大于等于min、小于等于max的整数，属性值number只是用来确定类型

        'number1|1-100.1-10': 1, //生成1-10位的小数
    'number2|123.1-10': 1, //同上
    'number3|123.3': 1, //生成三位小数
    'number4|123.10': 1.123 //生成10位小数


        • 1
        • 2
        • 3
        • 4
        • 5

      4. 属性值是布尔型Boolean

        'name|1':boolean:随机生成一个布尔值，值为true的概率是1/2，值为false的概率同样是1/2

        'boolean|min-max':value:随机生成一个布尔值，值为value的概率是min/(min + max),值为!value的概率是max/(min+ max)

      5. 属性值是对象object

        'name|count':object

        
var obj = Mock.mock({
    'obj|2':{
        id:1,
        name:'jx',
        age:18,
        address:'JiNan',
        love:'you'
    }
})


        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        • 9
        • 10
        • 11

      6. Mock.Random

        var Random = Mock.Random
Random.email()
// => "n.clark@miller.io"
Mock.mock('@email')
// => "y.lee@lewis.org"
Mock.mock( { email: '@email' } )
// => { email: "v.lewis@hall.gov" }


        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8

        自定义：

        Random.extend({
    constellation: function(date) {
        var constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']
        return this.pick(constellations)
    }
})
Random.constellation()
// => "水瓶座"
Mock.mock('@CONSTELLATION')
// => "天蝎座"
Mock.mock({
    constellation: '@CONSTELLATION'
})


        • 1
        • 2
        • 3
        • 4
        • 5
        • 6
        • 7
        • 8
        • 9
        • 10
        • 11
        • 12
        • 13
        • 14
  • 相关阅读:
    2023网络工程毕业设计选题推荐 - 计算机毕业设计题目大全
    【Hadoop】学习笔记（一）
    数据库连接池
    Python武器库开发-基础篇(三)
    软考机考 画图
    06_玩转Docker容器：80分钟一口气学完docker+k8s！带你掌握docker+k8s所有核心知识点，全程干货，无废话！
    Sentinel源码剖析之初始化
    redis（13）持久化操作-AOF
    淘宝API接口获取商品信息，订单管理，库存管理，数据分析
    商用清洁机器人的工作原理介绍
  • 原文地址：https://blog.csdn.net/m0_53181852/article/details/127688186