良许Linux教程网 干货合集 讲解一下 前端:Mockjs

讲解一下 前端:Mockjs

mock.js 是一款模拟数据生成器,帮助前端人员独立于后端进行开发,帮助编写单元测试, 前后端合作期间,后端人员需给到需开发的接口名称、返回的数据格式,前端人员根据这些数据格式,编写mock,可直接用于开发,编写页面交互。

Mockjs 的语法规范包括两部分:数据模板定义规范和数据占位符定义规范。

前端之Mockjs前端之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-max.dmin-dmax': num
生成一个浮点数,整数部分介于 min 和 max 之间,小数保留 dmin 到 dmax 位。num 用来指定类型。

//使用
'num1|1-10.1-2': 1
运行结果:生成 1-10 之间的带有 1到 2 位小数的浮点数。如:2.1、3.12 等

'num2|5.1-2': 1
生成一个整数部分为 5 ,保留 1 到 2 位小数的浮点数。如:5.1、5.33、5.09 等

'num3|5.2': 1
生成整数为 5 ,保留两位小数的浮点数。如:5.11、5.67 等

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",
生成中文名

注意:

用@来标识后边的字符串是标识符。

占位符引用的都是 mock.Random 中的方法。

如果需要扩展自定义占位符,可使用 Mock.Random.extend()。

占位符也可以引用 “数据模板” 中的内容。

占位符优先引用数据模板中的属性。

支持相对和绝对路径。

Mock.mock('@string("number", 5)')
生成一个五位数的字符串

Mock.mock('@color')
生成随机的颜色
//等同于
Random.color()

三、使用举例

创建一个 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' //生成中文名
   }]
  };
 }
}
]

占位符引用的都是 Mock.random 内的方法,所以我们可以把上述代码更改为:

'list|10-20': [{
name:Random.cname() //生成中文名
}]

此时我们再查阅的时候,就发现生成的数组内,名字都是一模一样的。如果我们想生成不一样的姓名,该如何解决呢?

解决办法:把属性值更改为函数,将函数的返回值作为最终结果。

'list|10-20': [{
name:()=>{
 Random.cname()
}  
}]

以上就是良许教程网为各位朋友分享的Linu系统相关内容。想要了解更多Linux相关知识记得关注公众号“良许Linux”,或扫描下方二维码进行关注,更多干货等着你 !

137e00002230ad9f26e78-265x300
本文由 良许Linux教程网 发布,可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。
良许

作者: 良许

良许,世界500强企业Linux开发工程师,公众号【良许Linux】的作者,全网拥有超30W粉丝。个人标签:创业者,CSDN学院讲师,副业达人,流量玩家,摄影爱好者。
上一篇
下一篇

发表评论

联系我们

联系我们

公众号:良许Linux

在线咨询: QQ交谈

邮箱: yychuyu@163.com

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部
关注公众号
【良许Linux】
回复1024
获取 
99G Linux
从菜鸡到大神
VIP资源课程
关注公众号
【良许Linux】
回复1024
获取 
99G Linux
从菜鸡到大神
VIP资源课程