Why MockJs?

  • 本文出自,原文链接:http://huxinmin.com
  • 本文出自,原文链接:http://huxinmin.com
    原文出自[胡新敏的个人博客] 转载请保留原文链接:http://huxinmin.com
    原文出自[胡新敏的个人博客] 转载请保留原文链接:http://huxinmin.com
  • 本文原文地址,原文链接:http://huxinmin.com
  • 谢绝转载,原文地址在胡新敏的个人博客,原文链接:http://huxinmin.com
    谢绝转载,原文地址在胡新敏的个人博客,原文链接:http://huxinmin.com

    谢绝转载,原文地址在胡新敏的个人博客,原文链接:http://huxinmin.com

  • 原文出自[胡新敏的个人博客] 转载请保留原文链接:http://huxinmin.com
  • 原文出自[胡新敏的个人博客] 转载请保留原文链接:http://huxinmin.com

    本文原文地址,原文链接:http://huxinmin.com

    原文出自[胡新敏的个人博客] 转载请保留原文链接:http://huxinmin.com

    禁止非法采集,原文地址,原文链接:http://huxinmin.com
    本文禁止任何形式的非法采集,原文地址:胡新敏的个人博客,原文链接:http://huxinmin.com
    未经作者同意,谢绝转载,原文链接:http://huxinmin.com
    本文出自,原文链接:http://huxinmin.com
    未经作者同意,谢绝转载,原文链接:http://huxinmin.com
    本文出自,原文链接:http://huxinmin.com

    在上一篇文章我介绍了如何使用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))
    }