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

时间 2019-11-06

标签 rap2 rap 使用前端后端测试 gif 栏目 HTML 繁體版

原文原文链接

背景

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

概念 / 词汇

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

功能介绍

首页

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

仓库

在这里分别能够查看本身所属的仓库和全部的仓库。相比于本身加入的仓库，对于本身拥有（建立）的仓库，除了能够拥有编辑功能以外，你还能够删除它。

编辑仓库

建立仓库

团队

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

接口

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

状态

经过这个页面，咱们能够看到整个系统的使用概览。ios

接口管理(重点)

在进入一个仓库以后，咱们会看到以下界面：git

这里要注意的是，若是咱们是要编辑接口的基本信息，好比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效果。github

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

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

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

使用场景

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

后端

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

前端

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

经过vue-cli初始化一个项目 rap2-vue-demo

安装axios和mockjs；

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

导出rap2仓库模板

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

在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，这样接口若是有变更的话，前端无需任何改动。

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

import Mock from './mock';
import axios from 'axios';

Vue.config.productionTip = false;
Vue.prototype.$http = axios;
...
复制代码

组件中使用

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

效果演示

测试

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