MockJs用法详解

落日映苍穹つ 2022-12-08 04:16 193阅读 0赞

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

### 文章目录 ###

*  引入
 *  Mock.mock() 根据数据模板生成模拟数据
 *   *  数据模板定义
     *  数据占位符定义
 *  Mock.Random() 生成随机数据
 *   *  常用方法
     *   *  Basic
         *  date
         *  image
         *  Color
         *  Text
         *  Name
         *  Address
         *  Web
         *  Helper
         *  Miscellaneous
         *  Random.extend() 扩展Random的方法

[http://mockjs.com][http_mockjs.com]

# 引入 #

*  通过 <script>标签引入
    
        <script src="http://mockjs.com/dist/mock.js"></script>
 *  命令行安装  
    由于一般只在开发环境使用，可以安装为开发依赖
    
        npm i mockjs -D
    
    引入方式
    
        const Mock = require('mockjs')

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

# 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 部分构成

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

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

1.  属性值是字符串 String， 生成规则为重复次数  
    ![在这里插入图片描述][20210329141602797.png]
2.  属性值是数字 Number  
    ![在这里插入图片描述][20210329141726223.png]  
    上图中的5可以是任意数字，num3的生成规则小数点后代表保留 1到3位小数点后数字，也可以直接制定位数
3.  布尔型 Boolean  
    ![在这里插入图片描述][20210329142350771.png]  
    boolean1随机生成一个布尔值，值为 true 的概率是 1/2,  
    boolean2随机生成一个布尔值，值为 true 的概率是 1/(2+1)
4.  对象 Object ,从属性值 中随机选取 count 个属性  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]
5.  数组 Array  
    ![在这里插入图片描述][20210329144001248.png]  
    arr1 从属性值中随机选取1个元素，  
    arr2 从属性值中随机选取第1个元素  
    arr3，arr4重复属性值生成一个新数组
6.  函数 Function,`执行函数 function`，取其返回值作为最终的属性值，函数的上下文为属性名 所在的对象。  
    ![在这里插入图片描述][20210329145344542.png]
7.  正则表达式 RegExp ，根据属性值（正则表达式）生成可以匹配它的字符串  
    ![在这里插入图片描述][20210329145551500.png]

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

## 数据占位符定义 ##

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

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

# Mock.Random() 生成随机数据 #

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

## 常用方法 ##

### 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:指示生成的日期和时间字符串的格式
    })

![在这里插入图片描述][20210330110940749.png]

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

![在这里插入图片描述][20210330120744580.png]

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

![在这里插入图片描述][20210330121229255.png]

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

![在这里插入图片描述][20210330123945672.png_pic_center]

### 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', 'csdn.net'), // 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('csdn.net'), // 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']), // 打乱数组中元素的顺序，并返回
    })

![在这里插入图片描述][20210330132336319.png]

### Miscellaneous ###

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

![在这里插入图片描述][20210330131723957.png]

### Random.extend() 扩展Random的方法 ###

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

[http_mockjs.com]: http://mockjs.com
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/27d316158ee84dca9ac6f35cc497ad6a.png
[20210329141602797.png]: /images/20221123/acba52e67110457296ac7504b963fae7.png
[20210329141726223.png]: /images/20221123/bba3ada4ef0f45ed9ce9179b44e3414c.png
[20210329142350771.png]: /images/20221123/0178625c3c78424bb97dc84ca088c532.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]: /images/20221123/8e1cb3db621142c7ba5200698e8c487e.png
[20210329144001248.png]: /images/20221123/5e0e639c34304d798ae829799587a4ae.png
[20210329145344542.png]: /images/20221123/a33fcb2805f14271aa659d94b1c9911c.png
[20210329145551500.png]: /images/20221123/189a4d03a7e44b06a615b6e480db3d54.png
[20210329155935259.png]: /images/20221123/8ef69ec4e1f44e6ab32b790a463aeaf8.png
[20210329154037345.png_pic_center]: /images/20221123/c3d0584c06894fa594407016fe02be95.png
[20210330110940749.png]: /images/20221123/cac9a374014846729593178a20c37935.png
[20210330120744580.png]: /images/20221123/5b17583445594b90b7c89d34cd176a97.png
[20210330121229255.png]: /images/20221123/dfd3d24c89014fcdb943cbc16fda765f.png
[20210330123945672.png_pic_center]: /images/20221123/c5076cafa8bc45fe956038455ec426b6.png
[20210330132336319.png]: /images/20221123/63d75814f0024679924dbe00d3494478.png
[20210330131723957.png]: /images/20221123/a2ff34dee68848d8a6be284568c554f5.png