mock.js使用方法

1. 简介

随机生成相应格式的数据。支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
官方文档：http://mockjs.com/

2. 安装

npm install mockjs --save

3. 引入mock

// (1) import引入
import Mock from 'mockjs'

// (2) require引入
let Mock = require('mockjs')

4. 使用

• 属性名 和 生成规则 之间用竖线 | 分隔。
• 生成规则 是可选的。
• 生成规则 有 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

数据模板定义

数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：

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

'name|rule': value

（1）string，number，boolean

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

//生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。
'name|min-max': number

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

//随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。
'name|1': boolean
//随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。
'name|min-max': value

let data = Mock.mock({
  "string1|1-10": "★" , // "★★★★★★★★"  // 随机生成1-10个星 
  "string2|3": "1",  // "111" // 生成3个 "1"
  
  "number1|1-100": 100, // 55  // 随机生成1-100之间的数字
  "number2|1-100.1-10": 1, // 12.156  // 随机生成1-100之间的数，随机1-10位小数
  "number3|55.1-10": 1, // 55.114  // 55后面随机1-10位小数
  "number4|10.3": 1, // 10.356 // 10后面随机3位小数
  
  "boolean1|1-2": true, // true // 生成true 或 false
})

（2）object

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

let data = Mock.mock({
  "object1|2": {
    "a": "111",
    "b": "222",
    "c": "333",
    "d": "444"
  } , // {b: "222", a: "111"} // 生成该对象中的随机2个属性 
   "object2|2-4": {
    "a": "111",
    "b": "222",
    "c": "333",
    "d": "444"
  }  // {a: "111", d: "444", c: "333"} // 生成该对象中的随机2-4个属性 
})

（3）array

//从属性值 array 中随机选取 1 个元素，作为最终值。
'name|1': array
//从属性值 array 中顺序选取 1 个元素，作为最终值。
'name|+1': array
//通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。
'name|min-max': array
//通过重复属性值 array 生成一个新数组，重复次数为 count。
'name|count': array

let data = Mock.mock({
  "array1|1": [
    "a",
    "b",
    "c"
  ], // {array1: "b"} // 随机生成其中一个值
  
   "array2|+1": [
    "a",
    "b",
    "c"
  ], //  {array2: "a"} // 按顺序获取第一个值
  
  "array|1-10": [
    "abc"
  ], // ["abc", "abc", "abc", "abc", "abc"] // 随机生成含有1-10个abc的数组
}) 

（4）function

执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 ‘name’ 所在的对象。

let data = Mock.mock({
  'name': 'zhangsan',
  'fn': function() {
    return this.name
  }
}) // {name: "zhangsan", fn: "zhangsan"}

（5）RegExp

let data = Mock.mock({
   // 随机生成符合正则的数据
  'regexp1': /[a-z][A-Z][0-9]/ , // {regexp1: "wM6"} 
  'regexp2': /\d{5,10}/ , // {regexp2: "43897705"}
})

数据占位符定义

占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中。

Mock.Random 是一个工具类，用于生成各种随机数据。
Mock.Random 的方法在数据模板中称为『占位符』，书写格式为 @占位符(参数 [, 参数]) 。

注意：

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

Type	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

let data = Mock.mock({
    "data":
      {
      	
        "time": "@datetime",//随机生成日期时间
        "score":  "@natural(1, 100)",//随机生成1-100的数字
        "name": "@cname",//随机生成中文名字
        "string": "@cword", // 生成一个随机字符串
        str: '@cword(10,15)' ,// 生成一个10-15位随机字符串
        title: "@ctitle(5,8)", // 生成指定范围的标题
        sentence: '@csentence(50,80)', // 生成指定范围的句子
        content: '@cparagraph()' , // 随机生成段落
    	idCard: '@id()', // 身份证号码
   		address: '@city(true)' // 如果@city(),只会生成市，如果@city(true)会生成省和市
      }
});