mock的基本用法

mock的基本用法

一.mock解决的问题

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

二.mock的优点

1. 前后端分离

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

2. 增加测试的真实性

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

3. 开发无侵入

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

4. 用法简单

5. 数据类型丰富

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

6. 方便扩展

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

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

8. 不涉及跨域的问题

三、案例

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

   npm i mockjs 
   

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)',//发布时间
           }
       ]
   })
   

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

   import "./mock/index.js"
   

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

   四、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位小数
      
      

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

   6. Mock.Random

      var Random = Mock.Random
      Random.email()
      // => "[email protected]"
      Mock.mock('@email')
      // => "[email protected]"
      Mock.mock( {
              
               email: '@email' } )
      // => { email: "[email protected]" }
      
      

      自定义：

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