springboot?vue測試列表遞歸查詢子節(jié)點下的接口功能實現(xiàn)
基于 springboot+vue 的測試平臺開發(fā)
繼續(xù)更新
模塊樹節(jié)點的開發(fā)暫告一段落,現(xiàn)在開發(fā)右邊接口相關的部分,今天先完成列表的功能。
功能是這樣,當點擊樹的某個節(jié)點時候,右側列表展示這個節(jié)點下的所有接口,帶分頁(最終效果圖)。

需要注意的是,因為節(jié)點下還有子節(jié)點,所以列表的功能需要使用遞歸來查詢。
一、后端
1. 建表
想了一些字段,可能后續(xù)還會有些改動,暫時先這樣:
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 '創(chuàng)建時間', `updateTime` datetime DEFAULT '1900-01-01 00:00:00' COMMENT '更新時間', `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)實體類 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ù)據(jù)
private Date createTime;
@TableField(fill = FieldFill.INSERT_UPDATE) // 新增或修改的時候填充數(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 個參數(shù),moduleId 用來查詢模塊下的所有接口(包含本節(jié)點+子節(jié)點),后面2個則是分頁查詢參數(shù)。
(4)Service 層
在 service 層實現(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) {
// 查詢項目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);
// 添加上入?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進子節(jié)點集合
if (apiModule.getParentId().equals(pid)) {
// 遞歸遍歷下一級
moduleRecursion(children, modules, apiModule.getId());
children.add(apiModule.getId());
}
}
return children;
}
}在list方法中調用遞歸查詢方法moduleRecursion,有3個參數(shù):
List<Long> children:用來存放子節(jié)點的 id,最后返回出來List<ApiModule> modules:項目id下的模塊Long pid:就是當前要查詢的模塊id
for 循環(huán)遍歷項目下的所有模塊id,每一層里判斷apiModule.getParentId().equals(pid),相等的話繼續(xù)遞歸遍歷,最后把結果返回。
list方法拿到之后,還有一步別忘記了,就是入?yún)⒌倪@個模塊本身,也需要加進去ids.add(moduleId),最后進行分頁查詢。
在表里加點測試數(shù)據(jù),然后測試下查詢接口沒問題。
二、前端
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'
})
}接著,去掉之前寫死的假數(shù)據(jù),變成空數(shù)組,從后端接口拿到的數(shù)組就放到這。

2. 請求接口
組件里有個事件node-click,節(jié)點被點擊時的回調。

這里綁定了一個方法getApi,在這個方法里會進行接口請求的操作,來實現(xiàn)這個方法:

傳入 data 是可以獲得節(jié)點 id 的,可以直接用。
注意,這里還是需要用到一個中間字段currentNode,本來沒有用直接使用 data,后來發(fā)現(xiàn)點擊分頁的時候有bug。

這是因為 data 是點擊左側樹節(jié)點的時候才有,所以還是先存起來。

列表中的這些prop的值注意跟接口返回的字段對應。

分頁的地方,注意下調用的方法即可。

3. 測試效果
在表里新建了個數(shù)據(jù),點擊這個接口關聯(lián)的模塊,列表可以呈現(xiàn)數(shù)據(jù)。

4. 發(fā)現(xiàn)問題
問題1
功能實現(xiàn)了,但是發(fā)現(xiàn)了個問題。
就是當我點擊節(jié)點上的 添加、編輯等按鈕的時候,也會觸發(fā)這個事件,調用了接口列表的方法。
但是看在不影響各自功能的使用,先不去管它。
問題2
剛才我測試是在項目3下進行的,是可以查出來一條數(shù)據(jù)。但是當我切換項目到還沒數(shù)據(jù)的項目2下,頁面沒有刷新,還是呈現(xiàn)的剛才的數(shù)據(jù)。

修改方法就是當切換項目的時候,查詢出這個項目下的所有接口數(shù)據(jù)。
找到下來框的元素,之前已經(jīng)綁定過一個方法queryModuleList,然后現(xiàn)在再加一個方法,用來查詢項目下的接口。

@change="queryModuleList();initProjectApi()",方法加上括號,2個方法用;隔開。
實現(xiàn)這個新的方法initProjectApi。

依然是調用列表接口,這里的模塊id可以直接傳 0,因為所有項目下的模塊,頂級的節(jié)點id都是 0 。

測試功能正常。
以上就是springboot vue測試列表遞歸查詢子節(jié)點下的接口功能實現(xiàn)的詳細內容,更多關于springboot vue列表遞歸查詢的資料請關注腳本之家其它相關文章!
相關文章
通過pipeline配置sonar自動化實現(xiàn)過程解析
這篇文章主要介紹了通過pipeline配置sonar自動化實現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-11-11
java compare compareTo方法區(qū)別詳解
本文主要介紹了java compare compareTo方法區(qū)別,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-09-09

