MockJs用法详解

最新推荐文章于 2025-04-19 14:26:06 发布

牧云流

最新推荐文章于 2025-04-19 14:26:06 发布

阅读量705

点赞数 2

分类专栏： Javascript

本文链接：https://blog.youkuaiyun.com/dreamingbaobei3/article/details/108643337

版权

Javascript 专栏收录该内容

88 篇文章

订阅专栏

MockJs用于拦截 Ajax 请求，生成随机数据，是前端很重要的一个工具。

文章目录

引入
Mock.mock() 根据数据模板生成模拟数据
- 数据模板定义
- 数据占位符定义
Mock.Random() 生成随机数据
- 常用方法

http://mockjs.com

引入

通过 <script>标签引入

<script src="http://mockjs.com/dist/mock.js"></script>

命令行安装
由于一般只在开发环境使用，可以安装为开发依赖
```
npm i mockjs -D  
```
引入方式
```
const Mock = require('mockjs')
```

在这里插入图片描述
这次我会通过<script>标签引入jquery和mockjs来演示一下mockjs的用法

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://mockjs.com/dist/mock.js"></script>

Mock.mock() 根据数据模板生成模拟数据

Mock的属性mock是一个方法，包含3个参数 (rurl？, rtype？, template|function( options ))

rurl 可选，要拦截的请求地址 (URL 字符串或 URL 正则)
rtype 可选要拦截的请求方法
template|function( options ) 数据模板或生成响应数据的函数
可以通过两种语法来生成随机数据，1、数据模板 2、数据占位符

Mock.mock(/\/mock\/demo/, 'get', getList)

数据模板定义

数据模板中的每个属性由 3 部分构成

属性名|生成规则: 属性值

生成规则的含义需要依赖属性值的类型才能确定，属性值的类型分为：

属性值是字符串 String，生成规则为重复次数
属性值是数字 Number

上图中的5可以是任意数字，num3的生成规则小数点后代表保留 1到3位小数点后数字，也可以直接制定位数
布尔型 Boolean

boolean1随机生成一个布尔值，值为 true 的概率是 1/2,
boolean2随机生成一个布尔值，值为 true 的概率是 1/(2+1)
对象 Object ,从属性值中随机选取 count 个属性
数组 Array

arr1 从属性值中随机选取1个元素，
arr2 从属性值中随机选取第1个元素
arr3，arr4重复属性值生成一个新数组
函数 Function,执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性名所在的对象。
正则表达式 RegExp ，根据属性值（正则表达式）生成可以匹配它的字符串

function getUserList () {
  return Mock.mock({
    'list|10':[{
      'id|+1':1,
      'userName': /[A-Z][a-z][0-9]{5,10}/,
      'sex|0-1': 1,
    }]
  })
}
Mock.mock(/\/mock\/users$/, 'get', getUserList)
$.get('/mock/users', (data) => {
  console.log(data)
})

数据占位符定义

在属性值中使用@就是数据占位符定义占位符只是在属性值字符串中占个位置，并不出现在最终的属性值中。
在这里插入图片描述

占位符可以引用数据模板中的属性且会优先引用。
实际上占位符引用的是 Mock.Random 中的方法。

Mock.Random() 生成随机数据

Mock.Random 是一个工具类，用于生成各种随机数据。
打印Mock.Random可以看到其中包含了很多方法，并且还可以通过 Mock.Random.extend() 来扩展其方法。
在这里插入图片描述

常用方法

Basic

