MockJs学习

一、Mock.js介绍

Mock.js 是一款模拟数据生成器，旨在帮助前端开发人员独立于后端进行开发，帮助编写单元测试。

  • 提供了以下模拟功能：
  • 根据数据模板生成模拟数据
  • 模拟 Ajax 请求，生成并返回模拟数据
  • 基于 HTML 模板生成模拟数据

二、Mock.js特点

  • 前后端分离让前端开发人员独立于后端进行开发。
  • 增加单元测试的真实性通过随机数据，模拟各种场景。
  • 开发无侵入不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。
  • 用法简单符合直接对接的接口。
  • 数据类型丰富支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
  • 方便扩展支持支持扩展更多数据类型，支持自定义函数和正则。

三、Mock.js安装

  • 在需要使用的项目根目录下进行安装，执行如下命令：
npm install mockjs
或者(二选一即可)
cnpm install mockjs

四、快速入门案例

  • 需求：生成5条列表数据
  • 步骤一：新建demo.js编写代码如下
//引入mock
let Mock=require('mockjs')
let data=Mock.mock({
'list|5':[ //指定生成5条如下数据
		{
			'id':1,
			'name':'测试'
		}
	]
})
//输出结果，且格式化前缩进2格
console.log(JSON.stringify(data,null,2 ))
  • 步骤二：执行js文件，命令如下：
node demo.js

五、数据模版定义规范DTD

  • 数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值，如下：
// 属性名 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
  • 生成规则的含义需要依赖属性值的类型才能确定。
  • 属性值 中可以含有 @占位符。
  • 属性值 还指定了最终值的初始值和类型。
5.1、属性值是字符串
  • ‘name|count’: string
  • 通过重复 string 生成一个字符串，重复次数等于 count
// 使用 Mock
let Mock = require('mockjs')
let data = Mock.mock({
	'list|5': [{
		'id': 1,
		'name':'测试',
		'phone|11':'1'
	}]
})
// 输出结果
console.log(JSON.stringify(data,null,2))
  • ‘name|min-max’: string
  • 通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max
// 使用 Mock
let Mock = require('mockjs')
let data = Mock.mock({
	'list|5': [{
		'id': 1,
		'name|2‐4':'测试',
		'phone|11':'1'
	}]
})
// 输出结果
console.log(JSON.stringify(data,null,2))
5.2、属性值是数字number
  • ‘name|+1’: number
  • 属性值自动加 1，初始值为 number。
// 使用 Mock
let Mock = require('mockjs')
let data = Mock.mock({
	'list|5': [{
		'id|+1': 1,
		'name|2‐3':'测试',
		'phone|11':'1'
	}]
})
// 输出结果
console.log(JSON.stringify(data,null,2))
  • ‘name|min-max’: number
  • 生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型
// 使用 Mock
let Mock = require('mockjs')
let data = Mock.mock({
	'list|5': [{
		'id|+1': 1,
		'name|2‐3':'测试',
		'phone|11':'1',
		'point|122‐500':0
	}]
})
// 输出结果
console.log(JSON.stringify(data,null,2))
  • ‘name|min-max.dcount’: value
  • 生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分为dcount位
// 使用 Mock
let Mock = require('mockjs')
let data = Mock.mock({
	'list|5': [{
		'id|+1': 1,
		'name|2‐3':'测试',
		'phone|11':'1',
		'point|122‐500':0,
		'money|3000‐8000.2':0
	}]
})
// 输出结果
console.log(JSON.stringify(data,null,2))
  • ‘name|min-max.dmin-dmax’: number
  • 生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到dmax 位。
// 使用 Mock
let Mock = require('mockjs')
let data = Mock.mock({
	'list|5': [{
		'id|+1': 1,
		'name|2‐3':'测试',
		'phone|11':'1',
		'point|122‐500':0,
		'money|3000‐8000.2':0,
		'money2|1000‐5000.2‐4':0,
	}]
})
// 输出结果
console.log(JSON.stringify(data,null,2))
5.3、属性值是布尔
  • ‘name|1’: boolean
  • 随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2
// 使用 Mock
let Mock = require('mockjs')
let data = Mock.mock({
	'list|5': [{
		'id|+1': 1,
		'name|2‐3':'测试',
		'phone|11':'1',
		'point|122‐500':0,
		'money|3000‐8000.2':0,
		'status|1':true
	}]
})
// 输出结果
console.log(JSON.stringify(data,null,2))
  • ‘name|min-max’: value
  • 随机生成一个布尔值，值为 value 的概率是 min / (min + max)
// 使用 Mock
let Mock = require('mockjs')
let data = Mock.mock({
	'list|5': [{
		'id|+1': 1,
		'name|2‐3':'测试',
		'phone|11':'1',
		'point|122‐500':0,
		'money|3000‐8000.2':0,
		'status|1':true,
		'default|1‐3':true
	}]
})
// 输出结果
console.log(JSON.stringify(data,null,2))
5.4、属性值是Object
  • ‘name|count’: object
  • 从属性值 object 中随机选取 count 个属性。
