springboot vue 프론트 엔드 및 백엔드 인터페이스 테스트 트리 노드 기능 추가 방법

springboot+vue 기반 테스트 플랫폼 개발

1. 프런트엔드 트리 트리 컨트롤의 추가 방법

elementUI 트리 컨트롤 아래에 추가하는 데 사용할 수 있는 append 방법이 있습니다. 트리의 노드 자식 노드. append方法，可以用来为 Tree 中的一个节点追加一个子节点。

目前我们已经完成了树列表的接口，可以在 append 方法中输出一下传入的 data 里到底是什么。

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

点击顶层的默认节点，F12 查看控制台，

可以看到：

格式化看下其实就是整个节点的树形结构。点击哪一个节点，data 内容就是这个节点下的所有节点数据。

但实际上，我只需要当前点击的节点的数据即可，这个节点下的 children 可以不关心，不过考虑到数据量也不大，就整个传给后端好了。

二、后端实现节点新增接口

我要实现的功能是点击哪个节点的添加按钮，就是添加这个节点的子节点，比如：

既然前端可以拿到当前节点的数据，那么新增接口的思路也就有了：

拿到前端传过来的当前节点的数据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;
      }
  }

콘솔을 보려면 최상위 기본 노드인 F12를 클릭하세요.

다음을 볼 수 있습니다:

포맷하는 것은 실제로 전체 노드의 트리 구조입니다. 어떤 노드를 클릭하면 데이터 내용은 이 노드 아래의 모든 노드 데이터입니다.

실제로는 현재 클릭된 노드의 데이터만 필요합니다. 다만, 데이터의 양이 크지 않다는 점을 고려하여 백엔드에 전달합니다. 전체적으로.

2. 새로운 노드 인터페이스의 백엔드 구현

내가 구현하고 싶은 기능은 이 노드의 하위 노드를 추가하는 노드의 추가 버튼을 클릭하는 것입니다. 예:

프런트 엔드가 현재 노드의 데이터를 가져올 수 있으므로 새로운 인터페이스를 추가하는 아이디어는 다음과 같습니다.

프런트 엔드에서 전달된 현재 노드의 데이터 세트, 생성 시간, 및 업데이트 시간을 설정합니다. 즉, 형제 노드 중에서 이 새 자식 노드의 위치 순서를 설정합니다. 자식 노드를 설정합니다. 즉, 현재 노드의 수준 + 1세트의 부모 노드입니다. 현재 인터페이스에 전달된 노드의 ID 세트인 새 노드의 이름 = 마지막으로 삽입

1. 컨트롤러 레이어

해당 컨트롤러 메소드 추가:

rrreee

2.

addNode 메소드 구현:

rrreee위 아이디어에 따라 구현됩니다. SetName이 일시적으로 고정된 값으로 대체됩니다. 먼저 새 인터페이스가 정상적으로 구현될 수 있는지 확인합니다.

여기서 Pos 처리는 좀 더 번거롭습니다. 이는 새로 추가된 노드의 위치 순서를 나타내기 때문에 getNextLevelPos를 구현하는 새로운 메소드를 추가했습니다.

rrreee

쿼리 프로젝트 아래에 다음과 같습니다. parentId, 모든 노드 데이터, 여기서 쿼리 조건에 주의하세요.

.eq("level", level + 1), 현재 레벨 + 1이 자식 노드의 레벨로 사용됩니다.eq("parentId", nodeId), 현재 노드가 부모 노드로 사용됩니다

그런 다음 쿼리 결과를 판단하고, 목록이 비어 있으면 가장 최근 자식 노드의 pos에 1을 더한 값을 다음 자식 노드의 위치로 반환합니다.

그렇지 않으면 새로 추가된 노드가 현재 상위 노드의 첫 번째 하위 노드가 되고, pos 값으로 직접 1이 반환됩니다.

3. 프론트엔드와 백엔드의 공동 디버깅🎜🎜프론트엔드에 인터페이스를 작성한 다음 페이지에서 인터페이스를 호출합니다. 🎜🎜🎜🎜🎜인터페이스를 호출하고 성공 프롬프트를 추가한 다음 트리 목록을 새로 고칩니다. 🎜🎜🎜🎜🎜해당 노드 아래에 고정 이름이 "ceshi111"인 하위 노드가 추가되고 트리가 새로 고쳐져 최신 데이터가 표시되는 기능은 정상입니다. 🎜🎜🎜🎜🎜 4. 노드 이름 수정 🎜🎜위의 내용이 완료되었으므로 기능에 큰 문제가 없음을 확인했습니다. 이제 노드 이름 수정 문제만 해결하면 됩니다. 문제를 해결하기 위해 대화 상자를 사용하기로 결정했습니다. 🎜🎜추가 버튼을 클릭하면 노드 이름을 입력하고 저장할 수 있는 대화 상자가 열립니다. 이 대화상자는 장면 편집에도 사용할 수 있습니다. 🎜🎜프로젝트 관리 기능에서는 이미 한 번 대화상자를 이용해 관련 코드를 직접 복사해서 수정해봤습니다. 🎜🎜🎜🎜🎜는 반환에 해당합니다: 🎜🎜🎜🎜🎜대화 상자에는 취소와 저장이라는 두 개의 버튼이 있습니다. 저장 버튼을 클릭하면 신규인지 수정인지에 따라 다른 메소드가 호출됩니다. 🎜🎜1. 대화 상자 열기🎜🎜추가 방법을 수정하고, 새로 만들기 버튼을 클릭할 때 대화 상자를 열어야 합니다. 🎜

또 다른 중요한 점이 있습니다. 노드를 추가하려면 데이터 전달이 필요하고 이제 실제 추가 작업은 handleNodeAdd 메서드이기 때문입니다. 따라서 대화 상자를 열 때 데이터를 저장해야 합니다. handleNodeAdd方法。所以需要在打开对话框的时候，把 data 存下来。

于是，在 return 里新建一个字段currentNode: {}：

在 append 方法里把 data 赋值给 currentNode：

这里this.dialogStatus = 'create'就是显示对话框。

2. 新增节点

在对话框里输入节点名称，点击保存，就好调用handleNodeAdd

그러므로 새 필드 currentNode를 만듭니다: {} 반환:

append 메소드에서 currentNode에 데이터 할당:

여기서 this.dialogStatus = 'create'는 대화상자를 표시하는 것입니다.

2. 새 노드 추가

대화 상자에 노드 이름을 입력하고 저장을 클릭한 다음 handleNodeAdd 메서드를 호출하여 백엔드 인터페이스를 요청합니다.

백엔드에 전달되는 노드 이름은 우리가 입력한 것이므로 여기서는 this.currentNode.name = this.form.nodeName입니다.

요청이 성공한 후 프롬프트를 표시하고 대화 상자를 연 후 마지막 콘텐츠가 표시되지 않도록 양식을 지웁니다.

3. 테스트 🎜🎜 기능이 정상인지 테스트하기 위해 프로젝트 ID=3 아래의 노드를 삭제합니다. 🎜🎜🎜🎜🎜새 테스트 노드 추가: 🎜🎜🎜🎜🎜정상적으로 작동합니다. 🎜

위 내용은 springboot vue 프론트 엔드 및 백엔드 인터페이스 테스트 트리 노드 기능 추가 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!