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

這篇文章主要講解了“springboot vue前后端接口測(cè)試樹結(jié)點(diǎn)添加功能的方法”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“springboot vue前后端接口測(cè)試樹結(jié)點(diǎn)添加功能的方法”吧！

基于springboot+vue的測(cè)試平臺(tái)開發(fā)

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

在elementUI 樹控件下有個(gè)append方法，可以用來(lái)為 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 查看控制臺(tái)，

可以看到：

格式化看下其實(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)心，不過(guò)考慮到數(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ù)，那么新增接口的思路也就有了：

拿到前端傳過(guò)來(lái)的當(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)的層級(jí)，也就是當(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 層

新增對(duì)應(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();
    }

這里就是按照上述思路來(lái)進(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)) {
          // 不為空，獲取最新的同級(jí)結(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)前層級(jí) + 1 作為子節(jié)點(diǎn)的層級(jí).eq("parentId", nodeId)，當(dāng)前節(jié)點(diǎn)作為父節(jié)點(diǎn)

然后判斷查詢出來(lái)的結(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 值。

三、前后端聯(lián)調(diào)

前端寫好接口，然后頁(yè)面里調(diào)用接口。

調(diào)用接口，增加成功提示，然后刷新樹列表。

功能正常，在對(duì)應(yīng)節(jié)點(diǎn)下新增了固定名稱“ceshi111”的子結(jié)點(diǎn)，并且刷新樹，展示出最新數(shù)據(jù)。

四、編輯節(jié)點(diǎn)名稱

上面完成了，證明功能沒啥大問(wèn)題了，現(xiàn)在只需要解決節(jié)點(diǎn)名稱編輯的問(wèn)題。決定還是用對(duì)話框 dialog 來(lái)解決。

點(diǎn)擊添加按鈕，打開對(duì)話框，可以輸入節(jié)點(diǎn)名稱，然后保存。該對(duì)話框同樣適用于編輯場(chǎng)景。

在項(xiàng)目管理功能中，已經(jīng)用過(guò)一次對(duì)話框，我直接copy過(guò)來(lái)相關(guān)代碼，進(jìn)行修改。

對(duì)應(yīng) return 里：

對(duì)話框里會(huì)有 2 個(gè)按鈕：取消和保存。當(dāng)點(diǎn)擊保存的按鈕的時(shí)候，會(huì)根據(jù)當(dāng)前是新建還是修改來(lái)調(diào)用不同的方法。

1. 打開對(duì)話框

修改 append 方法，點(diǎn)擊新增按鈕時(shí)候需要打開對(duì)話框。

還有一個(gè)重要點(diǎn)，因?yàn)樾略鼋Y(jié)點(diǎn)需要傳入 data，而現(xiàn)在實(shí)際進(jìn)行新增操作的是handleNodeAdd方法。所以需要在打開對(duì)話框的時(shí)候，把 data 存下來(lái)。

于是，在 return 里新建一個(gè)字段currentNode: {}：

在 append 方法里把 data 賦值給 currentNode：

這里this.dialogStatus = 'create'就是顯示對(duì)話框。

2. 新增節(jié)點(diǎn)

在對(duì)話框里輸入節(jié)點(diǎn)名稱，點(diǎn)擊保存，就好調(diào)用handleNodeAdd方法來(lái)請(qǐng)求后端接口。

因?yàn)閭鹘o后端的節(jié)點(diǎn)名稱是我們輸入的，所以這里this.currentNode.name = this.form.nodeName即可。

請(qǐng)求成功后給個(gè)提示，然后清空表單，以免打開對(duì)話框后顯示上一次的內(nèi)容。

3. 測(cè)試

測(cè)試一下功能是否正常，我把項(xiàng)目id=3 下的節(jié)點(diǎn)刪掉。

新增一個(gè)測(cè)試節(jié)點(diǎn)：

功能正常。

感謝各位的閱讀，以上就是“springboot vue前后端接口測(cè)試樹結(jié)點(diǎn)添加功能的方法”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)springboot vue前后端接口測(cè)試樹結(jié)點(diǎn)添加功能的方法這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！