react and mockjs

1.使用2.语法2.1.基础模板2.1.1.字符串2.1.2.数字(整数型和浮点型)2.1.3.布尔2.1.4.对象2.1.5.数组2.1.6.RegExp:正则匹配（不会）2.1.7.Path 2.2.占位符2.2.1.基础2.2.1.1.数字(整数型和浮点型)2.2.1.2.布尔2.2.1.3.字符2.2.1.4.字符串2.2.1.5.日期2.2.1.6.数组 2.2.2.高级2.2.2.1.图片2.2.2.1.颜色2.2.2.1.文本2.2.2.1.姓名2.2.2.1.网址2.2.2.1.区域2.2.2.1.工具2.2.2.1.身份证

1.使用

官网

# 安装 npm install mockjs /** 引入 */ import Mock from 'mockjs'; /** 设置随机的接口响应时间，10-2500毫秒 */ Mock.setup({ timeout: '10-25' }); /** 拦截地址 */ const baseUrl = 'http://localhost:3066'; /** mock接口响应数据 */ Mock.mock(baseUrl + '/todayList', 'get', { visitInfo: { 'todayNum|200-410': 0, 'comparedWithYesterday|1-3.2': 0, 'comparedWithLastWeek|0-1.2': 0 } });

2.语法

2.1.基础模板

2.1.1.字符串

'name|min-max': string : 随机min-max个string

Mock.mock({ "string|1-10": "★" })

'name|count': string : 指定数量string

Mock.mock({ "string|3": "★★★" })

'name|count': stringArray : 从stringArray选随机count个

Mock.mock({ "string|1": ["★","★★","★★★"] })

2.1.2.数字(整数型和浮点型)

'name|+1': number : 自动加 1，初始值为 number

Mock.mock({ "number|+1": 202 })

'name|min-max': number : 随机min-max一个数

Mock.mock({ "number|1-100": 100 })

'name|min-max.dmin-dmax': number : 随机min-max一个数,小数位随机dmin-dmax位

Mock.mock({ "number|1-100.1-10": 1 }) Result → "number": 50.4538484828 Mock.mock({ "number|123.1-10": 1 }) Result → "number": 123.39 Mock.mock({ "number|123.3": 1 }) Result → "number": 123.357 Mock.mock({ "number|123.10": 1.123 }) Result → "number": 123.1238805533

2.1.3.布尔

'name|1': boolean : 随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2

Mock.mock({ "boolean|1": true })

'name|min-max': boolean : 随机生成一个布尔值，值为 value 的概率是 min / (min + max)

Mock.mock({ "boolean|1-2": true })

2.1.4.对象

'name|count': object : 从属性值 object 中随机选取 count 个属性

Mock.mock({ "object|2": { "310000": "上海市", "320000": "江苏省", "330000": "浙江省", "340000": "安徽省" } }) Result → "object": { "330000": "浙江省", "340000": "安徽省" }

'name|min-max': object : 从属性值 object 中随机选取 min 到 max 个属性

Mock.mock({ "object|2-4": { "110000": "北京市", "120000": "天津市", "130000": "河北省", "140000": "山西省" } })

2.1.5.数组

'name|1': array : 从数组中拿一个

Mock.mock({ "array|1": [ "AMD", "CMD", "UMD" ] }) Result → "array": "UMD"

'name|+1': array : 按数组顺序每次拿出一个元素

Mock.mock({ "array|+1": [ "AMD", "CMD", "UMD" ] }) Result → "array": "AMD" Mock.mock({ "array|1-10": [ { "name|+1": [ "Hello", "Mock.js", "!" ] } ] }) Result → "array": [ { "name": "Hello" }, { "name": "Mock.js" }, { "name": "!" }, { "name": "Hello" }, { "name": "Mock.js" }, { "name": "!" }, { "name": "Hello" }, { "name": "Mock.js" } ]

'name|min-max': array : 通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max

Mock.mock({ "array|1-10": [ "Mock.js" ] }) Result → "array": [ "Mock.js", "Mock.js" ] Mock.mock({ "array|1-10": [ "Hello", "Mock.js", "!" ] }) Result → "array": [ "Hello", "Mock.js", "!" ]

'name|count': array : 重复属性值 array 生成一个新数组，重复次数为 count

Mock.mock({ "array|3": [ "Mock.js" ] }) Result → "array": [ "Mock.js", "Mock.js", "Mock.js" ] Mock.mock({ "array|3": [ "Hello", "Mock.js", "!" ] }) Result → "array": [ "Hello", "Mock.js", "!", "Hello", "Mock.js", "!", "Hello", "Mock.js", "!" ]

