mock-随机生成数据工具

mock 是一个可以根据定义的格式和正则表达式，快速生成虚拟数据的工具

现在的软件开发基本都是前后端分离开始，所以在前端没有得到后端与之对应的数据服务器的时候，需要随机生成数据模拟开发；

mock数据的构建必须遵守项目开发前团队约定的返回结果数据格式

注意：Mock.mock()返回值是对象的形式

    //语法：Mock.mock()

    // + 基于关键字生成的单一数据 Mock.mock(string)

    // + 基于模板数据结构和mock语法构建大量的数据 Mock.mock(object)

1.生成随机id值

（1）使用Mock.Random 的方法在数据模板中称为『占位符』，书写格式为 @占位符(参数 [, 参数])

（2）使用占位符的方式

let uid1 = Mock.Random.guid();
//(2)使用占位符的方式
let uid2 = Mock.mock("@guid");
console.log(uid1);
console.log(uid2);

2.数据模板定义规则

（1）string

//(1)string
let obj1 = Mock.mock({
  'star|1-5':"★",//生成指定范围长度的字符串
  info:'静态的字符串',//静态字符串
  name:'@cname'//使用规定占位符@cname，随机生成中国人的名字
})
console.log(obj1);

（2）number 自增

    //(2)number 自增
    // +1 是指，在id的起始值每次调用+1
    let temp = {
      "id|+1":1000001
    }
    console.log(Mock.mock(temp)); // 1000001
    console.log(Mock.mock(temp)); // 1000002
    console.log(Mock.mock(temp)); // 1000003
    console.log(Mock.mock(temp)); // 1000004
    console.log(Mock.mock(temp)); // 1000005
    console.log(Mock.mock(temp)); // 1000006

（3）number随机生成，

小数生成 |min-max.dmin(小数最小位数)-dmax(小数最大位数)

    let obj2 = Mock.mock({
      'age|1-100':0,//随机生成0-100整数
      'price|1-100.1-4':0,//随机生成整数部分1-100，小数位数1-4位
      'num|.2-4':0,//整数部分省略不写，默认是0(js的默认规则)
      'num2|100.3-3':0//整数部分保持100不变，小数位数恒定3位数，小数值随机生成
    })
    console.log(obj2);

（4）boolean值

    let flag = {
      'flag1|0':true,//模板规则：0数值是0时，表示布尔值恒定是false
      'flag2|1':false,//值位>=1时，boolean随机取值
      "flag3|1-2":true
    }
    console.log(Mock.mock(flag));

(5)城市随机取值

    let city = Mock.mock({
      "city1|2":{//数字2表示随机取2个值
        addr1:'@city',//占位符@city表示随机生成城市
        addr2:'@city',//占位符@city表示随机生成城市
        addr3:'@city',//占位符@city表示随机生成城市
        addr4:'@city',//占位符@city表示随机生成城市
      },
      "city2|1-3":{//数字1-3表示随机取1-3个值
        addr1:'@city',//占位符@city表示随机生成城市
        addr2:'@city',//占位符@city表示随机生成城市
        addr3:'@city',//占位符@city表示随机生成城市
        addr4:'@city',//占位符@city表示随机生成城市
      }
    })
    console.log(city);

(6)枚举取值,从数组中随机取值

    let gender = Mock.mock({
        'sex|1':['男','女','不知道'],//数字1表示随机取数组中的一个值
        'sex2|+1':['男','女','不知道']//+1表示循环一次取数组中的值
      })
    console.log(gender);

(7)正则表达式规则

当mock中的模板无法满足我们的取值时，需要使用正则表达式来规定随机值

(8)路径规则中： @表示启动关键字(注意：@前面不能有除了空格的任何其他字符)

    let obj7 = Mock.mock({
      user:{
        name:'@cname',
      },
      tel:/1[0-9]{10}/,
      //正则表达式可以使用插件
      email:/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
      //函数表达式
      info:function(){
        //注意：这里的this指向是数据模板对象，所以可以在函数表达式里使用this来获取已有值；
        return `我的手机号码是:${this.tel},我的邮箱是:${this.email},我的身份证号码是:${this.cardId}`
      },
 
      // (8)路径规则中： @表示启动关键字(注意：@前面不能有除了空格的任何其他字符)
      //          ==>   / 表示在模板数据中的层级关系，上下级
      message:"我的名字是: @/user/name ,我的手机号码是: @/tel,我的邮箱是: @/email,我的身份证号码是: @/cardId"
    })
    console.log(obj7); 

(9)日期生成

    let timer = Mock.mock({
      day1:'@date',// @date占位符表示随机生成mock默认格式的年月日
      day2:'@date("yyyy年MM月dd日")',//@date()可以传参，自定义时间格式,
      time1:'@time',//@time占位符可以随机生成mock格式的时分秒
      time2:'@time("HH时mm分ss秒SS毫秒")',//同样可以在@time()中传参数自定义格式
      daytime1:'@datetime("yyyy年MM月dd日 HH:mm:ss:SS")',//@daytime生成完整的时间
      nowTime:'@now'
    })
    console.log(timer);

(10)图片生成

注意：生成的是带参数的图片地址，可以根据地址获取图片

    let imgs = Mock.mock({
      img:"@image('200x100', '#894FC4', '#FFF', 'png', '!')",
      img1:"@image('200x100', '#aaaaa', '#FFF', 'png', '!')",
      img2:"@image('200x100', '#bbbbb', '#FFF', 'png', '!')",
      // mock占位符调用时，需要传递参数，参数也可以是占位符
      img3:"@image('200x100', '@color', '#FFF', 'png', '!')",
      //可以使用随机生成图片的网址，但是注意，统一网址的请求图片地址时，如果不加参数，那么浏览器默认地址一样的会使用浏览器的缓存，那么所请求的图片只有一种；一般加一个时间戳作为参数，保持参数的唯一，图片可以请求到不同的值
      img4:"https://api.ixiaowai.cn/mcapi/mcapi.php?_=@time('T')"
    })
    console.log(imgs);