mock.js语法规范，使用规则

最新推荐文章于 2024-09-09 09:23:47 发布

习惯是一种病

最新推荐文章于 2024-09-09 09:23:47 发布

阅读量1.4k

点赞数 3

分类专栏： mock.js 文章标签： javascript mock.js vue.js 随机数据前端后端分离

本文链接：https://blog.csdn.net/qq_37568942/article/details/111193826

版权

mock.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

mock.js语法规范，使用规则

一、Mock.js 的语法规范包括两部分：

  1. 数据模板定义规范（Data Template Definition，DTD）
  2. 数据占位符定义规范（Data Placeholder Definition，DPD）

二、数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：

  // 属性名   name
  // 生成规则 rule
  // 属性值   value
  'name|rule': value

四、@占位符
1.’@cname’ 随机生成中文
2.’@guid’ 全局唯一标识符如：586C12FA-26ba-4bdA-bDd9-52eD4E6807dF
3.’@name’ 随机生成英文
4.’@datetime’ 随机生成日期时间
5.’@natural(1, 800)'随机生成1-800的数字

五、示例
	1. data常用结构，字符串和占位符

	'data|1-5': [{//data 是数组，随机生成数组，length为1-5（含），前面的为min,后面的为max（下面所有规则都符合）
	      //1. 属性值是字符串 String
	      'string|1-10': 'string',//通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。
	      //2. 数据占位符定义规范 DPD
	      'cname':'@cname',//随机中文名称
	      "guid":  "@guid",//全局唯一标识符 
	      'name':'@name',//随机英文名称
	      "datetime": "@datetime",//随机生成日期时间
	      "num":  "@natural(1, 100)",//随机生成1-100的数字
      }]
      
	生成后
	data:[
		{
			string:'stringstring',
			cname:'蒋娟',
			guid:'586C12FA-26ba-4bdA-bDd9-52eD4E6807dF',
			name:'Ronald Johnson',
			datetime:'2014-11-10 19:54:21',
			num:23
		}
	]

2. 属性值是数字 Number

 	  'num1|+1':1,//属性值自动加 1，初始值为 number。
      'num2|1-10':1,//生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。
      'num3|1-10.2-4':1,// 'name|min-max.dmin-dmax': value，生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位。
      'num4|1-10.2':1,//生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 2位。
      'num5|2':1,//生成固定number 2
      
   生成后
		num1: 2
		num2: 7
		num3: 8.896
		num4: 4.07
		num5: 2

3. 属性值是布尔型 Boolean

	  'bool1|1': true,//随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。
      'bool2|1-4': true,//随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / (min + max)。
      
      生成后
      	bool1: false
		bool2: false

4. 属性值是对象 Object

//5. 属性值是对象 Object
      'obj1|2': {name:'@cname','age':1,id: '@guid'},//从属性值 object 中随机选取 count 个属性。
      'obj2|1-3': {name:'@cname','age':1,id: '@guid'},//从属性值 object 中随机选取 min 到 max 个属性。
      
      生成后
      	obj1:{
      		id: "Deffc335-d85e-8176-F3e5-FaBffB99df42"
			name: "杨霞"
      	},
      	obj2:{
      		age: 1
			id: "4d2DcdbE-50d4-fE46-39AB-FE4bdBc3DabB"
      	}

5. 属性值是数组 Array

	  'array1|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师'],//从属性值 array 中随机选取 1 个元素，作为最终值。
      'array2|+1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师'],//从属性值 array 中顺序选取 1 个元素，作为最终值。
      'array3|1-3': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师'],//通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。
      'array4|2': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师'],//大于1时，通过重复属性值 array 生成一个新数组，重复次数为 count。
     
      生成后
      	array1: "前端工程师",
		array2: "需求工程师",
		array3: [
			"前端工程师"
			"后端工程师"
			"UI工程师"
			"需求工程师"
			"前端工程师"
			"后端工程师"
			"UI工程师"
			"需求工程师"
		],
		array4: [
			"前端工程师",
			"后端工程师",
			"UI工程师",
			"需求工程师",
			"前端工程师",
			"后端工程师",
			"UI工程师",
			"需求工程师"
			]

6. 属性值是正则表达式 RegExp,根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。

	  'regexp1': /[a-z][A-Z][0-9]/,
      'regexp2': /\w\W\s\S\d\D/,
      'regexp3': /\d{5,10}/,
      
      生成后
      	regexp1: "uO6"
		regexp2: "T[K9^"
		regexp3: "256462548"