RAP是什麼

前後端協同開發其實就是個對接介面的過程，雙方把介面定義好就可以各自開始coding了，誰也不用等誰，開發完了再一起聯調。RAP是阿里內部使用的一個WEB介面管理工具，完全滿足企業級的API管理應用，除了定義介面形成文件約定，還有MOCK資料的功能，最重要的是已經開源。

RAP能做什麼

從官網給出的這張圖，RAP可以做的不止是介面文件，但使用者手冊裡面提到後端自測和校驗工具Page Tester並不成熟，其實我根本沒有找到這個功能，ISSUE裡面有人問也沒有回答。關於自動化測試，使用者手冊裡面也說功能不成熟。所以RAP自帶可用的功能，目前看就只有：

• 制定介面
• MOCK資料

如何使用RAP

對介面文件安全有要求且有條件的團體或個人，可以自己部署一個私有的RAP伺服器，部署說明參考文件。

如果只是自己開發些DEMO，為了方便前端MOCK資料，可以使用官方維護的服務rapapi.org。註冊過程很簡單，只要有個郵箱就可以註冊。成功登入後就來到主頁了：

友情提醒：
我在rapapi.org首頁上通過團隊TAB看到了其他使用者定義的團隊和介面文件，所以你寫的介面其他人應該也可以看到。

文件管理

RAP上支援對介面按照 團隊、業務線、分組 三個層級管理。通過頂部導航欄“團隊”TAB可以進行建立和切換。

下面我結合一個簡單表格查詢的例子說明開發時如何使用RAP編寫介面和MOCK前端資料。

編寫介面文件

可以看到同一個分組中還可以根據不同的模組，不同的頁面管理介面文件。GUI操作介面使用方法簡單清晰，我就不介紹怎麼寫文件了，參考使用者手冊。這裡我定義了一個列表分頁查詢的API，按照介面文件定義我編寫了下面的前端程式碼

 <!--HTML部分-->
    <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規則：

詳細說明參考mock.js語法規範

可以點選介面詳情右側紅色的“Mock資料”按鈕預覽MOCK的資料格式是否和預期的一樣，以進行調整。

如何獲取RAP伺服器上的MOCK資料

通過ULR http://{{domainName}}/mockjsdata/79/rap_mockjs_rules_demo.do? 即可獲取，其中79是介面文件的projectId,可以再介面編輯頁面的URL上看到

改變我的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;
      }
    }

啟動專案就可以看到實際效果了：