springboot?vue測(cè)試列表遞歸查詢子節(jié)點(diǎn)下的接口功能實(shí)現(xiàn)

更新時(shí)間：2022年05月26日 15:50:46 作者：把蘋果咬哭的測(cè)試筆記

這篇文章主要為大家介紹了springboot?vue測(cè)試列表遞歸查詢子節(jié)點(diǎn)下的接口功能實(shí)現(xiàn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

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

繼續(xù)更新

模塊樹節(jié)點(diǎn)的開發(fā)暫告一段落，現(xiàn)在開發(fā)右邊接口相關(guān)的部分，今天先完成列表的功能。

功能是這樣，當(dāng)點(diǎn)擊樹的某個(gè)節(jié)點(diǎn)時(shí)候，右側(cè)列表展示這個(gè)節(jié)點(diǎn)下的所有接口，帶分頁(最終效果圖)。

需要注意的是，因?yàn)楣?jié)點(diǎn)下還有子節(jié)點(diǎn)，所以列表的功能需要使用遞歸來查詢。

一、后端

1. 建表

想了一些字段，可能后續(xù)還會(huì)有些改動(dòng)，暫時(shí)先這樣：

CREATE TABLE `api_definition` (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '主鍵ID',
  `projectId` bigint NOT NULL COMMENT '所屬項(xiàng)目id',
  `name` varchar(255) NOT NULL COMMENT '接口名稱',
  `method` varchar(64) NOT NULL COMMENT '請(qǐng)求方法',
  `path` varchar(1000) DEFAULT NULL COMMENT '接口路徑',
  `description` longtext COMMENT '接口描述',
  `apiHeader` varchar(255) DEFAULT NULL COMMENT '請(qǐng)求頭',
  `request` longtext COMMENT '請(qǐng)求內(nèi)容 (JSON format)',
  `response` longtext COMMENT '響應(yīng)內(nèi)容 (JSON format)',
  `createTime` datetime DEFAULT '1900-01-01 00:00:00' COMMENT '創(chuàng)建時(shí)間',
  `updateTime` datetime DEFAULT '1900-01-01 00:00:00' COMMENT '更新時(shí)間',
  `createUser` varchar(30) DEFAULT NULL COMMENT '創(chuàng)建人',
  `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)實(shí)體類 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)        // 新增的時(shí)候填充數(shù)據(jù)
    private Date createTime;
    @TableField(fill = FieldFill.INSERT_UPDATE) // 新增或修改的時(shí)候填充數(shù)據(jù)
    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 個(gè)參數(shù)，moduleId 用來查詢模塊下的所有接口(包含本節(jié)點(diǎn)+子節(jié)點(diǎn))，后面2個(gè)則是分頁查詢參數(shù)。

(4)Service 層

在 service 層實(shí)現(xiàn) list 方法，用來查詢接口。

@Service
public class ApiDefinitionService {
    @Autowired
    ApiDefinitionDAO apiDefinitionDAO;
    @Autowired
    ApiModuleDAO apiModuleDAO;
    public IPage<ApiDefinition> list(Long projectId, Long moduleId, int currentPage, int pageSize) {
        // 查詢項(xiàng)目id下所有模塊
        QueryWrapper<ApiModule> queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("projectId", projectId);
        List<ApiModule> apiModules = apiModuleDAO.selectList(queryWrapper);
        // 調(diào)用遞歸查詢，childrenIds存放查詢到的模塊 id
        List<Long> childrenIds = new ArrayList<>();
        List<Long> ids = moduleRecursion(childrenIds, apiModules, moduleId);
        // 添加上入?yún)⒌哪Kid
        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進(jìn)子節(jié)點(diǎn)集合
            if (apiModule.getParentId().equals(pid)) {
                // 遞歸遍歷下一級(jí)
                moduleRecursion(children, modules, apiModule.getId());
                children.add(apiModule.getId());
            }
        }
        return children;
    }
}

在list方法中調(diào)用遞歸查詢方法moduleRecursion，有3個(gè)參數(shù)：

List<Long> children：用來存放子節(jié)點(diǎn)的 id，最后返回出來
List<ApiModule> modules：項(xiàng)目id下的模塊
Long pid：就是當(dāng)前要查詢的模塊id

for 循環(huán)遍歷項(xiàng)目下的所有模塊id，每一層里判斷apiModule.getParentId().equals(pid)，相等的話繼續(xù)遞歸遍歷，最后把結(jié)果返回。

list方法拿到之后，還有一步別忘記了，就是入?yún)⒌倪@個(gè)模塊本身，也需要加進(jìn)去ids.add(moduleId)，最后進(jìn)行分頁查詢。

在表里加點(diǎn)測(cè)試數(shù)據(jù)，然后測(cè)試下查詢接口沒問題。

二、前端

1. 準(zhǔn)備工作

新建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'
  })
}

接著，去掉之前寫死的假數(shù)據(jù)，變成空數(shù)組，從后端接口拿到的數(shù)組就放到這。