springboot?vue前后端接口測試樹結(jié)點添加功能

更新時間：2022年05月26日 16:42:56 作者：把蘋果咬哭的測試筆記

這篇文章主要為大家介紹了springboot?vue前后端接口測試樹結(jié)點添加功能，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

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

繼續(xù)更新。

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

在elementUI 樹控件下有個append方法，可以用來為 Tree 中的一個節(jié)點追加一個子節(jié)點。

目前我們已經(jīng)完成了樹列表的接口，可以在 append 方法中輸出一下傳入的 data 里到底是什么。

console.log('傳入的node：' + JSON.stringify(data))

點擊頂層的默認節(jié)點，F(xiàn)12 查看控制臺，

可以看到：

格式化看下其實就是整個節(jié)點的樹形結(jié)構(gòu)。點擊哪一個節(jié)點，data 內(nèi)容就是這個節(jié)點下的所有節(jié)點數(shù)據(jù)。

但實際上，我只需要當(dāng)前點擊的節(jié)點的數(shù)據(jù)即可，這個節(jié)點下的 children 可以不關(guān)心，不過考慮到數(shù)據(jù)量也不大，就整個傳給后端好了。

二、后端實現(xiàn)節(jié)點新增接口

我要實現(xiàn)的功能是點擊哪個節(jié)點的添加按鈕，就是添加這個節(jié)點的子節(jié)點，比如：

既然前端可以拿到當(dāng)前節(jié)點的數(shù)據(jù)，那么新增接口的思路也就有了：

拿到前端傳過來的當(dāng)前節(jié)點的數(shù)據(jù)set 創(chuàng)建時間、更新時間set 好 pos，也就是這個新增的子結(jié)點在兄弟節(jié)點中的位置順序set 子結(jié)點的層級，也就是當(dāng)前節(jié)點的 level + 1set 子節(jié)點的父節(jié)點，也就是當(dāng)前傳入接口的節(jié)點的 idset 新增節(jié)點的名稱，=最后進行 insert

1. controller 層

新增對應(yīng)的控制器方法：

@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 層

實現(xiàn) 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();
    }

這里就是按照上述思路來進行實現(xiàn)，setName 暫時用一個固定值代替，先看下新增接口是否可以正常實現(xiàn)。

這里 pos 處理稍微麻煩一點，這個是代表新增的這個節(jié)點處于的位置順序，所以抽出去新增了一個方法實現(xiàn)getNextLevelPos：

private double getNextLevelPos(Long projectId, int level, Long nodeId) {
      // 查詢項目下，同parentId下，所有節(jié)點
      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)) {
          // 不為空，獲取最新的同級結(jié)點 pos 再加 1，作為下一個
          return apiModules.get(0).getPos() + 1;
      } else {
          // 否則就是當(dāng)前父節(jié)點里的第一個子結(jié)點，pos 直接為 1
          return 1;
      }
  }

查詢項目下，同parentId，所有節(jié)點數(shù)據(jù)，注意這里的查詢條件。

.eq("level", level + 1)，當(dāng)前層級 + 1 作為子節(jié)點的層級.eq("parentId", nodeId)，當(dāng)前節(jié)點作為父節(jié)點

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

否則，新增的節(jié)點就是當(dāng)前父節(jié)點里的第一個子節(jié)點，直接返回 1 ，作為 pos 值。