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

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

巴特西