mock.js的运用

一:概念

Mock.js是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：

根据数据模板生成模拟数据
模拟 Ajax 请求，生成并返回模拟数据
基于 HTML 模板生成模拟数据

官网: http://mockjs.com/

二:安装

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

扫描二维码关注公众号，回复： 8039405 查看本文章

'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)'