小白学 VUE 系列之Mock 模拟数据

什么是 Mock.js

Mock.js 生成随机数据,拦截 Ajax 请求

  • 前后端分离
  • 开发无侵入
  • 增加单元测试的真实性
  • 用法简单
  • 数据类型丰富
  • 方便扩展

安装

npm install --save-dev mockjs

语法规范

数据模板定义规范 DTD

// 属性名   name
// 生成规则 rule
// 属性值   value
'name|rule': value

生成规则 有 7 种格式:

  • 'name|min-max': value
  • 'name|count': value
  • 'name|min-max.dmin-dmax': value
  • 'name|min-max.dcount': value
  • 'name|count.dmin-dmax': value
  • 'name|count.dcount': value
  • 'name|+step': value

生成规则和示例:

1. 属性值是字符串 String

  1. 'name|min-max': string
    通过重复 string 生成一个字符串,重复次数大于等于 min,小于等于 max。
    'num|2-6':'5' //随机生成2-6个 5
  2. 'name|count': string
    'a|4':'a' //生成4个a

2. 属性值是数字 Number

  1. 'name|+1': number
    属性值自动加 1,初始值为 number。

'idList|5': [{
    'id|+1': 10
}]
//输出
 "idList": [
        {
            "id": 10
        },
        {
            "id": 11
        },
        {
            "id": 12
        },
        {
            "id": 13
        },
        {
            "id": 14
        }
    ]
  1. 'name|min-max': number 区间生成段

  2. 'name|min-max.dmin-dmax': number
    生成一个浮点数,整数部分大于等于 min、小于等于 max,小数部分保留 dmin 到 dmax 位

Mock.mock({
    'number1|1-100.1-10': 1,
    'number2|123.1-10': 1,
    'number3|123.3': 1,
    'number4|123.10': 1.123
})
// =>
{
    "number1": 12.92,
    "number2": 123.51,
    "number3": 123.777,
    "number4": 123.1231091814
}

3. 属性值是布尔型 Boolean

  1. 'name|1': boolean
    随机生成一个布尔值,值为 true 的概率是 1/2,值为 false 的概率同样是 1/2

  2. 'name|min-max': value
    随机生成一个布尔值,值为 value 的概率是 min / (min + max),值为 !value 的概率是 max / (min + max)。

  3. 属性值是对象 Object

    1. 'name|count': object
      从属性值 object 中随机选取 count 个属性。
  4. 'name|min-max': object
    从属性值 object 中随机选取 min 到 max 个属性。

5. 属性值是数组 Array

  1. 'name|1': array

    从属性值 array 中随机选取 1 个元素,作为最终值。

    'arr|1':[
    'A',
    'B',
    'C'
  ]
    //随机1个数组值
  1. 'name|+1': array

    从属性值 array 中顺序选取 1 个元素,作为最终值。

    1. 'name|min-max': array
      通过重复属性值 array 生成一个新数组,重复次数大于等于 min,小于等于 max。

    2. 'name|count': array
      通过重复属性值 array 生成一个新数组,重复次数为 count。

6. 属性值是函数 Function
'name': function
执行函数 function,取其返回值作为最终的属性值,函数的上下文为属性 'name' 所在的对象。

7. 属性值是正则表达式 RegExp

  1. 'name': regexp
    根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。
    Mock.mock({
    'regexp1': /[a-z][A-Z][0-9]/,
    'regexp2': /\w\W\s\S\d\D/,
    'regexp3': /\d{5,10}/
})
// =>
{
    "regexp1": "pJ7",
    "regexp2": "F)\fp1G",
    "regexp3": "561659409"
}
数据占位符定义规范 

数据占位符定义规范 DPD

占位符 只是在属性值字符串中占个位置,并不出现在最终的属性值中。
占位符 的格式为:

@占位符
@占位符(参数 [, 参数])

注意:

  • 用 @ 来标识其后的字符串是 占位符。
  • 占位符 引用的是 Mock.Random 中的方法。
  • 通过 Mock.Random.extend() 来扩展自定义占位符。
  • 占位符 也可以引用 数据模板 中的属性。
  • 占位符 会优先引用 数据模板 中的属性。
  • 占位符 支持 相对路径 和 绝对路径。

方法

Mock.mock( rurl?, rtype?, template|function( options ) )

根据数据模板生成模拟数据。

  • rurl 可选。
    表示需要拦截的 URL,可以是 URL 字符串或 URL 正则。例如 /\/domain\/list.json/、'/domian/list.json'。

  • rtype 可选。
    表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。

  • template 可选
    表示数据模板,可以是对象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。

  • function(options) 可选。
    表示用于生成响应数据的函数。
    ++ options
    指向本次请求的 Ajax 选项集,含有 url、type 和 body 三个属性

Mock.setup( settings )

配置拦截 Ajax 请求时的行为。支持的配置项有:timeout。

  • settings 必选。
    配置项集合

  • timeout 可选。
    指定被拦截的 Ajax 请求的响应时间,单位是毫秒。值可以是正整数,例如 400,表示 400 毫秒 后才会返回响应内容;也可以是横杠 '-' 风格的字符串,例如 '200-600',表示响应时间介于 200 和 600 毫秒之间。默认值是'10-100'。

Mock.Random

Mock.Random 是一个工具类,用于生成各种随机数据。

var Random = Mock.Random
Random.email()
// => "n.clark@miller.io"
Mock.mock('@email')
// => "y.lee@lewis.org"
Mock.mock( { email: '@email' } )
// => { email: "v.lewis@hall.gov" }

方法

Type 1 Method
Basic boolean, natural, integer, float, character, string, range, date, time, datetime, now
Image image, dataImage
Color color
Text paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle
Name first, last, name, cfirst, clast, cname
Web url, domain, email, ip, tld
Address area, region
Helper capitalize, upper, lower, pick, shuffle
Miscellaneous guid, id

扩展

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

例子

http://mockjs.com/examples.html

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。