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

2022-05-26 18:01:24

基於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()。