【0.8 - 前端基础】Mock实现模拟数据

目录

0.前端基础

【0.1 - 前端基础】前端开发，工具推荐与环境搭建
【0.2 - 前端基础】Node.js安装与简单使用
【0.3 - 前端基础】NPM包管理器常用命令
【0.4 - 前端基础】ES6简单了解，var、let、const的区别
【0.5 - 前端基础】Babel转码器
【0.6 - 前端基础】模块化开发
【0.7 - 前端基础】Webpack打包
【0.8 - 前端基础】Mock实现模拟数据

简介

在前后端分离工作中，前端在没有得到后端的数据的情况下需要进行测试的时候，Mock可以提供给前端模拟的JSON数据进行测试。

MockJS的语法规范分两种：数据模板定义规范（Data Temaplate Definition，简称DTD）和数据占位符定义（Data Placeholder Definition，简称DPD）。

安装

在对应文件夹下执行

npm install mockjs

Mock的七种生成规范（DTD）

'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

属性为String字符串

//重复生成模拟数据，重复次数大于等于 min，小于等于 max
'name|min-max': string
//重复生成模拟数据，重复次数等于 count
'name|count': string

测试：

//拟定文件名为：mock.js
//引入mockjs
const Mock = require('mockjs')
let data1 = Mock.mock({'string|3-5':'测试  '})
console.log(data1)
let data2 = Mock.mock({'string|3':'mock  '})
console.log(data2)

结果：

属性为Number数字

//属性值自动加i，初始值为 number
'name|+i': number
//生成一个大于等于 min、小于等于 max 的整数
'name|min-max': number
//生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位
'name|min-max.dmin-dmax': number

测试：

//拟定文件名为：mock.js
//引入mockjs
const Mock = require('mockjs')
let data1 = Mock.mock({'number|+3':2})
console.log(data1)
let data2 = Mock.mock({'number|1-50':1})
console.log(data2)
let data3 = Mock.mock({'number|1-10.10':1})
console.log(data3)

结果：

属性为Boolean类型

//生成一个布尔值，前后概率对比为count/(1+count)和1/(1+count)
'name|count': boolean
//生成一个布尔值，前后概率对比为min/(min+max)和max/(min+max)
'name|min-max': boolean

测试：

//拟定文件名为：mock.js
//引入mockjs
const Mock = require('mockjs')
let data1 = Mock.mock({'boolean|4':true})
console.log(data1)
let data2 = Mock.mock({'boolean|1-5':true})
console.log(data2)

结果：

属性为Object

//从属性值 {} 中随机选取count个属性
'name|count': object{}
//从属性值 {} 中随机选取min-max个属性
'name|min-max': object{}

测试：

//拟定文件名为：mock.js
//引入mockjs
const Mock = require('mockjs')
let data1 = Mock.mock({
    'object|1-4':{
        'test1':'test1',
        'test2':'test2',
        'test3':'test3',
        'test4':'test4',
        'test5':'test5'
    }
})
console.log(data1)
let data2 = Mock.mock({
    'object|2':{
        'test1':'test1',
        'test2':'test2',
        'test3':'test3',
        'test4':'test4',
        'test5':'test5'
    }
})
console.log(data2)

结果：

属性为Array

//格式为'name|1':[' ', ' ' ...] 或'name|1':[{}, {} ...]

//从[]中随机选取 1 个元素，作为最终值。
'name|1': array[]
//重复生成count次元素
'name|count': array[]
重复生成min-max次元素
'name|min-max': array[]

测试：

//拟定文件名为：mock.js
//引入mockjs
const Mock = require('mockjs')
//'name|1': array[]
let data1 = Mock.mock({
    'array|1':[
        'test1',
        'test2',
        'test3'
    ]
})
console.log(data1)
//也可以JSON格式化
//console.log(JSON.stringify(data,null,2))
let data2 = Mock.mock({
    'array|1':[
        {
            "a":"A",
            "b":"B",
            "c":"C"
        },
        {
            "a":"A",
            "b":"B"
        },
        {
            "a":"A"
        }
    ]
})
console.log(data2)
//'name|count': array[]
let data3 = Mock.mock({
    'array|3':[
        'test1',
        'test2',
        'test3'
    ]
})
console.log(data3)
let data4 = Mock.mock({
    'array|3':[
        {
            "a":"A",
            "b":"B",
            "c":"C"
        },
        {
            "a":"A",
            "b":"B"
        },
        {
            "a":"A"
        }
    ]
})
console.log(data4)
//'name|min-max': array[]
let data5 = Mock.mock({
    'array|1-3':[
        'test1',
        'test2',
        'test3'
    ]
})
console.log(data5)
let data6 = Mock.mock({
    'array|1-3':[
        {
            "a":"A",
            "b":"B",
            "c":"C"
        },
        {
            "a":"A",
            "b":"B"
        },
        {
            "a":"A"
        }
    ]
})
console.log(data6)

结果：
结果较长，请自行测试

属性为函数Function

//执行函数function(){}，并将返回值作为最终的属性值
'name': function(){}

测试：

//拟定文件名为：mock.js
//引入mockjs
const Mock = require('mockjs')
let data = Mock.mock({
    'a':1,
    'b':2,
    'c':function(){
        return this.a + this.b
    }
})
console.log(data)

结果：

属性为正则表达式

//生成与正则表达式匹配的字符串，重复count次
'name|count': regexp

测试：

//拟定文件名为：mock.js
//引入mockjs
const Mock = require('mockjs')
let data1 = Mock.mock({
    'regexp': /\d{5,10}\.\d{2,5}/
})
console.log(data1)
let data2 = Mock.mock({
    'regexp|3': /\d{5,10}\.\d{2,5}\, /
})
console.log(data2)

结果：

占位符（DPD）

@占位符
@占位符(参数 [, 参数])

测试：

//拟定文件名为：mock.js
//引入mockjs
const Mock = require('mockjs')
let data = Mock.mock({
    'test1':'test',
    'test2':3,
    'test3':{
        'test3.1':{
            'test3.1.1':'value is'
        }
    },
    //路径
    'value':'@test1 @test3/test3.1/test3.1.1 @test2',
    //英文名称
    'name':'@name',
    //英文名（名在前）
    'first':'@first',
    //英文姓（姓在后）
    'last':'@last',
    //随机时间，或@date
    'time':'@datetime',
    //0-100随机数
    'number':'@natural(0,100)',
    //随机中文名
    'chinaname':'@cname',
    //随机邮箱
    'email':'@email',
    //随机字符串
    'string':'@string',
    //随机整数
    'integer':'@integer',
    //随机布尔值
    'boolean':'@boolean'
    //其它：@title、@cword(min,max)、@image、@cfirst、@clast、@url、@ip、@region、@county
})
console.log(data)

结果：

DPD列表：

type	method
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	capitalize, upper, lower, pick, shuffle
Miscellaneous	guid, id

Mock（EasyMock）练习网站