rap2使用姿势——前端、后端、测试必看（多gif图）

背景

rap2作为一款阿里妈妈开源的http接口管理工具，被大家广泛使用。诚然，这款工具确实存在一些bug，但是在市面上主流的开源http接口管理工具当中，不失为一款优秀的工具。它的许多特性,包括团队管理、接口仓库、插件、mock数据、postman导出等，可以使我们很方便的管理接口文档以及有效地提高前后端协作的效率。

概念 / 词汇

• 仓库：即接口文档放置的仓库，可以包含多个接口文档
• 协同仓库：Mock服务协同仓库，在当前仓库中无法匹配到接口时，将会从协同仓库中寻找
• 团队：团队可包含多个仓库，用户可加入多个团队
• 插件：用于实现生成Mock数据、拦截真实I/O请求以Mock数据替换等功能的插件
• 平台API：以开放API形式将接口文档、Mock数据等内容，提供给外部调用
• Mock模板：Mock.js规则模板，用于生成Mock数据，模板中可定义丰富的规则以适应数据的按需随机性
• Mock数据：通过Mock模板生成的最终Mock数据

功能介绍

首页

在上图中，左边是你所属仓库的所有修改历史。让背锅有迹可循。右边则分别列出的是你拥有的仓库和加入的仓库。在这里你可以通过点击蓝字跳转到相应的仓库、模块、接口。

仓库

在这里分别可以查看自己所属的仓库和所有的仓库。相比于自己加入的仓库，对于自己拥有（创建）的仓库，除了可以拥有编辑功能之外，你还可以删除它。

编辑仓库

创建仓库

团队

通过团队功能可以很方便地进行成员管理与权限控制。

接口

这里主要是一些外部接口。通过这些接口可以导出接口文档数据以及用于前端mock数据。关于mock方法，稍后会在使用场景中介绍。

状态

通过这个页面，我们可以看到整个系统的使用概览。

接口管理(重点)

在进入一个仓库之后，我们会看到如下界面：

这里要注意的是，如果我们是要编辑接口的基本信息，比如url、类型、状态码，就点击左边的铅笔（编辑按钮）。在这里url一定要用相对路径；如果要修改接口的请求和响应信息，则点击右边的绿色编辑按钮。点击预览，可以展示或者隐藏接口的请求或者响应模板以及数据。下面我们来演示如何创建一个通过email获取学生详情的接口。该接口使用GET方法，url是/api/v1/students?email=,响应则是json:

{
	"name": "秀兰",
	"age": 12,
	"city": "深圳",
	"province": "广东",
	"avatar": "http://dummyimage.com/200x100/4A7BF7&text=Hello123123",
	"intro": "我是一个来自深圳的朋友"
}
复制代码

接着修改请求和响应模板： rap2支持新建和导入两种方式，我们先来看看新建请求参数。

这里需要注意的是，对于GET方法默认使用Query Params;而对于POST方法则默认使用Body Params。当然在某些情况下，一些接口会通过header传递一些参数。我建议大家最好是遵循http规范来选择参数类型。 再来看看通过导入的方式，完成响应模板的制作。

对于后端人员来说，如果通过某些http客户端工具(如postman)进行接口调试，使用这种方式无疑是最省力的一种。

---

看到这里好像大功告成了。这东西这么简单还要你来告诉我？ too simple,sometimes naive. 如果仅仅止步于此，rap2只是实现了接口管理的工作，对于前后端协作的效率提升并没有到最大化。对于前端开发者而言，他们还是需要手动构造假数据。这样既繁琐、易出错以及数据覆盖范围窄。因此rap2结合了mockjs，提供了mock数据的功能。只要在参数上设置好生成规则和初始值，便可以生成大量的符合规则的随机数据。前端开发者只需要将整个仓库对应的mockjs插件导出，然后引用到自己的项目当中，就可以完完全全地摆脱后端人员愉快地开发了。具体使用场景将会在下节中给出，在本节当中，将会初步演示mock效果。

在上图中，姓名、年龄、省、市甚至头像都可以mock。这样就可以在开发的时候发现诸如文本过长导致ui错乱的bug，而不需要苦苦哀求后端爸爸造数据了。

mock模板语法:github.com/nuysoft/Moc…

mockjs官网模板示例：mockjs.com/examples.ht…

使用场景

在这里例举三个场景，分别对应后端、前端与测试人员。

后端

对于后端开发来说，主要负责模块的划分以及接口文档的编写。至于仓库管理以及mock模板规则，具体由谁负责可能需要前后端协商。

前端

现在通过一个demo来演示前端如何结合rap2快速实现mock数据的功能。

1. 通过vue-cli初始化一个项目 rap2-vue-demo
2. 安装axios和mockjs；

   npm intsall axios --save
   npm intsall mockjs --save
   复制代码

3. 导出rap2仓库模板

这里可能是rap2的bug，直接用浏览器打开会乱码。用控制台的Preview功能粘贴可以解决这个问题。

4. 在src目录下建立文件夹mock;mock文件夹下新建index.js、mock-template.js。代码如下:

   // src/mock/index.js
   const Mock = require('mockjs');
   require('./mock-template');
   window.Mock = Mock;
   
   (function(RAP, Mock) {
     for (let repositoryId in RAP.interfaces) {
   	for (let itf of RAP.interfaces[repositoryId]) {
   	  Mock.mock(itf.url, itf.method.toLowerCase(), settings => {
   		console.log(`Mock ${itf.method} ${itf.url} =>`, itf.response);
   		return Mock.mock(itf.response);
   	  });
   	}
     }
   })(window.RAP, window.Mock);
   复制代码

   // src/mock/mock-template.js
   (function() {
     let repositoryId = 42;
     let interfaces = [{...}] // 省略
     let RAP = window.RAP || {
   	protocol: 'http',
   	host: 'rapapi.tool.wezhuiyi.com',
   	interfaces: {}
     };
     RAP.interfaces[repositoryId] = interfaces;
     window.RAP = RAP;
   })();
   复制代码

原理其实就是将rap2仓库当中对应的mock模板导出，然后将它作为参数赋值给Mock对象，来完成Mock对象的构造。在这个demo当中是简单粗暴地将mock模板代码复制到src/mock/mock-template.js当中。个人认为最好的做法应该是远程引入rap2插件的js，这样接口如果有变动的话，前端无需任何改动。

5. 在main.js中引入mockjs,以及将axios写入Vue对象原型

   import Mock from './mock';
   import axios from 'axios';
   
   Vue.config.productionTip = false;
   Vue.prototype.$http = axios;
   ...
   复制代码

6. 组件中使用

   mounted() {
       this.$http.get("/api/v1/students").then(res => {
       console.log(res.data);
       this.student = res.data;
       });
   },   
   复制代码

7. 效果演示

测试

对于测试人员来说，使用rap2可以通过“导出Postman Collection”功能，将仓库的所有接口一键导入至postman。然后基于此快速构建接口层面的自动化测试。具体实践方法可以参考这篇文章：juejin.im/post/5c763a…