前后端协同开发神器--接口管理工具RAP使用入门

我会带着你远行 2022-05-18 03:52 1462阅读 0赞

## RAP是什么 ##

前后端协同开发其实就是个对接接口的过程，双方把接口定义好就可以各自开始coding了，谁也不用等谁，开发完了再一起联调。[RAP][]是阿里内部使用的一个WEB接口管理工具，完全满足企业级的API管理应用，除了定义接口形成文档约定，还有MOCK数据的功能，最重要的是已经开源。

## RAP能做什么 ##

![这里写图片描述][70]  
从官网给出的这张图，RAP可以做的不止是接口文档，但[用户手册][Link 1]里面提到后端自测和校验工具Page Tester并不成熟，其实我根本没有找到这个功能，[ISSUE][]里面有人问也没有回答。关于自动化测试，用户手册里面也说功能不成熟。所以RAP自带可用的功能，目前看就只有：

*  制定接口
 *  MOCK数据

## 如何使用RAP ##

对接口文档安全有要求且有条件的团体或个人，可以自己部署一个私有的RAP服务器，部署说明[参考文档][Link 2]。

如果只是自己开发些DEMO，为了方便前端MOCK数据，可以使用官方维护的服务[rapapi.org][]。注册过程很简单，只要有个邮箱就可以注册。成功登录后就来到主页了：  
![这里写图片描述][70 1]

> 友情提醒：  
> 我在rapapi.org首页上通过团队TAB看到了其他用户定义的团队和接口文档，所以你写的接口其他人应该也可以看到。

## 文档管理 ##

RAP上支持对接口按照 `团队`、`业务线`、`分组` 三个层级管理。通过顶部导航栏“团队”TAB可以进行创建和切换。

下面我结合一个简单表格查询的例子说明开发时如何使用RAP编写接口和MOCK前端数据。

## 编写接口文档 ##

![这里写图片描述][70 2]  
可以看到同一个分组中还可以根据不同的模块，不同的页面管理接口文档。GUI操作界面使用方法简单清晰，我就不介绍怎么写文档了，参考[用户手册][Link 1]。这里我定义了一个列表分页查询的API，按照接口文档定义我编写了下面的前端代码

<div class="middle-content clearfix">
          <el-table :data="list" highlight-current-row style="width: 100%;" border>
            <el-table-column prop="accont" label="账号" min-width="120">
            </el-table-column>
            <el-table-column prop="productName" label="商品名称" min-width="120">
            </el-table-column>
            <el-table-column prop="orderNo" label="订单号" min-width="120">
            </el-table-column>
            <el-table-column prop="payPeriod" label="分期总数" min-width="140" :formatter="formatPeriod" sortable>
            </el-table-column>
            <el-table-column prop="fee" label="费用" min-width="120" :formatter="formatFee">
            </el-table-column>
            <el-table-column prop="other3" label="本期交易金额" min-width="140">
            </el-table-column>
            <el-table-column prop="other4" label="已还本金" min-width="120">
            </el-table-column>
          </el-table>
    
          
          <el-col :span="24" class="toolbar bottom-toolbar">
            <el-pagination
              layout="sizes, prev, pager, next, jumper"
              v-if="total > pageSize"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              :total="total"
              style="float:right;">
            </el-pagination>
          </el-col>
        </div>

//JS部分
    export default {
      name: 'normal-table',
      data() {
        return {
          list:[],
          pageSize: 10,
          total: 400,
        };
      },
      created() {
        this.fetchData();
      },
      methods: {
        formatPeriod(row) {
          return `总期数：${row.payPeriod}期`;
        },
        formatFee(row) {
          return `￥${row.fee}`;
        },
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
          this.currentPage = val;
          console.log(`当前页: ${val}`);
        },
        async fetchData() {
          const result = await fetch(`http://XXX/normal-talbe/query.json`,
            {
              method: 'get',
              headers: {
                'Content-Type': 'application/json'
              },
              body: {
    
              }
            });
          if (result) {
            this.list = result.list;
            this.total = result.total;
          }
        },
      }

## 前端MOCK数据 ##

### 在接口文档上定义MOCK规则 ###

可以直接在RAP的接口文档上，通过[mock.js][]的语法规则定义MOCK数据。我对表格查询接口定义如下MOCK规则：  
![这里写图片描述][70 3]  
详细说明参考[mock.js语法规范][mock.js 1]

可以点击接口详情右侧红色的“Mock数据”按钮预览MOCK的数据格式是否和预期的一样，以进行调整。

### 如何获取RAP服务器上的MOCK数据 ###

通过ULR `http://{ {domainName}}/mockjsdata/79/rap_mockjs_rules_demo.do?` 即可获取，其中79是接口文档的projectId,可以再接口编辑页面的URL上看到  
![这里写图片描述][70 4]  
改变我的JS代码获取数据部分如下：

async fetchData() {
          const result = await fetch(`http://{ {rapdomian}}/mockjsdata/{ {myprojectId}}/normal-talbe/query.json`,
            {
              method: 'get',
              headers: {
                'Content-Type': 'application/json'
              },
              body: {
    
              }
            });
          if (result) {
            this.list = result.list;
            this.total = result.total;
          }
        }

启动项目就可以看到实际效果了：  
![这里写图片描述][70 5]

[RAP]: https://github.com/thx/RAP
[70]: /images/20220518/8cfe6adcfdaf40fb874a311ef4e3fc68.png
[Link 1]: https://github.com/thx/RAP/wiki/user_manual_cn
[ISSUE]: https://github.com/thx/RAP/issues/1032
[Link 2]: https://github.com/thx/RAP/wiki/deploy_manual_cn
[rapapi.org]: http://rapapi.org/org/index.do
[70 1]: /images/20220518/9a52318eecab4969aed684e6180746be.png
[70 2]: /images/20220518/e5865b9129394c1691361b7edb025edd.png
[mock.js]: http://mockjs.com/
[70 3]: /images/20220518/9bed714789444ef48d4207faccf99172.png
[mock.js 1]: https://github.com/nuysoft/Mock/wiki/Syntax-Specification
[70 4]: /images/20220518/04502982acfc45c99f8c3e321d2e4d38.png
[70 5]: /images/20220518/942721a3c1704ca0967decbd618dc657.png