2.1.6.RegExp:正则匹配（不会）

'name': regexp

Mock.mock({ 'regexp': /[a-z][A-Z][0-9]/ }) Result → "regexp": "wK0" Mock.mock({ 'regexp': /\w\W\s\S\d\D/ }) Result → "regexp": "N/\t20*" Mock.mock({ 'regexp': /\d{5,10}/ }) Result → "regexp": "561177057" Mock.mock({ 'regexp|3': /\d{5,10}\-/ }) Result → "regexp": "180466-603765-532802171-" Mock.mock({ 'regexp|1-5': /\d{5,10}\-/ }) Result → "regexp": "55825634-7332860925-8015051-05020153-87646-"

2.1.7.Path

Absolute Path : 模拟路径（更不懂）

Mock.mock({ "foo": "Hello", "nested": { "a": { "b": { "c": "Mock.js" } } }, "absolutePath": "@/foo @/nested/a/b/c" }) Result → { "foo": "Hello", "nested": { "a": { "b": { "c": "Mock.js" } } }, "absolutePath": "Hello Mock.js" }

Relative Path : 还是路径（还是不懂）

Mock.mock({ "foo": "Hello", "nested": { "a": { "b": { "c": "Mock.js" } } }, "relativePath": { "a": { "b": { "c": "@../../../foo @../../../nested/a/b/c" } } } }) Result → { "foo": "Hello", "nested": { "a": { "b": { "c": "Mock.js" } } }, "relativePath": { "a": { "b": { "c": "Hello Mock.js" } } } }

2.2.占位符

2.2.1.基础

2.2.1.1.数字(整数型和浮点型)

Random.natural( min?, max? ) : 随机生成一个自然数，自然数，就是大于等于0的

// Random.natural() Random.natural() Mock.mock('@natural') Mock.mock('@natural()') // Random.natural( min ) Random.natural(10000) Mock.mock('@natural(10000)') // Random.natural( min, max ) Random.natural(60, 100) Mock.mock('@natural(60, 100)')

Random.integer( min?, max? ) : 随机min-max范围小数

// Random.integer() Random.integer() Mock.mock('@integer') Mock.mock('@integer()') // Random.integer( min ) Random.integer(10000) Mock.mock('@integer(10000)') // Random.integer( min, max ) Random.integer(60, 100) Mock.mock('@integer(60, 100)')

Random.float( min?, max?, dmin?, dmax? ) : 随机min-max范围，小数点位数dmin-dmax

// Random.float() Random.float() Mock.mock('@float') Mock.mock('@float()') // Random.float( min ) Random.float(0) Mock.mock('@float(0)') // Random.float( min, max ) Random.float(60, 100) Mock.mock('@float(60, 100)') // Random.float( min, max, dmin ) Random.float(60, 100, 3) Mock.mock('@float(60, 100, 3)') // Random.float( min, max, dmin, dmax ) Random.float(60, 100, 3, 5) Mock.mock('@float(60, 100, 3, 5)')

2.2.1.2.布尔

Random.boolean( min?, max?, current? ) : current项生成概率为min/(min+max)

// Random.boolean() Random.boolean() Mock.mock('@boolean') Mock.mock('@boolean()') // Random.boolean( min, max, current ) Random.boolean(1, 9, true) Mock.mock('@boolean(1, 9, true)')

2.2.1.3.字符

Random.character( pool? ) : 按照pool生成字符（pool选填）

// Random.character() Random.character() Mock.mock('@character') Mock.mock('@character()') // Random.character( 'lower/upper/number/symbol' ) Random.character('lower') Random.character('upper') Random.character('number') Random.character('symbol') Mock.mock('@character("lower")') Mock.mock('@character("upper")') Mock.mock('@character("number")') Mock.mock('@character("symbol")') // Random.character( pool ) Random.character('aeiou') Mock.mock('@character("aeiou")')

2.2.1.4.字符串

Random.string( pool?, min?, max? ) ： 按照pool规则随机 min-max长度字符串

