springboot vue接口測試前後端樹節點編輯刪除功能

Posted on by

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

繼續更新。

一、編輯功能

1. 編輯頁外顯

點擊樹節點的編輯按鈕，打開對話框，展示原有的節點名稱。

本來樹形控件裡沒有自帶的編輯操作，我直接加瞭一個按鈕在上面，綁定點擊事件調用edit(data)方法。

為瞭確認 data 可用，我在edit方法中打印瞭一下 data 的內容，是有我需要的字段的:

id 可以傳給後端接口用於查詢表裡的數據，name 可以直接用來外顯。

接下來編輯頁面點擊【保存按鈕】的時候，調用的是 handleNodeUpdate 方法，通常需要傳當前節點的 id 用於後端查詢數據；傳入輸入的 name，用於節點名稱的更新。

2. 實現後端接口

請求實體類

package com.pingguo.bloomtest.controller.request;
import lombok.Getter;
import lombok.Setter;
@Getter
@Setter
public class EditNodeRequest {
    private Long id;
    private String name;
}

controller

@PostMapping("/rename")
  public Result rename(@RequestBody EditNodeRequest request) {
      try {
          apiModuleService.renameNode(request);
          return Result.success();
      } catch (Exception e) {
          return Result.fail(e.toString());
      }
  }

service

public void renameNode(EditNodeRequest request) {
        // 根據傳入的id查詢出數據
        ApiModule apiModule = apiModuleDAO.selectById(request.getId());
        // 更新對象屬性值，保存
        apiModule.setId(request.getId());
        apiModule.setName(request.getName());
        apiModule.setUpdateTime(new Date());
        apiModuleDAO.updateById(apiModule);
    }

3. 前後聯調

完成 handleNodeUpdate 方法：

主要是進行接口的調用以及相關其他處理。

4. 測試

測試修改這個節點：

點擊編輯按鈕後成功外顯。

重命名為修改後名稱，點擊保存按鈕。

功能正常。

二、刪除功能

刪除功能實現比較簡單，前端把當前要刪除節點id傳給後端，後端刪除此id以及所有子節點的數據即可。

1. 後端接口

controller

@GetMapping("/delete/{id}")
  public Result deleteNode(@PathVariable Long id) {
      try {
          int result = apiModuleService.deleteNode(id);
          return Result.success(result);
      } catch (Exception e) {
          return Result.fail(e.toString());
      }
  }

service

public int deleteNode(Long id) {
      QueryWrapper<ApiModule> wrapper = new QueryWrapper<>();
      wrapper.eq("id", id)
             .or()
             .eq("parentId", id);
      return apiModuleDAO.delete(wrapper);
  }

註意這裡多條件默認情況下是and()，這裡需要使用or()。

2. 前端實現

增加一個接口：

頁面裡的刪除按鈕，綁定一個方法remove(data)，data 裡可以獲取到節點的 id，這個已經在上面編輯功能裡證實過瞭。

直接調用刪除接口，完成後再刷新一下樹。

3. 測試

刪除掉這個節點。

刪除成功。

不過後續這裡還會有細節需要優化，比如確認彈框、頂層節點不可刪除、節點下的所有資源(API和Case)邏輯刪除等等。

以上就是springboot vue接口測試前後端樹節點編輯刪除功能的詳細內容，接下來講進行到接口定義核心功能的開發：接口列表、新增、調試等等，更多關於springboot vue樹節點編輯刪除的資料請關註WalkonNet其它相關文章！

推薦閱讀：