const Random = Mock.Random
Mock.mock(
  {
    boolean: Random.boolean(), // 随机生成一个Boolean类型值
    natural1: Random.natural(), // 随机生成一个自然数
    natural2: Random.natural(0, 100), // Random.natural( min?, max? ) 随机生成一个0-100之间的自然数
    integer: Random.integer(), // Random.integer( min?, max? )随机生成一个整数
    float1: Random.float(), // 随机生成一个浮点数
    float2: Random.float(0, 100, 0, 2), // Random.float( min?, max?, dmin?, dmax? ) dmin:小数部分位数的最小值 dmax:小数部分位数的最大值
    character1: Random.character(), // 随机生成一个字符
    character2: Random.character('number'), // Random.character( pool? ) pool:字符池 属性值：lower|upper|number|symbol
    string1: Random.string(), // 随机生成一个字符串
    string2: Random.string(0, 200), // Random.string( pool?, min?, max? )
    range1: Random.range(10), // 随机生成一个结束值为10（不包括10）的整型数组
    range2: Random.range(0, 10, 2), //[0, 2, 4, 6, 8]   Random.range( start?, stop, step? ) start:数组中整数的起始值 stop:结束值(不包含) step:步长,默认为1
  }
)

date

const Random = Mock.Random
Mock.mock({
 date: Random.date('yy-MM-dd'), // 随机生成一个日期字符串 Random.date(format?) format:指示生成的日期字符串的格式。默认值为 yyyy-MM-dd
 time: Random.time('H:m:s'), // 随机生成一个时间字符串 Random.time( format? ) format:指示生成的时间字符串的格式。默认值为 HH:mm:ss
 datetime: Random.datetime('y-M-d H:m:s'), // 随机生成一个日期和时间字符串 Random.datetime( format? ) format:默认值为 yyyy-MM-dd HH:mm:ss
 now: Random.now('day'), // 返回当前的日期和时间字符串 Random.now( unit?, format? ) unit:时间单位 可选值：year|month|week|day|hour|minute|second|week format:指示生成的日期和时间字符串的格式
})

在这里插入图片描述

image

Mock.mock({
  /**
   * 随机生成一个图片地址
   * Random.image( size?, background?, foreground?, format?, text? )
   * size :指示图片的宽高，格式为 '宽x高'
   * background: 指示图片的背景色
   * foreground:指示图片的前景色(文字颜色) 默认为'#FFFFFF'
   * format:指示图片的格式。默认值：png 可选值：png|'gif|jpg
   * text:指示图片上的文字 默认值为参数 size
   */
  image1: Random.image(),
  image2: Random.image('100x100', '#ffcc33', '#00ff00', 'png', 'avatar'),
  /**
   * 随机生成一段Base64图片编码
   * Random.dataImage( size?, text? )
   * size :指示图片的宽高，格式为 '宽x高'
   * text:指示图片上的文字 默认值为参数 size
   */
  dataImage: Random.dataImage('100x100', 'avatar')
})

在这里插入图片描述

Color

Mock.mock({
 color:Random.color(), // 随机生成一个颜色，格式为 '#RRGGBB'
 hex:Random.hex(), // 随机生成一个颜色，格式为 '#RRGGBB'
 rgb:Random.rgb(), // 随机生成一个颜色，格式为 'rgb(r, g, b)'
 rgba:Random.rgba(), // 随机生成一个颜色，格式为  'rgba(r, g, b, a)'
 hsl:Random.hsl(), // 随机生成一个颜色，格式为 'hsl(h, s, l)'
})

在这里插入图片描述

Text

