在很早以前公司里面就接入了rap在线管理接口文档平台,通过图形化书写接口文档,给前端同事使用。但是之前也仅仅是用于写接口文档,从来没有研究过它还有其他用途。最近与自己合作的一个前端同事说,你为啥不利用好rap来写接口文档,它会自动生成mock数据,我们就不用将rap默认生成的数据修改后,再本地测试一下。弄完之后再与你们联调。今儿就花了2个小时左右研究一下rap,顺藤摸瓜出来mock。下面简单介绍一下,mock以及如何在rap中使用mock,生成比较好的模拟数据,提高前后端协作效率。
mock.js[1]
mock.js
随机生成数据,让前端开发人员在开发阶段时独立于后端,使用mockjs可以自测代码。
语法规范
- 数据模板定义规范(DTD:Data Template Definition)
- 数据占位符规范(DPD: Data Placeholder definition)
数据模板定义规范
格式
'name|rule':value
(属性名|生成规则:属性值),其中生成规则是可选的
生成规则
-
7种生成规则
'name|min-max':value
'name|count':value
'name|min-max.dmin-dmax':value
'name|+step':value
'name|min-max.dcount':value
'name|count.dmin-dmax':value
'name|count.dcount':value
-
生成规则的含义依赖属性值的类型才能确认,这一点特别重要。也是mock的关键所在。
比如:-
'name|min-max':string
: 通过重复[min,max]次string生成新字符串。 -
'name|min-max':number
: 生成一个number,返回在[min,max]。
-
属性值
- 属性值可含@(占位符)
- 指定最终的值和类型
- 属性值类型
- String
- Number
- Boolean
- Object
- Array
- Function
- RegExp
- Path
学过js看着十分简单,只是多了RegExp 和 Path,其他简直一模一样。
数据占位符定义规范DPD
占位符
1.占位符只是在属性字符串中占个位置,并不出现在最终的属性值中
2.格式:@占位符或者@占位符(参数[,参数])
3.占位符
- 用@标识后面的字符串是占位符
- 引用的是
Mock.Random
中的方法 - 扩展定义占位符:
Mock.Random.extend()
- 引用数据模板中的属性
- 支持相对路径和绝对路径
4.数据占位符类型
数据占位符一共有如下几种类型:
- Basic
- Date
- Image
- Color
- Text
- Name
- Web
- Address
- Helper
- Miscellaneous
具体mock语法示例,请参考mock示例[2],里面详细的介绍了各个类型使用方法。
rap写接口文档中运用mock[3]
什么是rap
RAP是前后端沟通桥梁的通信接口,是一个图形化的接口文档管理的软件。它可以自动生成mock数据,在开发时候前端同事可以不依赖于后端的数据,而是根据mock规则自动生成的模拟数据进行测试。
怎么在rap中是使用mock
有很多资料,且是图文并茂写博文[4][5]。总结起来,在rap中运用mock方法如下:
- 左边变量写
name|rule
,此处相当于就是mock中的'name|rule'
; - 右边备注写
@mock=value
。其语法规则mock一样。