玩转 Mockjs,前端也能跑的很溜
时间:2021-12-13 作者:web-learn
mockjs作用就是,生成随机模拟数据,拦截 ajax 请求,可以对数据进行增删改查。在生成数据时,我们就需要能够熟练使用 域名 的语法。
Mockjs 的语法规范包括两部分:数据模板定义规范和数据占位符定义规范。
一、数据模板定义规范
数据模板中的每个属性组成有:属性名、生成规则、属性值。
使用语法为:
"name|rule": value
值得注意的有:
- 属性名和生成规则之间使用 | 分割。
- 生成规则是可选参数。
- 生成规则有 7 种形式。
- 生成规则含义需要依赖于属性值的类型。
- 属性值可以指定初始值和类型。
生成规则的格式分别有:
1.1、属性值是类型 String
变量的重复次数是一个随机值。
\'name|min-max\':string 通过生成一个 string 重复 min 到 max 之间的一个字符串。。 //使用 \'name|1-3\':\'a\' 运行结果:生成一个 a 的个数为 1-3 之间的字符串变量。可能的结果有:a、aa 、aaa
直接指定重复次数。
\'name|count\':string 通过生成一个 string 重复 count 次的一个字符串。。 //使用 \'name|3\':\'a\' 运行结果:aaa
1.2、属性值是 Number
生成不断累加的数字。
\'name|+1\':num 初始值为 num ,生成的属性值自动加 1
生成一个区间数值。
\'name|min-max\':num 生成一个 min 到 max 之间的数值,num 用来指定类型 //使用 \'name|1-3\': 1 运行结果:生成一个 1-3 之间的数字。可能的结果有:1、2、3
生成带有小数点的数字。
\'name|min-域名-dmax\': num 生成一个浮点数,整数部分介于 min 和 max 之间,小数保留 dmin 到 dmax 位。num 用来指定类型。 //使用 \'num1|1-10.1-2\': 1 运行结果:生成 1-10 之间的带有 1到 2 位小数的浮点数。如:2.1、域名 等 \'num2|5.1-2\': 1 生成一个整数部分为 5 ,保留 1 到 2 位小数的浮点数。如:5.1、域名、域名 等 \'num3|5.2\': 1 生成整数为 5 ,保留两位小数的浮点数。如:域名、域名 等
1.3、属性值是 Boolean
\'name|1\': boolean 生成一个随机值,真 假 概率都是一半。 //使用 \'isLike|1\': true 生成 isLike 的值可能为 true 、false。概率是一样的。 点击并拖拽以移动 \'name|min-max\': value 随机生成一个布尔值, 值为 value 的概率是 min / (min + max), 值为 !value 的概率是 max / (min + max)。 //使用 \'like|1-5\': true 生成 true 的 概率为 1/6 。生成 false 的概率为 5/6
1.4、属性值是对象 Object
生成一个指定属性个数的对象。
\'obj|num\': object 从属性值 object 中,随机选取 num 个属性。 //使用 \'obj|2\': { a: \'1\', b: \'2\', c: \'3\' } 运行结果可能为: {a: "3", b: "2"} {c: "3", b: "2"} {a: "3", c: "2"}
生成一个属性个数随机的对象。
\'obj|min-max\': object 从 object 中 随机选取 min 到 max 个属性,生成一个对象。 //使用 \'obj|1-2\': { a: \'1\', b: \'2\', c: \'3\' } 运行结果可能为: {a: "3"} {b: "3"} {c: "3"} {a: "3", b: "2"} {c: "3", b: "2"} {a: "3", c: "2"}
1.5、属性值是数组 Array
取数组中某个元素作为结果。
\'arr|1\':array 从属性值 array 中随机选取 1 个元素作为结果返回 //使用 \'arr|1\':[1,2,3] 运行结果为:1、2、3 三种结果
生成新数组。
\'arr|min-max\': array 通过重复 array 的元素生成新数组,重复次数 min 到 max 。 //使用 \'arr|1-2\': [ 1,2,3 ] 运行结果为:[ 1,2,3 ] 或 [ 1,2,3,1,2,3 ] 点击并拖拽以移动 \'arr|num\': array 通过重复 array 的元素生成新数组,重复次数 num 次 。 //使用 \'arr|2\': [ 1,2,3 ] 运行结果为: [ 1,2,3,1,2,3 ]
1.6、属性值是函数 Function
\'name\':function function 返回值作为最终的属性值。 //使用 \'name\': ()=>{ return \'web learn\' } 运行结果为 web learn
在数据占位符中,属性值是函数有重要的意义。待会会重点解释。
1.7、属性值是正则 RegExp
\'name\': regexp 根据正则表达式 regexp 反向生成可以匹配的字符串。用于生成自定义格式的字符串 //使用 \'reg\': /[a-zA-Z0-9]2/ 生成大小写字母和数字任意组成的长度为 2 的字符串 \'reg\':/\d{5,10}/ 生成任意的 5 到 10 位的数字字符串
二、数据占位符定义规范
数据占位符只是在属性字符串中占个位置,并不会出现在最终的属性值中。
使用格式:
@占位符 @占位符(参数 [, 参数]) //使用 \'name\': "@name", 生成英文名,如:Edward Rodriguez //带有参数 \'first\':"@name(middle)", 生成带有中间名的英文名 。如:Ruth Paul Robinson \'name\': "@cname", 生成中文名
注意:
- 用 @ 来标识后边的字符串是标识符。
- 占位符引用的都是 域名om 中的方法。
- 如果需要扩展自定义占位符,可使用 域名nd()。
- 占位符也可以引用 “数据模板” 中的内容。
- 占位符优先引用数据模板中的属性。
- 支持相对和绝对路径。
域名(\'@string("number", 5)\') 生成一个五位数的字符串 域名(\'@color\') 生成随机的颜色 //等同于 域名r()
三、使用举例
创建一个 api 接口,返回一个随机生成的数组:
export default [ { url: "/api/list", method: "post", response: ({ url, body }) => { // body 是post方法时传入的数据 // url 是请求接口,get方法时,也包含传递的参数 return { code: 200, message: "ok", //生成一个数组 // 长度介于 10 到 20 之间 \'list|10-20\': [{ name:\'@cname\' //生成中文名 }] }; } } ]
占位符引用的都是 域名om 内的方法,所以我们可以把上述代码更改为:
\'list|10-20\': [{ name:域名e() //生成中文名 }]
此时我们再查阅的时候,就发现生成的数组内,名字都是一模一样的。如果我们想生成不一样的姓名,该如何解决呢?
解决办法:把属性值更改为函数,将函数的返回值作为最终结果。
\'list|10-20\': [{ name:()=>{ 域名e() } }]
好了小编今天的文章就到此结束了,喜欢我的可以点个关注哦!