mock和RAP入门教程

在很早以前公司里面就接入了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种生成规则

  1. 'name|min-max':value
  2. 'name|count':value
  3. 'name|min-max.dmin-dmax':value
  4. 'name|+step':value
  5. 'name|min-max.dcount':value
  6. 'name|count.dmin-dmax':value
  7. 'name|count.dcount':value

• 生成规则的含义依赖属性值的类型才能确认，这一点特别重要。也是mock的关键所在。
  比如：

  • 'name|min-max':string: 通过重复[min,max]次string生成新字符串。
  • 'name|min-max':number: 生成一个number，返回在[min,max]。

属性值

1. 属性值可含@（占位符）
2. 指定最终的值和类型
3. 属性值类型
   • 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.jpg

怎么在rap中是使用mock

有很多资料，且是图文并茂写博文^[4][5]。总结起来，在rap中运用mock方法如下：

• 左边变量写 name|rule，此处相当于就是mock中的'name|rule';
• 右边备注写 @mock=value。其语法规则mock一样。

参考

---

1. https://github.com/nuysoft/Mock/wiki ↩

2. http://mockjs.com/examples.html ↩

3. https://github.com/thx/RAP/wiki/ ↩

4. http://www.imooc.com/article/17588 ↩

5. http://blog.sina.com.cn/s/blog_c00ccc680102x0ue.html ↩