springboot vue前後端介面測試樹結點新增功能的方法-java教程-PHP中文網

springboot vue前後端介面測試樹結點新增功能的方法

WBOY

發布： 2023-05-10 17:10:06

轉載

1163 人瀏覽過

基於springboot vue的測試平台開發

一、前端Tree樹形控制項的append方法

在elementUI 樹控制項下有個append方法，可以用來為Tree 中的一個節點追加一個子節點。

springboot vue前後端介面測試樹結點新增功能的方法

目前我們已經完成了樹列表的接口，可以在 append 方法中輸出一下傳入的 data 裡到底是什麼。

console.log(&#39;传入的node：&#39; + JSON.stringify(data))

登入後複製

springboot vue前後端介面測試樹結點新增功能的方法

點擊頂層的預設節點，F12 檢視控制台，

springboot vue前後端介面測試樹結點新增功能的方法

##可以看到：

springboot vue前後端介面測試樹結點新增功能的方法

格式化看下其實就是整個節點的樹狀結構。點選哪一個節點，data 內容就是這個節點下的所有節點資料。

但實際上，我只需要目前點擊的節點的資料即可，這個節點下的 children 可以不關心，不過考慮到資料量也不大，就整個傳給後端好了。

二、後端實作節點新增介面

我要實現的功能是點選哪個節點的新增按鈕，就是新增這個節點的子節點，例如：

springboot vue前後端介面測試樹結點新增功能的方法

#既然前端可以拿到目前節點的數據，那麼新增介面的想法也就有了：

#拿到前端傳過來的目前節點的資料set 建立時間、更新時間set 好pos，也就是這個新增的子結點在兄弟節點中的位置順序set 子結點的層級，也就是目前節點的level 1set 子節點的父節點，也就是目前傳入介面的節點的idset 新增節點的名稱，=最後進行insert

1. controller 層

新增對應的控制器方法：

@PostMapping("/add")
  public Result addNode(@RequestBody ApiModule node) {
      try {
          System.out.println(node);
          Long nodeId = apiModuleService.addNode(node);
          return Result.success(nodeId);
      } catch (Exception e) {
          return Result.fail(e.toString());
      }
  }

登入後複製

2. service 層

實作addNode 方法：

public Long addNode(ApiModule node) {
        node.setCreateTime(new Date());
        node.setUpdateTime(new Date());
        double pos = getNextLevelPos(node.getProjectId(), node.getLevel(), node.getId());
        node.setPos(pos);
        node.setLevel(node.getLevel() + 1);
        node.setParentId(node.getId());
        node.setName("ceshi111");
        apiModuleDAO.insert(node);
        return node.getId();
    }

登入後複製

這裡就是依照上述想法來進行實現，setName 暫時用一個固定值代替，先看下新增介面是否可以正常實作。

這裡pos 處理稍微麻煩一點，這個是代表新增的這個節點處於的位置順序，所以抽出去新增了一個方法實作

getNextLevelPos：

private double getNextLevelPos(Long projectId, int level, Long nodeId) {
      // 查询项目下，同parentId下，所有节点
      QueryWrapper<ApiModule> queryWrapper = new QueryWrapper<>();
      queryWrapper.eq("projectId", projectId)
                  .eq("level", level + 1)
                  .eq("parentId", nodeId)
                  .orderByDesc("pos");
      List<ApiModule> apiModules = apiModuleDAO.selectList(queryWrapper);
      if (!CollectionUtil.isEmpty(apiModules)) {
          // 不为空，获取最新的同级结点 pos 再加 1，作为下一个
          return apiModules.get(0).getPos() + 1;
      } else {
          // 否则就是当前父节点里的第一个子结点，pos 直接为 1
          return 1;
      }
  }

登入後複製

查詢項目下，同parentId，所有節點數據，注意這裡的查詢條件。

.eq("level", level 1)，當前層級1 作為子節點的層級.eq("parentId", nodeId)，當前節點作為父節點

#然後判斷查詢出來的結果，如果列表不為空，返回最新的一個子結點的pos 加上1，作為下一個子結點的位置。

否則，新增的節點就是目前父節點裡的第一個子節點，直接傳回 1 ，作為 pos 值。

三、前後端聯調

前端寫好接口，然後頁面裡呼叫接口。

springboot vue前後端介面測試樹結點新增功能的方法