Why MockJs?

在上一篇文章我介绍了如何使用json-server来模拟后台，自己实现restful风格的接口，但是对于伪造数据这方面，json-server并不很强大，但是也可以使用faker，mockjs等来生成动态数据，虽然 mockj s可以模拟的数据不如 faker 那么多，但是由于其对中文的良好支持，并且使用了位于国内的随机图片提供商，显然是更适合国内用户使用。

MockJs很好的解决了以下这些问题：

  • 无法写出大量的，随机的静态模拟数据
  • 无法很随意的修改静态模拟数据
  • 某些逻辑复杂的代码，加入或去除模拟数据时得小心翼翼。
  • 尽可能还原真实的数据
  • 特殊的格式，例如IP,随机数，图片，地址
  • ...

虽然MockJs也可以用于拦截Ajax,但是无法定义复杂的路由和不支持跨域，所以我这篇文章只介绍使用MockJs的模拟数据的功能。

开始 & 安装

npm install mockjs --save

// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))

更多安装以及使用方式，例如Bower，RequireJS (AMD)，Sea.js (CMD)等请自行查看官方文档：
https://github.com/nuysoft/Mock/wiki/Getting-Started

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

  • Basic

    • Random.boolean( min?, max?, current? )返回一个随机的布尔值
    • Random.natural( min?, max? )返回一个随机的自然数（大于等于 0 的整数）
    • Random.integer( min?, max? )返回一个随机的整数
    • Random.float( min?, max?, dmin?, dmax? )返回一个随机的浮点数
    • Random.character( pool? )返回一个随机字符
    • Random.string( pool?, min?, max? )返回一个随机字符串
    • Random.range( start?, stop, step? )返回一个整型数组

  • Date

    • Random.date( format? )返回一个随机的日期字符串
    • Random.time( format? )返回一个随机的时间字符串
    • Random.datetime( format? )返回一个随机的日期和时间字符串
    • Random.now( unit?, format? )返回当前的日期和时间字符串

  • Image

    • Random.image( size?, background?, foreground?, format?, text? )生成一个随机的图片地址
    • Random.dataImage( size?, text? )生成一段随机的 Base64 图片编码

  • Color

    • Random.color()随机生成一个有吸引力的颜色，格式为 '#RRGGBB'
    • Random.hex()随机生成一个有吸引力的颜色，格式为 '#RRGGBB'。
    • Random.rgb()随机生成一个有吸引力的颜色，格式为 'rgb(r, g, b)'
    • Random.rgba()随机生成一个有吸引力的颜色，格式为 'rgba(r, g, b, a)'
    • Random.hsl()随机生成一个有吸引力的颜色，格式为 'hsl(h, s, l)'

  • Text

    • Random.paragraph( min?, max? )随机生成一段文本
    • Random.cparagraph( min?, max? )随机生成一段中文文本
    • Random.sentence( min?, max? )随机生成一个句子，第一个单词的首字母大写
    • Random.csentence( min?, max? )随机生成一段中文文本
    • Random.word( min?, max? )随机生成一个单词
    • Random.cword( pool?, min?, max? )随机生成一个汉字
    • Random.title( min?, max? )随机生成一句标题，其中每个单词的首字母大写
    • Random.ctitle( min?, max? )随机生成一句中文标题

  • Name

    • Random.first() 随机生成一个常见的英文名
    • Random.last()随机生成一个常见的英文姓
    • Random.name( middle? )随机生成一个常见的英文姓名
    • Random.cfirst()随机生成一个常见的中文名
    • Random.clast()随机生成一个常见的中文姓
    • Random.cname()随机生成一个常见的中文姓名

  • Web

    • Random.url( protocol?, host? )随机生成一个 URL
    • Random.protocol()随机生成一个 URL 协议
    • Random.domain()随机生成一个域名
    • Random.tld()随机生成一个顶级域名（Top Level Domain）
    • Random.email( domain? )随机生成一个邮件地址
    • Random.ip()随机生成一个 IP 地址

  • Address

    • Random.region()随机生成一个（中国）大区
    • Random.province()随机生成一个（中国）省（或直辖市、自治区、特别行政区）
    • Random.city( prefix? )随机生成一个（中国）市
    • Random.county( prefix? )随机生成一个（中国）县
    • Random.zip()随机生成一个邮政编码（六位数字）

  • Helper

    • Random.capitalize( word )把字符串的第一个字母转换为大写
    • Random.upper( str )把字符串转换为大写
    • Random.lower( str )把字符串转换为小写
    • Random.pick( arr )从数组中随机选取一个元素，并返回
    • Random.shuffle( arr )打乱数组中元素的顺序，并返回

  • Miscellaneous

    • Random.guid()随机生成一个 GUID
    • Random.id()随机生成一个 18 位身份证
    • Random.increment( step? )生成一个全局的自增整数

Random.extend自定义数据拓展

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

数据生成规范

  • 数据模板定义规范（Data Template Definition，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
  • 生成规则 的 含义 需要依赖 属性值的类型 才能确定。
  • 属性值 中可以含有 @占位符。
  • 属性值 还指定了最终值的初始值和类型。

  • 数据占位符定义规范（Data Placeholder Definition，DPD）

只能使用在Mock.mock中的数据模板中

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

注意：

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

实例

Mock.mock({
    name: {
        first: '@FIRST',
        middle: '@FIRST',
        last: '@LAST',
        full: '@first @middle @last'
    }
})
// =>
{
    "name": {
        "first": "Charles",
        "middle": "Brenda",
        "last": "Lopez",
        "full": "Charles Brenda Lopez"
    }
}
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"
}
{
        
         title: Random.cword(8,20),
         desc: content.substr(0,40),
         tag: Random.cword(2,6),
         views: Random.integer(100,5000),
         images: images.slice(0,Random.integer(1,3))
}