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

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

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

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

繼續(xù)更新。

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

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

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

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

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

可以看到：

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

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

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

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

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

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

實(shí)現(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();
    }

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

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

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

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

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

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

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