Mock

40次阅读
没有评论

共计 8232 个字符,预计需要花费 21 分钟才能阅读完成。

mock 的使用

  1. 安装 mockjs
    bower install --save mockjs
  2. 文件中导入 mockjs 返回有个 mock 对象
    const Mock = require('mockjs')
  3. mock 对象中有一个 mock 函数 mock 会根据自己编写的模板自动生成模拟数据

官网:http://mockjs.com

初体验

 const Mock = require('mockjs')

/**
 * 返回的模拟数据都是对象类型
 *  返回对象的 key list
 */
const data = Mock.mock({
  // 生成的随机数组的长度是 5-10
  "list|5-10": [
    // 数组中的元素是对象类型 "id|+1": 1 生成的 id 是从 1 开始递增的
    { "id|+1": 1 }
  ]
})

console.log(data)
/*
{
  list: [
    { id: 1 }, { id: 2 }, { id: 3 },
    { id: 4 }, { id: 5 }, { id: 6 },
    { id: 7 }, { id: 8 }, { id: 9 }
  ]
}
*/   

Mock 语法规范

文档:https://github.com/nuysoft/Mock/wiki

  1. 数据模板定义规范(Data Template Definition,DTD)
  2. 数据占位符定义规范(Data Placeholder Definition,DPD)

数据模板定义规范 DTD

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

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

'id|+1':1 // 属性名是 id,规则是自增 1,从 1 开始

注意:

属性名 和 生成规则 之间用竖线 | 分隔。

生成规则 是可选的。

生成规则 有 7 种格式:

I. 'name|min-max': value

II. 'name|count': value

III. 'name|min-max.dmin-dmax': value

IV. 'name|min-max.dcount': value

V. 'name|count.dmin-dmax': value

VI. 'name|count.dcount': value

VII. 'name|+step': value

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

属性值 中可以含有 @占位符

属性值 还指定了最终值的初始值和类型。

生成规则和示例:

1. 属性值是字符串 String

  1. 'name|min-max': string
    通过重复 string 生成一个字符串,重复次数大于等于 min,小于等于 max
  2. 'name|count': string
    通过重复 string 生成一个字符串,重复次数等于 count

2. 属性值是数字 Number

  1. 'name|+1': number
    属性值自动加 1,初始值为number
  2. 'name|min-max': number
    生成一个大于等于 min、小于等于 max 的整数,属性值 number 只是用来确定类型。
  3. 'name|min-max.dmin-dmax': number
    生成一个浮点数,整数部分大于等于 min、小于等于 max,小数部分保留 dmindmax 位。
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)

4. 属性值是对象 Object

  1. ‘name|count’: object
    从属性值 object 中随机选取 count 个属性。
  2. 'name|min-max': object
    从属性值 object 中随机选取 minmax 个属性。

5. 属性值是数组 Array

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

6. 属性值是函数 函数

  1. '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({
    name: {
        first: '@FIRST',
        middle: '@FIRST',
        last: '@LAST',
        full: '@first @middle @last'
    }
})
// =>
{
    "name": {
        "first": "Charles",
        "middle": "Brenda",
        "last": "Lopez",
        "full": "Charles Brenda Lopez"
    }
}

生成模拟数据模板

示例:http://mockjs.com/examples.html

字符串和数值一共有 7 种生成规则

生成规则 说明 示例
min-max 生成 min-max 之间的字符串 'list|1-10'
count 生成 count 个字符串 'list|5'
min-max.dmin-dmax 生成 min-max 之间的浮点数,小数点后面保留 dmin-dmax 位 'id|1-10.1-3':1
count.dcount 生成 count 个浮点数,小数点保留 dcount 位 'id|10.2':1
min-max.dcount 同上 'id|1-10.3':1
count.dmix-dmax 同上 'id|10.1-3':1
+step 每次累计 step 值 'id|+1':1

布尔值,对象和数组的生成规则

生成规则 说明 示例
布尔值 生成概率 'flag|1':true
布尔值 min-max 生成概率为 min/(min+max) 'flag|1-10':true
对象 count 从对象中随机抽取 count 个属性 'obj|2':obj
对象 min-max 从对象中随机抽取 min-max 个属性 'obj|1-5':obj
数组 1 获取一次数组 'arr|1':arr
数组 +1 累加 'arr|+1':arr
数组 min-max 重复 min-max 次组成一个新的数组 'arr|1-5':arr

更多:官方文档 https://github.com/nuysoft/Mock/wiki

随机生成字符串

const Mock = require('mockjs')

const data = Mock.mock({
  "a": "#", // 返回数据对象的 key 就是 a,值是 #
  "b|3":"#",
  "c|1-3":"#", // 返回 1-3 个 #
})

console.log(data)

随机生成数字