//随机模拟字符串 Random.string() Mock.mock('@string') Mock.mock('@string()') // Random.string( length ) 随机长度位length的字符串 Random.string(5) Mock.mock('@string(5)') // Random.string( pool, length ) 按照pool规则随机长度位length的字符串 Random.string('lower', 5) Random.string('upper', 5) Random.string('number', 5) Random.string('symbol', 5) Random.string('aeiou', 5) Mock.mock('@string("lower", 5)') Mock.mock('@string("upper", 5)') Mock.mock('@string("number", 5)') Mock.mock('@string("symbol", 5)') Mock.mock('@string("aeiou", 5)') Result → "hfuqa" "RNNOJ" "58377" "%[%%$" "eeuoo" // Random.string( min, max ) 随机长度min - max的字符串 Random.string(7, 10) Mock.mock('@string(7, 10)') // Random.string( pool, min, max ) 按照pool规则随机长度min - max的字符串 Random.string('lower', 1, 3) Random.string('upper', 1, 3) Random.string('number', 1, 3) Random.string('symbol', 1, 3) Random.string('aeiou', 1, 3) Mock.mock('@string("lower", 1, 3)') Mock.mock('@string("upper", 1, 3)') Mock.mock('@string("number", 1, 3)') Mock.mock('@string("symbol", 1, 3)') Mock.mock('@string("aeiou", 1, 3)') // Random.string( pool, min, max ) 按照pool规则随机长度min - max的字符串 Random.string('lower', 1, 3) Random.string('upper', 1, 3) Random.string('number', 1, 3) Random.string('symbol', 1, 3) Random.string('aeiou', 1, 3) Mock.mock('@string("lower", 1, 3)') Mock.mock('@string("upper", 1, 3)') Mock.mock('@string("number", 1, 3)') Mock.mock('@string("symbol", 1, 3)') Mock.mock('@string("aeiou", 1, 3)') Result → "jx" "JWL" "40" "@&" "e"

2.2.1.5.日期

Random.date( format? ) : 按照format生成日期

// Random.date() Random.date() Mock.mock('@date') Mock.mock('@date()') // Random.date( format ) Random.date('yyyy-MM-dd') Random.date('yy-MM-dd') Random.date('y-MM-dd') Random.date('y-M-d') Mock.mock('@date("yyyy-MM-dd")') Mock.mock('@date("yy-MM-dd")') Mock.mock('@date("y-MM-dd")') Mock.mock('@date("y-M-d")') Mock.mock('@date("yyyy yy y MM M dd d")')

Random.time( format? ) : 按照format生成时间

// Random.time() Random.time() Mock.mock('@time') Mock.mock('@time()') // Random.time( format ) Random.time('A HH:mm:ss') Random.time('a HH:mm:ss') Random.time('HH:mm:ss') Random.time('H:m:s') Mock.mock('@time("A HH:mm:ss")') Mock.mock('@time("a HH:mm:ss")') Mock.mock('@time("HH:mm:ss")') Mock.mock('@time("H:m:s")') Mock.mock('@datetime("HH H hh h mm m ss s SS S A a T")')

Random.datetime( format? ) : 按照format生成日期加时间

// Random.datetime() Random.datetime() Mock.mock('@datetime') Mock.mock('@datetime()') // Random.datetime( format ) Random.datetime('yyyy-MM-dd A HH:mm:ss') Random.datetime('yy-MM-dd a HH:mm:ss') Random.datetime('y-MM-dd HH:mm:ss') Random.datetime('y-M-d H:m:s') Mock.mock('@datetime("yyyy-MM-dd A HH:mm:ss")') Mock.mock('@datetime("yy-MM-dd a HH:mm:ss")') Mock.mock('@datetime("y-MM-dd HH:mm:ss")') Mock.mock('@datetime("y-M-d H:m:s")') Mock.mock('@datetime("yyyy yy y MM M dd d HH H hh h mm m ss s SS S A a T")')

Random.now( unit?, format? ) : 按照format生成当前时间的指定unit信息

// Ranndom.now() Random.now() Mock.mock('@now') Mock.mock('@now()') // Ranndom.now( unit ) Random.now('year') Random.now('month') Random.now('week') Random.now('day') Random.now('hour') Random.now('minute') Random.now('second') // Ranndom.now( format ) Random.now('yyyy-MM-dd HH:mm:ss SS') // Ranndom.now( unit, format ) Random.now('day', 'yyyy-MM-dd HH:mm:ss SS')

2.2.1.6.数组

Random.range(start?, stop, step?) : 返回一个整型数组

start,可选，数组起始值，闭区间stop,必选，数据结束值，开区间step,可选，数据每一项间隔值 // Random.range( stop ) Random.range(10) Mock.mock('@range(10)') Result → [0,1,2,3,4,5,6,7,8,9] // Random.range( start, stop ) Random.range(3, 7) Mock.mock('@range(3, 7)') Result → [3,4,5,6] // Random.range( start, stop, step ) Random.range(1, 10, 2) Mock.mock('@range(1, 10, 2)') Result → [1,3,5,7,9] Random.range(1, 10, 3) Mock.mock('@range(1, 10, 3)') Result → [1,4,7]

