一:概念
Mock.js是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：
- 根据数据模板生成模拟数据
- 模拟 Ajax 请求，生成并返回模拟数据
- 基于 HTML 模板生成模拟数据
二:安装
cnpm install mockjs
三:数据模板定义规范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
生成规则的含义需要依赖属性值的类型才能确定。属性值 中可以含有 @占位符。属性值 还指定了最终值的初始值和类型.
// 使用 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))1.属性值是string
‘name|count‘: string: ‘phone|11‘:‘1‘
通过重复 string 生成一个字符串，重复次数等于 count
‘name|min-max‘: string: ‘name|2‐4‘:‘测试‘
通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max
2.属性值是number
‘name|+1‘: number: ‘id|+1‘: 1
属性值自动加 1，初始值为 number
‘name|min-max‘: number: ‘point|122‐500‘:0
生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型
‘name|min-max.dcount‘: value: ‘money|3000‐8000.2‘:0
生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分为dcount位
‘name|min-max.dmin-dmax‘: number: ‘money2|1000‐5000.2‐4‘:0
生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到dmax 位
3.属性值是boolean
‘name|1‘: boolean : ‘status|1‘:true
随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2
‘name|min-max‘: value : ‘default|1‐3‘:true
随机生成一个布尔值，值为 value 的概率是 min / (min + max)
4.属性值是Object
‘name|count‘: object : ‘detail|2‘:{‘id‘:1,‘date‘:‘2005‐01‐01‘,‘content‘:‘记录‘}
从属性值 object 中随机选取 count 个属性
‘name|min-max‘: object : ‘detail|2‐3‘:{‘id‘:1,‘date‘:‘2005‐01‐01‘,‘content‘:‘记录‘}
从属性值 object 中随机选取 min 到 max 个属性
5.属性值是array
‘name|count‘: array
通过重复属性值 array 生成一个新数组，重复次数为 count
‘name|min-max‘: array : ‘list|5‐10‘: [{...}]
通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max
四:数据占位符定义规范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,county
Helper: capitalize, upper, lower, pick, shuffle
Miscellaneous: guid, id
示例:
// 使用 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))1.基本方法
string 字符串: ‘name‘:‘@string‘
integer 整数: ‘point‘:‘@integer‘
date 日期: ‘birthday‘:‘@date‘
可以生成随机的基本数据类型
2.图像方法
‘pic‘:‘@image‘
image 随机生成图片地址
3.文本方法
@title: 标题 : ‘title‘:‘@title‘
@cword(100) :文本内容 参数为字数 : ‘content‘:‘@cword(100)‘
4.名称方法
cname :中文名称 : ‘name‘:‘@cname‘
cfirst:中文姓氏 : ‘cfirst‘:‘@cfirst‘
Last:英文姓氏 : ‘ename‘:‘@last‘
5.网络方法
可以生成url ip email等网络相关信息
‘url‘:"@url"
‘ip‘:"@ip"
‘email‘:"@email"
5.地址方法
@region 区域 : ‘area‘:‘@region‘
@county 省市县 : ‘address‘:‘@county(true)‘
原文地址：https://www.cnblogs.com/itzlg/p/11966829.html