const Mock = require('mockjs')

const data = Mock.mock({
  "a": 1, // 返回数据对象的 key 就是 a,值是 1
  "b|1-100": 1, // 随机生成 1-100 中数值
})

console.log(data)

随机生成布尔值

const Mock = require('mockjs')

const data = Mock.mock({
  "a": true, // 返回数据对象的 key 就是 a,值是 true
  "b|1-2": false, // 随机返回 true 或 false
})

console.log(data)

随机生成对象

const Mock = require('mockjs')

const cities = {
  "bj": "北京",
  "sh": "上海",
  "gz": "广州",
  "sz": "深圳",
  "xm": "厦门"
}
const data = Mock.mock({
  "a|3": cities, // 随机生成一个只有三个元素的对象,从 cities 里面
  "b|2-5": cities, // 随机生成一个有 2 个到 5 个元素的对象,从 cities 里面
})

console.log(data)

随机生成数组

const Mock = require('mockjs')

const arr = ["北京", "上海", "广州"]
const data = Mock.mock({
  // 匿名数组:生成有几个元素到几个的元素数组
  "a|3": ["北京"], // 生成一个只有三个元素的数组
  "b|2-5": ["北京"], // 随机生成 2 个到 5 个元素的数组
  // 命名数组:将数组的元素生成几次
  "c|2": arr, // 将 arr 重复 2 次生成新数组
  "d|1-3": arr // 将 arr 重复 1-3 次生成新数组
})

console.log(data)

数据占位符定义

随机生成字符串

const Mock = require('mockjs')

const data = Mock.mock({
  "a": Mock.Random.string(), // 随机生成字符串
  "b": Mock.mock("@string"), // 模板方式,没有参数时可以不用加括号
  "c": Mock.mock("@string(6)"), // 随机生成 6 位字符串
  "d": Mock.mock("@string(upper,8)"), // 随机都是大写,长度为 8 位的字符串
  "e": Mock.mock("@string(4,8)"), // 获取指定长度范围的字符串
  "f": Mock.mock("@string(lower,4,8)"), // 获取都是小写指定长度范围的字符串
})
console.log(data)

随机获取整数元素数组

const Mock = require('mockjs')

const data = Mock.mock({
  "a": Mock.mock("@range(10)"), // 获取长度为 10 的数组,数组元素从 0 开始,每个元素递增 1
  "b": Mock.mock("@range(5,11)"), // 获取里面元素是 5~10 的数组
  "c": Mock.mock("@range(1,10,2)"), // [ 1, 3, 5, 7, 9 ] 步长是 2
})
console.log(data)

随机获取时间

const Mock = require('mockjs')

const data = Mock.mock({
  "a": Mock.mock('@date'), // 随机获取时间,年-月-日
  "b": Mock.mock('@date(yyyy/MM/dd HH:mm:ss)'), // 随机获取格式化后的时间,年/月/日 hh:mm:ss
})
console.log(data)

随机获取图片

const Mock = require('mockjs')

// Random.image( size?, background?, foreground?, format?, text? )
const data = Mock.mock({
  "a": Mock.mock('@image'), // 随机获取一张图片
  "b": Mock.mock('@image(300x300)'), // 随机获取指定大小的图片
  "c": Mock.mock('@image(300x300,#ffc0cb)'), // 随机获取指定大小指定背景的图片
  "d": Mock.mock('@image(300x300,#ffc0cb,#ff0000,xxx)'), // 随机获取指定大小指定背景指定文字颜色的图片
  "e": Mock.mock('@image(300x300,#ffc0cb,#ff0000,gif,xxx)'), // 随机获取指定大小指定背景指定文字颜色指定图片类型的图片
})
console.log(data)

随机获取颜色

const Mock = require('mockjs')

const data = Mock.mock({
  "a": Mock.mock('@color'), // 16 进制表示的颜色
  "b": Mock.mock('@hex'), // 16 进制表示的颜色
  "c": Mock.mock('@rgb'), // rgb 的颜色
  "d": Mock.mock('@rgba'), // rgba 的颜色
})
console.log(data)

随机获取文本

cparagraph

const Mock = require('mockjs')

const data = Mock.mock({
  "a": Mock.mock('@cparagraph'), // 随机生成一段中文段落
  "b": Mock.mock('@cparagraph(2)'), // 生成的段落包含 2 句话
  "c": Mock.mock('@cparagraph(1,3)'), // 生成的段落包含 1~3 句话
})
console.log(data)

csentence

const Mock = require('mockjs')

const data = Mock.mock({
  "a": Mock.mock('@csentence'), // 随机生成一句中文句子
  "b": Mock.mock('@csentence(5)'), // 随机生成含有 5 个字符的中文句子
  "c": Mock.mock('@csentence(5,10)'), // 随机生成含有 5~10 个字符的中文句
})
console.log(data)

