初识MockJS生成随机数据

1,063 阅读3分钟

在工作中难免有需要自己生成随机数据测试也好,调试也罢.总而言之是为了更好地码代码。废话不多少,直接开搞!

一、首先来了解一下类型

TypeMethod
基本类型boolean, natural, integer, float, character, string, range, date, time, datetime, now
图片image, dataImage
颜色color
文本paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle
姓名first, last, name, cfirst, clast, cname
网站url, domain, email, ip, tld
地址area, region
编号guid, id

使用的过程中只需要在类型前面添加@即可完成一次数据生成 要想使用MockJS来生成随机数据,首先第一步离不开安装才能使用。

二、安装MockJS

  1. npm安装方式,命令行执行如下代码
npm install mockjs

三、基本使用方法

3.1简单介绍

1. 在需要使用的组建中直接引入mockjs

let Mock = require('mockjs')

通过Mock调用mock(),在mock()中配置需要生成的数据。

let data = Mock.mock()

2. 也可以直接先调用 Mock.Random

let Random = Mock.Random

 let res=  Random.pick(['男','女'])
 console.log(res);

3.2 真正使用之前有必要了解的东西

在引入Mock之后,你有没有想过Mock到底是啥,包含了什么东西,那我们来看看Mock到底什么?

let Mock = require('mockjs')
console.log(Mock)

1.可以看到结果如下: image.png 2.这是一个对象,当我们展开的时候就会发现这个对象包含以下内容 image.png 3. 这些属性都用来干什么的?弄明白之后,我想Mock就简单了!

3.3 属性的简单介绍

  1. Mock.RE→待补充
  1. Mock.Random→用于生产随机数
  1. Mock.Util→待补充
  1. Mock.XHR→待补充
  1. Mock.heredoc→待补充
  1. Mock.mock→模板语法生成数据
  1. Mock.setup→Mock.setup( settings )配置拦截 Ajax 请求时的行为。支持的配置项有:timeout。
  1. Mock.toJSONSchema→Mock.toJSONSchema( template ),把 Mock.js 风格的数据模板 template 转换成 JSON Schema。
  1. Mock.valid→Mock.valid(template, data) 校验数据
  1. Mock.version→版本号
  1. Mock._mocked→待补充

四、生成数据

  1. 通过@natural生成一个随机自然数
let Mock = require('mockjs')
let data = Mock.mock({
    data:"@natural"
})
console.log(data)

控制台结果如下图:

image.png

注意:

1. 执行多次,我们可以观察到结果并不一样.并且我们可以看到打印的结果是一个对象,对象的属性才是我们想要的值!

image.png 2.如果我们想要得到一个范围内的自然数,可以再调用@natural函数的时候加上(),并且附上取值范围如下:

let Mock = require('mockjs')
let data = Mock.mock({
    data01:"@natural",
    data02:"@natural()",
    data03:"@natural(10,100)"
})
console.log(data)

image.png

2. 从图中我们可以看出.加()和不加()都能获得一个随机自然数,如果加上()还有范围区间,我们就能得到一个区间的随机取值.

  1. 通过@cname生成随机名字
let data = Mock.mock({
    data:"@cname"
});
console.log(data);

image.png

同样的道理,你会发现一个问题,如果把cnamec去掉,只要name会生成英文的名字:

let data = Mock.mock({
    data:"@cname",
    data1:"@cname"
});
console.log(data);

image.png

  1. 通过@pick([arr])进行多选一.
 let res=  Random.pick([1,3,5,7,9])
 console.log(res);

打印结果:

image.png

项目中,如果需要产生随机两个之一的值时,可以用此方法快速解决.比如,在构建人物信息的时候,性别男或者女就可以用词方法解决问题.如:

 let Mock = require("mockjs");
 let Random = Mock.Random;
 let res=  Random.pick(['男','女'])
 console.log(res);

打印结果:

image.png