// 使用 Mock
let Mock = require('mockjs')
let data = Mock.mock({
	'list|5': [{
		'id|+1': 1,
		'name|2‐3':'测试',
		'phone|11':'1',
		'point|122‐500':0,
		'money|3000‐8000.2':0,
		'status|1':true,
		'default|1‐3':true,
		'detail|2':{'id':1,'date':'2005‐01‐01','content':'记录'}
	}]
})
// 输出结果
console.log(JSON.stringify(data,null,2))
  • ‘name|min-max’: object
  • 从属性值 object 中随机选取 min 到 max 个属性
// 使用 Mock
let Mock = require('mockjs')
let data = Mock.mock({
	'list|5': [{
		'id|+1': 1,
		'name|2‐3':'测试',
		'phone|11':'1',
		'point|122‐500':0,
		'money|3000‐8000.2':0,
		'status|1':true,
		'default|1‐3':true,
		'detail|2‐3':{'id':1,'date':'2005‐01‐01','content':'记录'}
	}]
})
// 输出结果
console.log(JSON.stringify(data,null,2))
5.5、属性值是数组
  • ‘name|count’: array
  • 通过重复属性值 array 生成一个新数组，重复次数为 count
  • ‘name|min-max’: array
  • 通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。
// 使用 Mock
let Mock = require('mockjs')
let data = Mock.mock({
	'list|5‐10': [{
		'id|+1': 1,
		'name|2‐3':'测试',
		'phone|11':'1',
		'point|122‐500':0,
		'money|3000‐8000.2':0,
		'status|1':true,
		'default|1‐3':true,
		'detail|2‐3':{'id':1,'date':'2005‐01‐01','content':'记录'}
	}]
})
// 输出结果
console.log(JSON.stringify(data,null,2))

六、数据占位符定义规范DPD

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

  • 内置方法列表如下：
  • 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
6.1、基本方法
  • 可以生成随机的基本数据类型
  • string 字符串
  • integer 整数
  • date 日期
// 使用 Mock
let Mock = require('mockjs')
let data = Mock.mock({
	'list|10': [{
		'id|+1': 1,
		'name':'@string',
		'point':'@integer',
		'birthday':'@date'
	}]
})
// 输出结果
console.log(JSON.stringify(data,null,2))
6.2、图像方法
  • image 随机生成图片地址
// 使用 Mock
let Mock = require('mockjs')
let data = Mock.mock({
	'list|10': [{
		'id|+1': 1,
		'name':'@string',
		'point':'@integer',
		'birthday':'@date',
		'pic':'@image'
	}]
})
// 输出结果
console.log(JSON.stringify(data,null,2))
6.3、文本方法
  • @title: 标题
  • @cword(100) :文本内容 参数为字数
// 使用 Mock
let Mock = require('mockjs')
let data = Mock.mock({
	'list|10': [{
		'id|+1': 1,
		'name':'@string',
		'point':'@integer',
		'birthday':'@date',
		'pic':'@image',
		'title':'@title',
		'content':'@cword(100)'
	}]
})
// 输出结果
console.log(JSON.stringify(data,null,2))
6.4、名称方法
  • cname :中文名称
  • cfirst:中文姓氏
  • Last:英文姓氏
// 使用 Mock
let Mock = require('mockjs')
let data = Mock.mock({
	'list|10': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
		'id|+1': 1,
		'name':'@cname',
		'ename':'@last',
		'cfirst':'@cfirst',
		'point':'@integer',
		'birthday':'@date',
		'pic':'@image',
		'title':'@title',
		'content':'@cword(100)'
	}]
})
// 输出结果
console.log(JSON.stringify(data,null,2))
6.5、网络方法
  • 可以生成url ip email等网络相关信息
// 使用 Mock
let Mock = require('mockjs')
let data = Mock.mock({
	'list|10': [{
		'id|+1': 1,
		'name':'@cname',
		'ename':'@last',
		'cfirst':'@cfirst',
		'point':'@integer',
		'birthday':'@date',
		'pic':'@image',
		'title':'@title',
		'content':'@cword(100)',
		'url':"@url",
		'ip':"@ip",
		'email':"@email"
	}]
})
// 输出结果
console.log(JSON.stringify(data,null,2))
6.6、地址方法
  • @region 区域
  • @county 省市县
// 使用 Mock
let Mock = require('mockjs')
let data = Mock.mock({
	'list|10': [{
		'id|+1': 1,
		'name':'@cname',
		'ename':'@last',
		'cfirst':'@cfirst',
		'point':'@integer',
		'birthday':'@date',
		'pic':'@image',
		'title':'@title',
		'content':'@cword(100)',
		'url':"@url",
		'ip':"@ip",
		'email':"@email",
		'area':'@region',
		'address':'@county(true)'
	}]
})
// 输出结果
console.log(JSON.stringify(data,null,2))