cword

const Mock = require('mockjs')

const data = Mock.mock({
  "a": Mock.mock('@cword'), // 随机生成一个汉字
  "b": Mock.mock('@cword(5)'), // 随机生成 5 个汉字
  "c": Mock.mock('@cword(3,5)'), // 随机生成 3~5 个汉字
  "d": Mock.mock('@cword(零一二三四五六七八九十)'), // 从该字符串中随机取得一个字符
  "e": Mock.mock('@cword(零一二三四五六七八九十,3)'), // 从该字符串中随机取得 3 个字符
  "f": Mock.mock('@cword(零一二三四五六七八九十,3,5)'), // 从该字符串中随机取得 3~5 个字符
})
console.log(data)

ctitle

const Mock = require('mockjs')

const data = Mock.mock({
  // min 不能小于3,max 不能大于7
  "a": Mock.mock('@ctitle'), // 随机生成一个标题,3~7 之间
  "b": Mock.mock('@ctitle(5)'), // 随机生成一个 5 个字符的标题,3~7 之间
  "c": Mock.mock('@ctitle(3,7)'), // 随机生成 3~7 个字符的标题
})
console.log(data)

随机获取名字

const Mock = require('mockjs')

const data = Mock.mock({
  "a": Mock.mock('@cfirst'), // 随机生成一个姓氏
  "b": Mock.mock('@clast'), // 随机生成一个名字
  "d": Mock.mock('@cname'), // 随机生成一个姓名
})
console.log(data)

随机获取 web 相关数据

const Mock = require('mockjs')

const data = Mock.mock({
  a: Mock.Random.protocol(), // 随机生成一个协议
  b: Mock.Random.domain(), // 随机生成一个域名
  d: Mock.Random.tld(), // 随机生成一个顶级域名
  e: Mock.Random.email(), // 随机生成一个邮箱
  f: Mock.Random.email('qq.com'), // 随机生成一个带有域名的邮箱
  g: Mock.Random.ip(), // 随机生成一个 ip 地址
  h: Mock.Random.url(), // 协议+域名
  i: Mock.Random.url('https'), // https 协议的域名
  j: Mock.Random.url('https','www.qq.com'), // https 协议的 www.qq.com 域名
})
console.log(data)

随机获取地域信息

const Mock = require('mockjs')

const data = Mock.mock({
  a: Mock.Random.region(), // 随机生成一个中国的大区域
  b: Mock.Random.province(), // 随机生成一个中国的省
  c: Mock.Random.city(), // 随机生成一个中国的市
  d: Mock.Random.city(true), // 随机生成一个中国的市,带前缀
  e: Mock.Random.county(), // 随机生成一个中国的县
  f: Mock.Random.county(true), // 随机生成一个中国的县, 带前缀
  g: Mock.Random.zip(), // 随机生成一个邮编
})
console.log(data)

帮助函数

const Mock = require('mockjs')

const data = Mock.mock({
  a: Mock.Random.capitalize('hello'), // 首字母大写 Hello
  b: Mock.Random.upper('Hello'), // 全部大写 HELLO
  c: Mock.Random.lower('Hello'), // 全部小写 hello
  d: Mock.Random.pick(['张三', '李四', '王五']), // 数组中随机取一个
  e: Mock.Random.shuffle(['张三', '李四', '王五']), // 数组中随机打乱
})
console.log(data)

生成混杂数据

const Mock = require('mockjs')

const data = Mock.mock({
  a: Mock.Random.guid(), // 随机生成一个 GUID
  b: Mock.Random.id(), // 随机生成一个 18 位身份证
  c: Mock.Random.increment(), // 生成一个全局的自增整数
  d: Mock.Random.increment(2), // 生成一个全局的自增整,数整数自增的步长为 2
})
console.log(data)

搭建服务器

  1. 全局安装 mock-server 服务器包
    npm i @shymean/mock-server -g
  2. 通过 mock 命令启动服务器 js 文件
    mock -p 9999 -f 文件名.js
  3. 通过浏览器 postman 工具访问该服务器从而获取数据

https://www.npmjs.com/package/@shymean/mock-server

// mock.js
const Mock = require('mockjs')

/**
 * 参数1:请求路径
 * 参数2:请求方法
 * 参数3:返回数据
 */
Mock.mock('/home', 'get', {
  code: 200,
  data: {
    title: Mock.Random.ctitle(5),
    img: Mock.Random.image('200x200'),
    arr: Mock.Random.pick(['张三', '李四', '王五'])
  }
})

// mock -p 9999 -f mock.js

正文完
 0
qiaofugui.cn
版权声明:本站原创文章,由 qiaofugui.cn 于2024-05-21发表,共计8232字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码