Mock.Js学习报告

2021_12_26 Mock.Js学习报告

from GXC

Mock.Js背景简介：

		Mock.Js是一种模拟前后端Ajax数据交互的数据方法结构
		在我们进行前端页面开发时，可能会又面临到项目需求中
		的功能需要与后台进行数据交换得到数据进行相应数据显示
		及数据页面交互，但是当时后端的接口还未实现，无法调取
		时，我们可以通过安装Mock.Js实现对于前后端数据交互的
		简单模拟。

这只是我对于Mock.Js的一点简单的理解，想要深入了解其深层原理的大神可移步其官方文档

Mock.Js官方文档

实际安装与操作

1. Mock.Js的安装

	// npm 安装方式
	npm || cnpm install mockjs
	// yarn 安装方式
	yarn add mockjs

2. axios的安装

	// npm 安装方式
	npm || cnpm install axios
	// yarn 安装方式
	yarn add axios

3. Mock.js模拟数据文件的创建
   在项目目录中创建Mock.js文件

	// 使用 Mock.Js
	import Mock from 'mockjs'
	export default Mock.mock('/mock(自定义mock数据连接地址，后续axios数据调用会用到','get(数据获取方式)',{
		// 自定义数据名称
		data:[
			//自定义字段名: Mock字段规则 (请参考下文规则)
		]
	})