Mock.mock({
  /**
   * 随机生成一段文本
   * Random.paragraph( min?, max? )
   * min :指示文本中句子的最小个数,默认值为 3
   * max :指示文本中句子的最大个数,默认值为 7,
   * 如果传一个参数则为len ，指示文本中句子的个数,默认值为 3 到 7 之间的随机数
   */
  paragraph: Random.paragraph(),
  /**
   * 随机生成一段中文文本
   * Random.cparagraph( min?, max? ) 用法同paragraph
   */
  cparagraph: Random.cparagraph(),
  /**
   * 随机生成一个句子，第一个单词的首字母大写
   * Random.sentence( min?, max? )
   * min :指示句子中单词的最小个数。默认值为 12
   * max :指示句子中单词的最大个数。默认值为 18
   * 如果传一个参数则为len ，指示句子中单词的个数,默认值为 12 到 18 之间的随机数。
   */
  sentence: Random.sentence(),
  /**
   * 随机生成一段中文文本
   * Random.csentence( min?, max? ) 用法同sentence
   */
  csentence: Random.csentence(),
  /**
   * 随机生成一个单词
   * Random.word( min?, max? )
   * min :指示单词中字符的最小个数，默认值为 3
   * max :指示单词中字符的最大个数，默认值为 10
   * 如果传一个参数则为len ，指示单词中字符的个数，默认值为 3 到 10 之间的随机数
   */
  word: Random.word(),
  /**
   * 随机生成一个汉字
   * Random.cword( pool?, min?, max? )
   * pool ：汉字字符串。表示汉字字符池，将从中选择一个汉字字符返回。
   */
  cword: Random.cword('零一二三四五六七八九十'),
  /**
   * 随机生成一句标题，其中每个单词的首字母大写
   * Random.title( min?, max? )
   * min :指示标题中单词的最小个数，默认值为 3
   * max :指示标题中单词的最大个数，默认值为 7
   * 如果传一个参数则为len ，指示标题中单词的个数，默认值为 3 到 7 之间的随机数
   */
  title: Random.title(8),
  /**
   * 随机生成一句中文标题
   * Random.ctitle( min?, max? )  用法同title
   */
  ctitle: Random.ctitle()
})

在这里插入图片描述

Name

Mock.mock({
	first: Random.first(), // 随机生成一个常见的英文名
	last: Random.last(), // 随机生成一个常见的英文姓
	name: Random.name(), // 随机生成一个常见的英文姓名
	cfirst: Random.cfirst(), // 随机生成一个常见的中文姓
	clast: Random.clast(), // 随机生成一个常见的中文名
	cname: Random.cname(), // 随机生成一个常见的中文姓名
})

Address

Mock.mock({
	region: Random.region(), // 随机生成一个（中国）大区 如：华东
	province: Random.province(), // 随机生成一个（中国）省（或直辖市、自治区、特别行政区）
	city1: Random.city(), // 随机生成一个（中国）市
	city2: Random.city(true), // Random.city( prefix? ) prefix布尔值，指定是否生成所属的省
	county1: Random.county(), // 随机生成一个（中国）县
	county2: Random.county(true), // Random.county( prefix? ) prefix布尔值，指定是否生成所属的省、市
	zip: Random.zip() // 随机生成一个邮政编码
})

Web

Mock.mock({
	url1: Random.url(), // 随机生成一个 URL
    url2: Random.url('http', 'youkuaiyun.com'), // Random.url( protocol?, host? ) 随机生成一个 指定 URL 协议指定host的URL
    protocol: Random.protocol(), // 随机生成一个 URL 协议
    domain: Random.domain(), //  随机生成一个域名
    tld: Random.tld(), //  随机生成一个顶级域名
    ip: Random.ip(), // 随机生成一个 IP 地址
    email1: Random.email(), // 随机生成一个邮件地址
    email2: Random.email('youkuaiyun.com'), // Random.email( domain? ) 随机生成一个指定域名的邮件地址
})

Helper

Mock.mock({
  capitalize: Random.capitalize('hello'), // 把字符串的第一个字母转换为大写
  upper: Random.upper('hello'), // 把字符串转换为大写
  lower: Random.lower('HELLO'), // 把字符串转换为小写
  pick: Random.pick(['h', 'e', 'l', 'l', 'o']), // 从数组中随机选取一个元素，并返回
  shuffle: Random.shuffle(['h', 'e', 'l', 'l', 'o']), // 打乱数组中元素的顺序，并返回
})

在这里插入图片描述

Miscellaneous

Mock.mock({
  guid:Random.guid(), // 随机生成一个 GUID
  id:Random.id(), // 随机生成一个 18 位身份证
  increment:Random.increment(), // 生成一个全局的自增整数 Random.increment( step? ) step:整数自增的步长,默认值为 1
})

在这里插入图片描述

Random.extend() 扩展Random的方法

Mock.Random.extend({
  phone: function () {
    const phonePrefixs = ['131', '133', '132']
    return this.pick(phonePrefixs) + Mock.mock(/\d{8}/)
  }
})