2.2.2.高级

2.2.2.1.图片

Random.image( size?, background?, foreground?, format?, text? )

size 图片宽高，格式是’宽x高’background:图片的背景色，默认值#000000foreground：图片的文字前景色，默认#FFFFFFformat：图片的格式，默认’.png’text:图片上的默认文字，默认值为参数size

其中size的取值范围是

[ '300x250', '250x250', '240x400', '336x280', '180x150', '720x300', '468x60', '234x60', '88x31', '120x90', '120x60', '120x240', '125x125', '728x90', '160x600', '120x600', '300x600' ]

图片的格式可以选择.png .gif .jpg

// Random.image() Random.image() // Random.image( size ) Random.image('200x100') // Random.image( size, background ) Random.image('200x100', '#FF6600') // Random.image( size, background, text ) Random.image('200x100', '#4A7BF7', 'Hello') // Random.image( size, background, foreground, text ) Random.image('200x100', '#50B347', '#FFF', 'Mock.js') // Random.image( size, background, foreground, format, text ) Random.image('200x100', '#894FC4', '#FFF', 'png', '!')

Random.dataImage( size?, text? ) : 同上

// Random.dataImage() Random.dataImage() // Random.dataImage( size ) Random.dataImage('200x100') // Random.dataImage( size, text ) Random.dataImage('200x100', 'Hello Mock.js!')

2.2.2.1.颜色

Random.color() : 格式:#rrggbb

Random.hex() : 好像和color没什么不同

Random.rgb() : 生成格式如 rgb(133,233,244)

Random.rgba() : 生成个事如 rgba(111,222,233,0.5)

Random.hsl() : 生成格式 hsl(345,82,71)

// Random.color() Random.color() Mock.mock('@color') Mock.mock('@color()') // Random.hex() Random.hex() Mock.mock('@hex') Mock.mock('@hex()') // Random.rgb() Random.rgb() Mock.mock('@rgb') Mock.mock('@rgb()') // Random.rgba() Random.rgba() Mock.mock('@rgba') Mock.mock('@rgba()') // Random.hsl() Random.hsl() Mock.mock('@hsl') Mock.mock('@hsl()')

2.2.2.1.文本

Random.paragraph(min?,max?) : 随机生成一段文本

// Random.paragraph() Random.paragraph() Mock.mock('@paragraph') Mock.mock('@paragraph()') // Random.paragraph( len ) Random.paragraph(2) Mock.mock('@paragraph(2)') // Random.paragraph( min, max ) Random.paragraph(1, 3) Mock.mock('@paragraph(1, 3)')

Random.sentence(min?,max?) : 随机生成一个句子，第一个单词的首字母大写

// Random.sentence() Random.sentence() Mock.mock('@sentence') Mock.mock('@sentence()') // Random.sentence( len ) Random.sentence(5) Mock.mock('@sentence(5)') // Random.sentence( min, max ) Random.sentence(3, 5) Mock.mock('@sentence(3, 5)')

Random.word(min?,max?) : 随机生成一个单词

// Random.word() Random.word() Mock.mock('@word') Mock.mock('@word()') // Random.word( len ) Random.word(5) Mock.mock('@word(5)') // Random.word( min, max ) Random.word(3, 5) Mock.mock('@word(3, 5)')

Random.title(min?,max?) : 随机生成一段标题，每个单词的首字母大写

// Random.title() Random.title() Mock.mock('@title') Mock.mock('@title()') // Random.title( len ) Random.title(5) Mock.mock('@title(5)') // Random.title( min, max ) Random.title(3, 5) Mock.mock('@title(3, 5)')

中文版同上：

Random.cparagraph : 返回中文文本

Random.csentence : 返回中文句子

Random.cword : 返回中文文字

Random.ctitle : 返回中文标题

2.2.2.1.姓名

Random.first() : 随机生成常见英文名

// Random.first() Random.first() Mock.mock('@first') Mock.mock('@first()')

Random.last() : 随机生成常见英文姓

// Random.last() Random.last() Mock.mock('@last') Mock.mock('@last()') Result → "Martin" "Smith" "Gonzalez"

Random.name() : 随机生成常见英文姓名

