springboot?vue測(cè)試列表遞歸查詢子節(jié)點(diǎn)下的接口功能實(shí)現(xià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ù)組就放到這。
2. 請(qǐng)求接口
組件里有個(gè)事件node-click
,節(jié)點(diǎn)被點(diǎn)擊時(shí)的回調(diào)。
這里綁定了一個(gè)方法getApi
,在這個(gè)方法里會(huì)進(jìn)行接口請(qǐng)求的操作,來實(shí)現(xiàn)這個(gè)方法:
傳入 data 是可以獲得節(jié)點(diǎn) id 的,可以直接用。
注意,這里還是需要用到一個(gè)中間字段currentNode
,本來沒有用直接使用 data,后來發(fā)現(xiàn)點(diǎn)擊分頁的時(shí)候有bug。
這是因?yàn)?data 是點(diǎn)擊左側(cè)樹節(jié)點(diǎn)的時(shí)候才有,所以還是先存起來。
列表中的這些prop
的值注意跟接口返回的字段對(duì)應(yīng)。
分頁的地方,注意下調(diào)用的方法即可。
3. 測(cè)試效果
在表里新建了個(gè)數(shù)據(jù),點(diǎn)擊這個(gè)接口關(guān)聯(lián)的模塊,列表可以呈現(xiàn)數(shù)據(jù)。
4. 發(fā)現(xiàn)問題
問題1
功能實(shí)現(xiàn)了,但是發(fā)現(xiàn)了個(gè)問題。
就是當(dāng)我點(diǎn)擊節(jié)點(diǎn)上的 添加、編輯等按鈕的時(shí)候,也會(huì)觸發(fā)這個(gè)事件,調(diào)用了接口列表的方法。
但是看在不影響各自功能的使用,先不去管它。
問題2
剛才我測(cè)試是在項(xiàng)目3下進(jìn)行的,是可以查出來一條數(shù)據(jù)。但是當(dāng)我切換項(xiàng)目到還沒數(shù)據(jù)的項(xiàng)目2下,頁面沒有刷新,還是呈現(xiàn)的剛才的數(shù)據(jù)。
修改方法就是當(dāng)切換項(xiàng)目的時(shí)候,查詢出這個(gè)項(xiàng)目下的所有接口數(shù)據(jù)。
找到下來框的元素,之前已經(jīng)綁定過一個(gè)方法queryModuleList
,然后現(xiàn)在再加一個(gè)方法,用來查詢項(xiàng)目下的接口。
@change="queryModuleList();initProjectApi()"
,方法加上括號(hào),2個(gè)方法用;
隔開。
實(shí)現(xiàn)這個(gè)新的方法initProjectApi
。
依然是調(diào)用列表接口,這里的模塊id可以直接傳 0,因?yàn)樗许?xiàng)目下的模塊,頂級(jí)的節(jié)點(diǎn)id都是 0 。
測(cè)試功能正常。
以上就是springboot vue測(cè)試列表遞歸查詢子節(jié)點(diǎn)下的接口功能實(shí)現(xiàn)的詳細(xì)內(nèi)容,更多關(guān)于springboot vue列表遞歸查詢的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
通過pipeline配置sonar自動(dòng)化實(shí)現(xiàn)過程解析
這篇文章主要介紹了通過pipeline配置sonar自動(dòng)化實(shí)現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11java compare compareTo方法區(qū)別詳解
本文主要介紹了java compare compareTo方法區(qū)別,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09Spring Data Jpa 自動(dòng)生成表結(jié)構(gòu)的方法示例
這篇文章主要介紹了Spring Data Jpa 自動(dòng)生成表結(jié)構(gòu)的方法示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04