4. Mock.js项目的使用

	// 引入Mock文件
	import '/mock (自定义mock是数据链接地址)' 
	// 引入axios
	import axios from 'axios'
	// 在componentDidMount中使用Mock数据
	componentDidMount(){
		axios.get('/mock',{需要传值时写在		这}).then(res => {
			//数据获取后的操作
		}
	}

数据规则（有点多，偷懒了，借用了别人整理的( 后面有注明原作者 ) ）

常用的数据类型

一、生成boolean
@boolean

二、生成数字
1.自然数(>=0整数)
@natural
@natural(min,max)

2.整数
@integer
@integer(min,max)

3.小数
@float
@float(min,max,dmin,dmax)
dmin：小数部分位数最小值
dmax：小数部分位数最大值

4.整数整组
@range(min,max)
@range(min,max,step)
​ step：递增的步长

@range(10)
// => [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
@range(3, 7)
// => [3, 4, 5, 6]
@range(1, 10, 2)
// => [1, 3, 5, 7, 9]
@range(1, 10, 3)
// => [1, 4, 7]
三、生成文本
1.单个字符
@character
@character(‘lower/upper/number/symbol’)
@character(pool)

如果传入了 'lower' 或 'upper'、'number'、'symbol'，表示从内置的字符池中选取一个字符：
{
lower: “abcdefghijklmnopqrstuvwxyz”,
upper: “ABCDEFGHIJKLMNOPQRSTUVWXYZ”,
number: “0123456789”,
symbol: “!@#$%^&*()[]”
}
2.字符串
@string
@string(length)
@string(min,max)

3.英文单词
@word
@word(length)
@word(min,max)

4.英文句子
@sentence
@sentence(len)
@sentence(min,max)

5.英文段落
@paragraph
@paragraph(len)
@paragraph(min,max)

6.中文汉字
@cword
@cword(pool)
@cword(len)
@cword(pool,len)
@cword(min,max)
@cword(pool,min,max)

@cword()
// => “干”
@cword(‘零一二三四五六七八九十’)
// => “六”
@cword(3)
// => “别金提”
@cword(‘零一二三四五六七八九十’, 3)
// => ““七七七””
@cword(5, 7)
// => “设过证全争听”
@cword(‘零一二三四五六七八九十’, 5, 7)
// => “九七七零四”
7.中文句子
@csentence
@csentence(len)
@csentence(min,max)

8.中文段落
@cparagraph
@cparagraph(len)
@cparagraph(min,max)

9.中文标题
@ctitle
@ctitle(len)
@ctitle(min,max)

四、生成名字
1.英文名
@first——名
@last——姓
@name——姓名
@name(middle)
​ middle：是否生成中间名字

@name()
// => “Larry Wilson”
@name(true)
// => “Helen Carol Martinez”
2.中文名
@cfirst——姓
@clast——名
@cname——姓名

五、网站
1.生成一个IP
@ip

2.生成一个Email
@email
@email(domain)
​ domain：指定域名

@email()
// => “x.davis@jackson.edu”
@email(‘nuysoft.com’)
// => “h.pqpneix@nuysoft.com”
3.生成域名
@domain

4.生成URL
@url
@url(protocol,host)
​ protocol：指定协议，例如HTTP
​ host：指定域名

@url()
// => “mid://axmg.bg/bhyq”
@url(‘http’)
// => “http://splap.yu/qxzkyoubp”
@url(‘http’, ‘nuysoft.com’)
// => “http://nuysoft.com/ewacecjhe”
六、生成时间
1.基本用法
@date
@time
@datetime

2.格式化时间
可以通过 format 参数设置时间的格式

@date(format)
@time(format)
@datetime(format)
Format Description Example
yyyy A full numeric representation of a year, 4 digits 1999 or 2003
yy A two digit representation of a year 99 or 03
y A two digit representation of a year 99 or 03
MM Numeric representation of a month, with leading zeros 01 to 12
M Numeric representation of a month, without leading zeros 1 to 12
dd Day of the month, 2 digits with leading zeros 01 to 31
d Day of the month without leading zeros 1 to 31
HH 24-hour format of an hour with leading zeros 00 to 23
H 24-hour format of an hour without leading zeros 0 to 23
hh 12-hour format of an hour without leading zeros 1 to 12
h 12-hour format of an hour with leading zeros 01 to 12
mm Minutes, with leading zeros 00 to 59
m Minutes, without leading zeros 0 to 59
ss Seconds, with leading zeros 00 to 59
s Seconds, without leading zeros 0 to 59
SS Milliseconds, with leading zeros 000 to 999
S Milliseconds, without leading zeros 0 to 999
A Uppercase Ante meridiem and Post meridiem AM or PM
a Lowercase Ante meridiem and Post meridiem am or pm
T Milliseconds, since 1970-1-1 00:00:00 UTC 759883437303

七、生成地址
1.生成中国大区
@region

@region()
// => “华北”
2.生成省份
@province

3.生成城市
@city
@city(prefix)
​ prefix：布尔值，是否生成所属的省

@city()
// => “唐山市”
@city(true)
// => “福建省 漳州市”
4.生成县
@county
@county(prefix)
​ prefix：布尔值，是否生成所属省、市

@county()
// => “上杭县”
@county(true)
// => “甘肃省 白银市 会宁县”
八、生成邮政编码
@zip

九、编号
1.身份证
@ID

@id()
// => “420000200710091854”
2.GUID
@guid

@guid()
// => “662C63B4-FD43-66F4-3328-C54E3FF0D56E”
十、生成图片
1.图片URL
@image()
@image( size )
@image( size, background )
@image( size, background, text )
@image( size, background, foreground, text )
@image( size, background, foreground, format, text )
​ size：尺寸，格式为：‘宽x高’
​ background：背景色，格式为：#FFFFFF
​ text：图片上显示的文本
​ foreground：广本颜色
​ format：图片格式，可选值包括：png、gif、jpg。

@image()
// => “http://dummyimage.com/125x125”
@image(‘200x100’)
// => “http://dummyimage.com/200x100”
@image(‘200x100’, ‘#fb0a2a’)
// => “http://dummyimage.com/200x100/fb0a2a”
@image(‘200x100’, ‘#02adea’, ‘Hello’)
// => “http://dummyimage.com/200x100/02adea&text=Hello”
@image(‘200x100’, ‘#00405d’, ‘#FFF’, ‘Mock.js’)
// => “http://dummyimage.com/200x100/00405d/FFF&text=Mock.js”
@image(‘200x100’, ‘#ffcc33’, ‘#FFF’, ‘png’, ‘!’)
// => “http://dummyimage.com/200x100/ffcc33/FFF.png&text=!”
2.Base64图片编码
@dataImage
@dataImage(size)
@dataImage(size,text)

十一、生成颜色
@color
@hex
@rgb
@rgba
@hsl

参照官网实例即可： http://mockjs.com/examples.html

拓展：
{‘name|3′:’lz’} 此为模板数据格式

    属性名name、  生成规则： 重复属性自3次 ，   属性值：lz

‘name | min-max’: string 通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max
‘name | count’: string 通过重复 string 生成一个字符串，重复次数等于 count
‘name | min-max’: number 生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。
‘name | +1’: number 属性值自动加 1，初始值为 number
‘name | min-max.dmin-dmax’: number 生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位。
‘name | 1’: boolean 随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2
属性值是对象：var obj={‘host’:’www.baidu’,’port’:’12345′,’node’:’selector’}
‘name | count’: object 从属性值 object 中随机选取 count个属性。
‘name | min-max’: object 从属性值 object 中随机选取 min 到 max 个属性
属性值是数组：var array=[‘momo’,’yanzi’,’ziwei’]
‘name|1’: array 从属性值 array 中随机选取 1 个元素，作为最终值
‘name|+1’: array 从属性值 array 中顺序选取 1 个元素，作为最终值。
‘name|count’: array 通过重复属性值 array 生成一个新数组，重复次数为 count。
‘name|min-max’: array 通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max
————————————————
版权声明：本文为CSDN博主「重名8080」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_55560445/article/details/114420050