// Random.name() Random.name() Mock.mock('@name') Mock.mock('@name()') Result → 默认两个字 "Brenda Harris" "Michael Walker" "Donald Brown" // Random.name( middle ) Random.name(true) Mock.mock('@name(true)') Result → 三个字 "Kevin Jose Robinson" "Scott Betty Hernandez"

中文版同上：（名字没有几个字的设置，随机）

Random.cfirst() : 随机生成常见中文姓

Random.clast() : 随机生成常见中文名

Random.cname() : 随机生成一个常见中文姓名

2.2.2.1.网址

Random.url(protocol?,host?) : 随机生成一个url

protocol可选参数，表示网络协议，如http。host表示域名和端口号 Random.url() Mock.mock('@url') Mock.mock('@url()')

Random.protocol() : 随机生成一个域名

// Random.protocol() Random.protocol() Mock.mock('@protocol') Mock.mock('@protocol()')

Random.domain() : 随机生成一个域名

// Random.domain() Random.domain() Mock.mock('@domain') Mock.mock('@domain()')

Random.tld() : 随机生成一个顶级域名

// Random.tld() Random.tld() Mock.mock('@tld') Mock.mock('@tld()')

Random.email(domain?) : 随机生成一个email地址，domain表示域名

// Random.email() Random.email() Mock.mock('@email') Mock.mock('@email()')

Random.ip() : 随机生成一个ip地址

// Random.ip() Random.ip() Mock.mock('@ip') Mock.mock('@ip()')

2.2.2.1.区域

Random.region() : 随机生成一个中国的大区，如华北，西南

Random.region() Mock.mock('@region') Mock.mock('@region()') Result → "西南" "华北" "东北"

Random.province() : 随机生成一个中国省直辖市自治区特别行政区

Random.province() Mock.mock('@province') Mock.mock('@province()') Result → "河北省" "澳门特别行政区" "台湾"

Random.city(prefix?) : 随机生成一个中国城市，prefix布尔值，表示是否标注所在省

// Random.city() Random.city() Mock.mock('@city') Mock.mock('@city()') // Random.city( prefix ) Random.city(true) Mock.mock('@city(true)') Result → // Random.city() "花莲县" "晋城市" "天津市" // Random.city( prefix ) "台湾 台南市" "西藏自治区 山南地区"

Random.county(prefix?) : 随机生成一个中国县，prefix布尔值，表示是否显示所属的省市

// Random.county() Random.county() Mock.mock('@county') Mock.mock('@county()') // Random.county( prefix ) Random.county(true) Mock.mock('@county(true)') Result → // Random.county() "深水埗区" "白沙乡" "泸县" // Random.county( prefix ) "江西省 宜春市 宜丰县" "台湾 基隆市 暖暖区"

Random.zip() : 随机生成一个六位数邮政编码

Random.zip() Mock.mock('@zip') Mock.mock('@zip()') Result → "824713" "361015" "131881"

2.2.2.1.工具

Random.capitlize(word) : 把第一个字母转成大写

Random.capitalize('hello') Mock.mock('@capitalize("hello")') Result → "Hello" "Hello"

Random.upper(str) : 转成大写

Random.upper('hello') Mock.mock('@upper("hello")') Result → "HELLO" "HELLO"

Random.lower(str) : 转成小写

Random.lower('HELLO') Mock.mock('@lower("HELLO")') Result → "hello" "hello"

Random.pick(arr) : 从数组中随机选取一个元素

Random.pick(['a', 'e', 'i', 'o', 'u']) Mock.mock('@pick(["a", "e", "i", "o", "u"])') Result → "e" "u"

Random.shuffle(arr) : 打乱数组的顺序并返回

Random.shuffle(['a', 'e', 'i', 'o', 'u']) Mock.mock('@shuffle(["a", "e", "i", "o", "u"])') Result → ["i","e","o","u","a"] ["o","a","e","i","u"]

2.2.2.1.身份证

Random.guid() : 随机生成一个GUID

Random.guid() Mock.mock('@guid') Mock.mock('@guid()')

Random.id() : 随机生成一个18位身份证id

Random.id() Mock.mock('@id') Mock.mock('@id()')

Random.increment( step? ) : 不知道干啥的，自己领悟吧

// Random.increment() Random.increment() Mock.mock('@increment') Mock.mock('@increment()') // Random.increment( step ) Random.increment(100) Mock.mock('@increment(100)') Random.increment(1000) Mock.mock('@increment(1000)') Result → // Random.increment() 1 2 3 // Random.increment( step ) 103 203 1203 2203