springboot vue介面測試定義編輯功能的實現

基於springboot+vue 的測試平臺開發

繼續更新

額，昨天還說編輯不著急做，但是我發現如果不做，那麼在做介面傳送功能的時候，我需要反覆新增新的介面來偵錯，那就先做了。

一、後端

後端要增加2個介面：根據介面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);
  }

這個查詢介面就不在路徑後面拼接引數了，剛好用作我後面功能的偵錯。

2. 更新介面

ApiDefinitionController 繼續增加編輯請求的處理方法：

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

接著在 ApiDefinitionService 裡實現：

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

先用傳進來的 id 去查詢出資料，然後更新apiDefinitionDAO.update(request, wrapper)。

二、前端

1. 實現編輯外顯

點選介面列表的【編輯】按鈕，開啟對話方塊並且顯示該介面的資料。

在介面列表的【編輯】按鈕上增加一個繫結事件的方法handleApiUpdate。

還有別忘記新增好要請求的查詢介面，後續這個步驟就不再贅述了。

在handleApiUpdate方法裡，實現外顯。

但是把介面返回的 request 賦值給頁面的時候發現了問題。因為存在著 3 個tabs，那麼我需要知道後端返回的是屬於其中的哪一種tabs。

決定加個欄位requestType：引數型別 (0：query, 1: rest，2：body)。

對應的新增介面的請求引數裡也要增加：

那麼這個欄位的值從哪裡來呢？

發現<el-tabs>元件裡是有個事件的，當點選tab時候會觸發，那麼就在這個方法裡賦值即可。

接著，我又想到了一個問題：比如我引數放在了請求體的tab中，但是又點了其他tab，最後點選了儲存，那麼這樣落庫的型別就不對了。

為了解決這個問題，我決定加個判斷：儲存的時候，會判斷當前 tab裡的值是否不為空，有值的才可以儲存，沒有的話給提示出來。

新增一個方法checkRequestNull用於檢查當前 tab 裡的值是不是空：

這裡為什麼用domains[0].key判斷? 因為預設有個空節點，不填寫的時候資料的長度也是 1，所以我改成了判斷各自的 key。

最後修改saveApi儲存介面的請求方法，在裡面加入上面的請求引數判斷，注意位置：

測試一下：

繼續開發外顯功能。

接下來還要做一件事：開啟編輯頁後，自動顯示到有資料的 tabs 頁去，比如我是請求體的引數，就自動顯示請求體 tab頁。

這裡有 2 處改動：

先看下面的，就是增加的判斷，根據介面返回的請求引數型別，然後賦值給this.activeName，就可以顯示對應的 tab再看上面的，是新增了一個欄位id，用來儲存介面返回的介面id，編輯的時候需要傳給後端介面。

測試一下外顯功能：

2. 實現介面更新

首先要修改的是對話方塊儲存按鈕，我需要通過增加一個欄位apiDefinitionDialogStatus，在點選的時候判斷是呼叫新增介面，還是編輯介面，預設是create。

這個欄位在點選【編輯】的handleApiUpdate方法裡就已經使用了，開啟對話方塊，然後賦值為update:

接著修改對話方塊的儲存按鈕的點選事件，當值等於create就呼叫saveApi()，否則就呼叫updateApi()。

實現updateApi方法，進行更新的操作。

在此之前，我要需要在請求物件裡增加一個欄位，就是介面 id，因為後端需要用 id 去查詢庫裡的這條資料。

對應的，在請求引數的處理方法裡，也需要增加id的賦值。

就是把外顯時候拿到的id賦值到請求引數體裡。

最後，在請求介面之前也需要校驗下當前 tab 下是否有引數，通過了再請求後端更新介面：

測試一下功能：

功能完成，但是還遺漏了一點，少了個重置，不然點選【建立介面】按鈕，;總是會看到上次開啟的內容。

新增一個方法resetApiForm來重置 form 裡的欄位：

用在點選【建立介面】按鈕的時候，這裡修改一下，之前是改一個對話方塊的狀態，現在都放到一個方法裡去:

在方法裡呼叫：

完成。

以上就是springboot vue介面測試定義編輯功能的實現的詳細內容，更多關於springboot vue介面編輯測試的資料請關注it145.com其它相關文章！