基于springboot+vue 的測試平臺(tái)開發(fā)

繼續(xù)更新

額，昨天還說編輯不著急做，但是我發(fā)現(xiàn)如果不做，那么在做接口發(fā)送功能的時(shí)候，我需要反復(fù)新增新的接口來調(diào)試，那就先做了。

一、后端

后端要增加2個(gè)接口：根據(jù)接口ID查詢、更新接口。

1. 查詢接口

@GetMapping("/getApi")
  public Result getApiById(Long id) {
      return Result.success(apiDefinitionService.getApi(id));
  }

mybatis-plus 有直接使用id查詢的方法可用selectById：

public ApiDefinition getApi(Long id) {
      return apiDefinitionDAO.selectById(id);
  }

這個(gè)查詢接口就不在路徑后面拼接參數(shù)了，剛好用作我后面功能的調(diào)試。

2. 更新接口

ApiDefinitionController 繼續(xù)增加編輯請(qǐng)求的處理方法：

@PostMapping("/update")
  public Result update(@RequestBody ApiDefinition request) {
      try {
          apiDefinitionService.update(request);
          return Result.success();
      } catch (Exception e) {
          return Result.fail(e.toString());
      }
  }

接著在 ApiDefinitionService 里實(shí)現(xiàn)：

public void update(ApiDefinition request) {
      QueryWrapper<ApiDefinition> wrapper = new QueryWrapper<>();
      wrapper.eq("id", request.getId());
      request.setUpdateTime(new Date());
      apiDefinitionDAO.update(request, wrapper);
  }

先用傳進(jìn)來的 id 去查詢出數(shù)據(jù)，然后更新apiDefinitionDAO.update(request, wrapper)。

二、前端

1. 實(shí)現(xiàn)編輯外顯

點(diǎn)擊接口列表的【編輯】按鈕，打開對(duì)話框并且顯示該接口的數(shù)據(jù)。

在接口列表的【編輯】按鈕上增加一個(gè)綁定事件的方法handleApiUpdate。

還有別忘記添加好要請(qǐng)求的查詢接口，后續(xù)這個(gè)步驟就不再贅述了。

在handleApiUpdate方法里，實(shí)現(xiàn)外顯。

但是把接口返回的 request 賦值給頁面的時(shí)候發(fā)現(xiàn)了問題。因?yàn)榇嬖谥?3 個(gè)tabs，那么我需要知道后端返回的是屬于其中的哪一種tabs。

決定加個(gè)字段requestType：參數(shù)類型 (0：query, 1: rest，2：body)。

對(duì)應(yīng)的新增接口的請(qǐng)求參數(shù)里也要增加：

那么這個(gè)字段的值從哪里來呢？

發(fā)現(xiàn)<el-tabs>組件里是有個(gè)事件的，當(dāng)點(diǎn)擊tab時(shí)候會(huì)觸發(fā)，那么就在這個(gè)方法里賦值即可。

接著，我又想到了一個(gè)問題：比如我參數(shù)放在了請(qǐng)求體的tab中，但是又點(diǎn)了其他tab，最后點(diǎn)擊了保存，那么這樣落庫的類型就不對(duì)了。

為了解決這個(gè)問題，我決定加個(gè)判斷：保存的時(shí)候，會(huì)判斷當(dāng)前 tab里的值是否不為空，有值的才可以保存，沒有的話給提示出來。

新增一個(gè)方法checkRequestNull用于檢查當(dāng)前 tab 里的值是不是空：

這里為什么用domains[0].key判斷? 因?yàn)槟J(rèn)有個(gè)空節(jié)點(diǎn)，不填寫的時(shí)候數(shù)據(jù)的長度也是 1，所以我改成了判斷各自的 key。

最后修改saveApi保存接口的請(qǐng)求方法，在里面加入上面的請(qǐng)求參數(shù)判斷，注意位置：

測試一下：

繼續(xù)開發(fā)外顯功能。

接下來還要做一件事：打開編輯頁后，自動(dòng)顯示到有數(shù)據(jù)的 tabs 頁去，比如我是請(qǐng)求體的參數(shù)，就自動(dòng)顯示請(qǐng)求體 tab頁。

這里有 2 處改動(dòng)：

先看下面的，就是增加的判斷，根據(jù)接口返回的請(qǐng)求參數(shù)類型，然后賦值給this.activeName，就可以顯示對(duì)應(yīng)的 tab再看上面的，是新增了一個(gè)字段id，用來保存接口返回的接口id，編輯的時(shí)候需要傳給后端接口。

測試一下外顯功能：

2. 實(shí)現(xiàn)接口更新

首先要修改的是對(duì)話框保存按鈕，我需要通過增加一個(gè)字段apiDefinitionDialogStatus，在點(diǎn)擊的時(shí)候判斷是調(diào)用新增接口，還是編輯接口，默認(rèn)是create。

這個(gè)字段在點(diǎn)擊【編輯】的handleApiUpdate方法里就已經(jīng)使用了，打開對(duì)話框，然后賦值為update:

接著修改對(duì)話框的保存按鈕的點(diǎn)擊事件，當(dāng)值等于create就調(diào)用saveApi()，否則就調(diào)用updateApi()。

實(shí)現(xiàn)updateApi方法，進(jìn)行更新的操作。

在此之前，我要需要在請(qǐng)求對(duì)象里增加一個(gè)字段，就是接口 id，因?yàn)楹蠖诵枰?id 去查詢庫里的這條數(shù)據(jù)。

對(duì)應(yīng)的，在請(qǐng)求參數(shù)的處理方法里，也需要增加id的賦值。

就是把外顯時(shí)候拿到的id賦值到請(qǐng)求參數(shù)體里。

最后，在請(qǐng)求接口之前也需要校驗(yàn)下當(dāng)前 tab 下是否有參數(shù)，通過了再請(qǐng)求后端更新接口：

測試一下功能：

功能完成，但是還遺漏了一點(diǎn)，少了個(gè)重置，不然點(diǎn)擊【創(chuàng)建接口】按鈕，;總是會(huì)看到上次打開的內(nèi)容。

新增一個(gè)方法resetApiForm來重置 form 里的字段：

用在點(diǎn)擊【創(chuàng)建接口】按鈕的時(shí)候，這里修改一下，之前是改一個(gè)對(duì)話框的狀態(tài)，現(xiàn)在都放到一個(gè)方法里去:

在方法里調(diào)用：

完成。

以上就是springboot vue接口測試定義編輯功能的實(shí)現(xiàn)的詳細(xì)內(nèi)容，更多關(guān)于springboot vue接口編輯測試的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論