Rap2入门

1 写在最前面

1.1 是什么

是阿里妈妈前端团队出品，是一个接口可视化管理平台。

使用了Mock.js作为 Mock 引擎，用于前后端分离的开发模式中，根据约定接口自动生成模拟数据。

1.2 能解决什么问题

• 前端独立开发，不受后端接口开发进度的影响。
• 无需前后端联调，避免频繁沟通，减少双方时间成本。
• 支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等模拟数据，可实现真实接口请求效果。

1.3 最终目的

提升协作效率，少加班，少熬夜。

2 快速上手

2.1 登录

打开 Rap2 官方服务站点rap2.taobao.org之后进行登录，新用户需要注册。

说明：rap2 为开源项目，也可以通过下载官方源码，自行编译本地部署。rap2 源码传送门
注意：公司内部用户请使用内部服务，数据进行了定期备份，更安全，更可靠。内部地址：http://xxx.xx.xxx.108:8887/ths-rap2，地址全路径请咨询组内人员。

2.2 新建仓库

一般一个项目建立一个仓库，仓库中存放这个项目的所有接口。按照以下步骤进行操作:

操作说明：

1. 新建仓库：发起仓库新建操作。
2. 仓库名称（必填）：建议与项目名称保持一致。
3. 简介（非必填）：对仓库名称进行补充描述。
4. 成员（非必填）：被添加的成员可以获得这个仓库内接口的操作权限，一般为这个项目的前后端开发人员。
5. 团队（非必填）：被添加的团队，团队内成员可以获得这个仓库内接口的操作权限。
6. 协同仓库 ID（非必填）：在当前仓库中无法匹配到接口时，将会从协同仓库中寻找，便于大的项目按不同仓库拆分管理。

2.3 新建模块

一般仓库下可以按照功能划分出来多个模块，每个模块放对应的接口，方便接口查找。按照以下步骤进行操作:

操作说明：

1. 新建模块：发起模块新建操作。
2. 模块名称（必填）：这里的模块名称，可以按照功能划分。
3. 模块简介（非必填）：对模块名称进行补充描述。

2.4 新建接口

按照以下步骤进行操作:

操作说明：

1. 新建接口：发起接口新建操作。

2. 名称（必填）：接口文本描述。

3. 地址（必填）：接口的访问地址。

4. 类型：请求类型。

5. 请求码：http 状态码。

6. 简介：对名称的补充描述。

2.5 设置请求参数&响应结果

2.5.1 请求参数

示例数据 JSON：

{
  "token": "",
  "login_name": "",
  "code_region": "",
  "trade_code": "",
  "sync_nation": "",
  "code_land": "",
  "scflag": "",
  "longitude_d": "",
  "latitude_d": "",
  "pageSize": "",
  "pageMum": "",
  "": ""
}

按照以上操作进入接口编辑状态。

进入编辑状态后操作说明：

1. 这个区域可以设置请求头，参数传输方式。这两个都需要提前跟后端沟通好。
2. 导入：该操作可以根据提前跟后端沟通定义好的 JSON 格式对象进行参数的快速导入
   注意：也可以通过单行方式导入，具体参照下图

2.5.2 响应参数

示例数据 JSON：

{
  "data": [
    {
      "LANDNAME": "@cword(1, 3)污染地块",
      "CODE_LAND": "",
      "CODE_STAGE_NAME": "初步调查",
      "NEW_SUPERVISETIME": "@now(yyyy-MM-dd)",
      "SUPERVISENUM": "1",
      "DISTANCE": "@natural(10, 1000)",
      "LONGITUDE": "@float(109,120)",
      "LATITUDE": "@float(20,30)",
      "TRADENAME": "采矿业",
      "REGIONNAME": "白云区",
      "SYNC_NATION": "",
      "FAVOURITE_ID": "",
      "CODE_STAGE": "SURVEP",
      "SEEMINFO_ID": "6f2b8060- 34a1-446f-8f80-a771df3e1a20"
    }
  ]
}

注意：所有设置完成后，记得点击右上角的保存，不然接口设置不生效。

操作说明：

1. 导入：该操作可以根据提前跟后端沟通定义好的 JSON 格式对象进行参数的快速导入
   注意：也可以通过单行方式导入。

2.6 接口访问地址

注意：由于演示地址为 post 请求，必须在程序中或 Postman 等工具发起请求，这里只是为了获取到地址。

地址说明：

1. 基础地址：对应生成环境中的项目服务地址。

2. 接口地址：接口相对地址，定义时建议和实际接口保持一致，这样只需修改基础地址即可切换生产环境。

   到此为止，一个可以在程序中访问的模拟接口已经完成了。

3 补充

看到这里，大家肯定有疑问，模拟随机数据怎么模拟的呢？上边一些截图中带@符号的是什么啊？我模拟数据是个列表，现在才生成一条啊。

下面为大家讲解下，两个比较重要的东西：生成规则和初始值。

生成规则和初始值这两个是配合着使用的，也可以单独设置一个。在文章刚开始，讲到 rap2 使用了Mock.js作为 Mock 引擎,所以这两个的设置是遵循 Mock.js 语法规范的。

比如快速上手部分例子，我们要让列表生成 10 条数据，如何设置呢？我们只需要把生成规则列设置成 10 就行了。

我是如何知道这个设置 10 可以生成 10 条数呢？查看 Mockjs 官方文档示例。传送门

再比如我们还想设置地块列表中地块名称为 xxx 污染地块，每一条都不一样，那就需要像上边截图中那样设置初始值了。@cword(1, 3)污染地块。[传送门](<http://mockjs.com/examples.html#Random.cword( pool?, min?, max? )>)

Mockjs 示例文档与 Rap2 设置对应关系说明（有其他模拟数据需求，都可以查看Mockjs给出的示例）: