springboot vue测试列表递归查询子节点下的接口功能实现_Java教程

基于 springboot+vue 的测试平台开发

继续更新

模块树节点的开发暂告一段落，现在开发右边接口相关的部分，今天先完成列表的功能。

功能是这样，当点击树的某个节点时候，右侧列表展示这个节点下的所有接口，带分页(最终效果图)。

springboot vue测试列表递归查询子节点下的接口功能实现

需要注意的是，因为节点下还有子节点，所以列表的功能需要使用递归来查询。

一、后端

1. 建表

想了一些字段，可能后续还会有些改动，暂时先这样：

CREATE TABLE `api_definition` (
`id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键ID',
`projectId` bigint NOT NULL COMMENT '所属项目id',
`name` varchar(255) NOT NULL COMMENT '接口名称',
`method` varchar(64) NOT NULL COMMENT '请求方法',
`path` varchar(1000) DEFAULT NULL COMMENT '接口路径',
`description` longtext COMMENT '接口描述',
`apiHeader` varchar(255) DEFAULT NULL COMMENT '请求头',
`request` longtext COMMENT '请求内容 (JSON format)',
`response` longtext COMMENT '响应内容 (JSON format)',
`createTime` datetime DEFAULT '1900-01-01 00:00:00' COMMENT '创建时间',
`updateTime` datetime DEFAULT '1900-01-01 00:00:00' COMMENT '更新时间',
`createUser` varchar(30) DEFAULT NULL COMMENT '创建人',
`moduleId` bigint NOT NULL COMMENT '所属模块id',
`host` varchar(255) DEFAULT NULL COMMENT '接口域名',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci COMMENT='接口定义表';

2. 列表接口

(1)实体类 ApiDefinition

@Data
@TableName("api_definition")
public class ApiDefinition {
  @TableId(type = IdType.AUTO)
  private Long id;
  private Long projectId;
  private String name;
  private String method;
  private String path;
  private String host;
  private String description;
  private String apiHeader;
  private String request;
  private String response;
  private Long moduleId;
  private String createUser;
  @TableField(fill = FieldFill.INSERT)        // 新增的时候填充数据
  private Date createTime;
  @TableField(fill = FieldFill.INSERT_UPDATE) // 新增或修改的时候填充数据
  private Date updateTime;
}

(2)DAO层

@Repository
public interface ApiDefinitionDAO extends BaseMapper<ApiDefinition> {
}

(3)Controller 层

@RestController
@RequestMapping("apiDefinition")
public class ApiDefinitionController {
  @Autowired
  ApiDefinitionService apiDefinitionService;
  @GetMapping("/list/{projectId}/{moduleId}/{currentPage}/{pageSize}")
  public Result list(@PathVariable Long projectId,
                     @PathVariable Long moduleId,
                     @PathVariable int currentPage,
                     @PathVariable int pageSize) {
      IPage<ApiDefinition> IPageProject = apiDefinitionService.list(projectId, moduleId, currentPage, pageSize);
      return Result.success(IPageProject);
  }
}

这里路径有 4 个参数，moduleId 用来查询模块下的所有接口(包含本节点+子节点)，后面2个则是分页查询参数。

(4)Service 层

在 service 层实现 list 方法，用来查询接口。

@Service
public class ApiDefinitionService {
  @Autowired
  ApiDefinitionDAO apiDefinitionDAO;
  @Autowired
  ApiModuleDAO apiModuleDAO;
  public IPage<ApiDefinition> list(Long projectId, Long moduleId, int currentPage, int pageSize) {
      // 查询项目id下所有模块
      QueryWrapper<ApiModule> queryWrapper = new QueryWrapper<>();
      queryWrapper.eq("projectId", projectId);
      List<ApiModule> apiModules = apiModuleDAO.selectList(queryWrapper);
      // 调用递归查询，childrenIds存放查询到的模块 id
      List<Long> childrenIds = new ArrayList<>();
      List<Long> ids = moduleRecursion(childrenIds, apiModules, moduleId);
      // 添加上入参的模块id
      ids.add(moduleId);
      // 查询模块id下的api
      Page<ApiDefinition> pageApiDefinition = new Page<>(currentPage, pageSize);
      QueryWrapper<ApiDefinition> queryApiWrapper = new QueryWrapper<>();
      queryApiWrapper.in("moduleId", ids)
                     .orderByDesc("id");
      return apiDefinitionDAO.selectPage(pageApiDefinition, queryApiWrapper);
  }
  private List<Long> moduleRecursion(List<Long> children, List<ApiModule> modules, Long pid) {
      for (ApiModule apiModule : modules) {
          //遍历出父id等于pid，add进子节点集合
          if (apiModule.getParentId().equals(pid)) {
              // 递归遍历下一级
              moduleRecursion(children, modules, apiModule.getId());
              children.add(apiModule.getId());
          }
      }
      return children;
  }
}

在list方法中调用递归查询方法moduleRecursion，有3个参数：

List<Long> children：用来存放子节点的 id，最后返回出来
List<ApiModule> modules：项目id下的模块
Long pid：就是当前要查询的模块id

for 循环遍历项目下的所有模块id，每一层里判断apiModule.getParentId().equals(pid)，相等的话继续递归遍历，最后把结果返回。

list方法拿到之后，还有一步别忘记了，就是入参的这个模块本身，也需要加进去ids.add(moduleId)，最后进行分页查询。

在表里加点测试数据，然后测试下查询接口没问题。

二、前端

1. 准备工作

新建apiDefinition.js文件，存放接口。

import request from '@/utils/request'
export function getApiListByModuleId(projectId, moduleId, current, size) {
return request({
  url: `/bloomtest/apiDefinition/list/${projectId}/${moduleId}/${current}/${size}`,
  method: 'get'
})
}

接着，去掉之前写死的假数据，变成空数组，从后端接口拿到的数组就放到这。

springboot vue测试列表递归查询子节点下的接口功能实现