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

繼續(xù)更新。

一、編輯功能

1. 編輯頁外顯

點(diǎn)擊樹節(jié)點(diǎn)的編輯按鈕，打開對話框，展示原有的節(jié)點(diǎn)名稱。

本來樹形控件里沒有自帶的編輯操作，我直接加了一個(gè)按鈕在上面，綁定點(diǎn)擊事件調(diào)用edit(data)方法。

為了確認(rèn) data 可用，我在edit方法中打印了一下 data 的內(nèi)容，是有我需要的字段的:

id 可以傳給后端接口用于查詢表里的數(shù)據(jù)，name 可以直接用來外顯。

接下來編輯頁面點(diǎn)擊【保存按鈕】的時(shí)候，調(diào)用的是 handleNodeUpdate 方法，通常需要傳當(dāng)前節(jié)點(diǎn)的 id 用于后端查詢數(shù)據(jù)；傳入輸入的 name，用于節(jié)點(diǎn)名稱的更新。

2. 實(shí)現(xiàn)后端接口

請求實(shí)體類

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) {
        // 根據(jù)傳入的id查詢出數(shù)據(jù)
        ApiModule apiModule = apiModuleDAO.selectById(request.getId());
        // 更新對象屬性值，保存
        apiModule.setId(request.getId());
        apiModule.setName(request.getName());
        apiModule.setUpdateTime(new Date());
        apiModuleDAO.updateById(apiModule);
    }

3. 前后聯(lián)調(diào)

完成 handleNodeUpdate 方法：

主要是進(jìn)行接口的調(diào)用以及相關(guān)其他處理。

4. 測試

測試修改這個(gè)節(jié)點(diǎn)：

點(diǎn)擊編輯按鈕后成功外顯。

重命名為修改后名稱，點(diǎn)擊保存按鈕。

功能正常。

二、刪除功能

刪除功能實(shí)現(xiàn)比較簡單，前端把當(dāng)前要?jiǎng)h除節(jié)點(diǎn)id傳給后端，后端刪除此id以及所有子節(jié)點(diǎn)的數(shù)據(jù)即可。

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);
  }

注意這里多條件默認(rèn)情況下是and()，這里需要使用or()。

2. 前端實(shí)現(xiàn)

增加一個(gè)接口：

頁面里的刪除按鈕，綁定一個(gè)方法remove(data)，data 里可以獲取到節(jié)點(diǎn)的 id，這個(gè)已經(jīng)在上面編輯功能里證實(shí)過了。

直接調(diào)用刪除接口，完成后再刷新一下樹。

3. 測試

刪除掉這個(gè)節(jié)點(diǎn)。

刪除成功。

不過后續(xù)這里還會(huì)有細(xì)節(jié)需要優(yōu)化，比如確認(rèn)彈框、頂層節(jié)點(diǎn)不可刪除、節(jié)點(diǎn)下的所有資源(API和Case)邏輯刪除等等。

以上就是springboot vue接口測試前后端樹節(jié)點(diǎn)編輯刪除功能的詳細(xì)內(nèi)容，接下來講進(jìn)行到接口定義核心功能的開發(fā)：接口列表、新增、調(diào)試等等，更多關(guān)于springboot vue樹節(jié)點(diǎn)編輯刪除的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論