springboot?vue接口測試前后端樹節(jié)點編輯刪除功能
基于springboot+vue 的測試平臺開發(fā)
繼續(xù)更新。
一、編輯功能
1. 編輯頁外顯
點擊樹節(jié)點的編輯按鈕，打開對話框，展示原有的節(jié)點名稱。
本來樹形控件里沒有自帶的編輯操作，我直接加了一個按鈕在上面，綁定點擊事件調(diào)用edit(data)方法。
為了確認(rèn) data 可用，我在edit方法中打印了一下 data 的內(nèi)容，是有我需要的字段的:
id 可以傳給后端接口用于查詢表里的數(shù)據(jù)，name 可以直接用來外顯。
接下來編輯頁面點擊【保存按鈕】的時候，調(diào)用的是 handleNodeUpdate 方法，通常需要傳當(dāng)前節(jié)點的 id 用于后端查詢數(shù)據(jù)；傳入輸入的 name，用于節(jié)點名稱的更新。
2. 實現(xiàn)后端接口
請求實體類
package com.pingguo.bloomtest.controller.request;
import lombok.Getter;
import lombok.Setter;
@Getter
@Setter
public class EditNodeRequest {
private Long id;
private String name;
}controller
@PostMapping("/rename")
public Result rename(@RequestBody EditNodeRequest request) {
try {
apiModuleService.renameNode(request);
return Result.success();
} catch (Exception e) {
return Result.fail(e.toString());
}
}service
public void renameNode(EditNodeRequest request) {
// 根據(jù)傳入的id查詢出數(shù)據(jù)
ApiModule apiModule = apiModuleDAO.selectById(request.getId());
// 更新對象屬性值，保存
apiModule.setId(request.getId());
apiModule.setName(request.getName());
apiModule.setUpdateTime(new Date());
apiModuleDAO.updateById(apiModule);
}3. 前后聯(lián)調(diào)
完成 handleNodeUpdate 方法：
主要是進行接口的調(diào)用以及相關(guān)其他處理。
4. 測試
測試修改這個節(jié)點：
點擊編輯按鈕后成功外顯。
重命名為修改后名稱，點擊保存按鈕。
功能正常。
二、刪除功能
刪除功能實現(xiàn)比較簡單，前端把當(dāng)前要刪除節(jié)點id傳給后端，后端刪除此id以及所有子節(jié)點的數(shù)據(jù)即可。
1. 后端接口
controller
@GetMapping("/delete/{id}")
public Result deleteNode(@PathVariable Long id) {
try {
int result = apiModuleService.deleteNode(id);
return Result.success(result);
} catch (Exception e) {
return Result.fail(e.toString());
}
}service
public int deleteNode(Long id) {
QueryWrapper<ApiModule> wrapper = new QueryWrapper<>();
wrapper.eq("id", id)
.or()
.eq("parentId", id);
return apiModuleDAO.delete(wrapper);
}注意這里多條件默認(rèn)情況下是and()，這里需要使用or()。
2. 前端實現(xiàn)
增加一個接口：
頁面里的刪除按鈕，綁定一個方法remove(data)，data 里可以獲取到節(jié)點的 id，這個已經(jīng)在上面編輯功能里證實過了。
直接調(diào)用刪除接口，完成后再刷新一下樹。
3. 測試
刪除掉這個節(jié)點。
刪除成功。
不過后續(xù)這里還會有細(xì)節(jié)需要優(yōu)化，比如確認(rèn)彈框、頂層節(jié)點不可刪除、節(jié)點下的所有資源(API和Case)邏輯刪除等等。
以上就是springboot vue接口測試前后端樹節(jié)點編輯刪除功能的詳細(xì)內(nèi)容，接下來講進行到接口定義核心功能的開發(fā)：接口列表、新增、調(diào)試等等，更多關(guān)于springboot vue樹節(jié)點編輯刪除的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Java 程序員都知道要面向接口編程，那 Java? 中的接口除了定義接口方法之外還能怎么用你知道嗎，今天小編就來帶大家看一下 Java 中間的接口還可以有哪些用法,需要的朋友可以參考下2023-07-07
這篇文章將用實例為大家詳細(xì)介紹了介紹如何解決Spring的循環(huán)依賴問題，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)Spring有一定的幫助，需要的可以參考一下2022-07-07
關(guān)于JWT的文章網(wǎng)上已經(jīng)多如牛毛了，但是相信很多同學(xué)學(xué)的還是云里霧里，所以在我學(xué)習(xí)JWT之后盡量用最簡潔的描述寫下這篇文章用于日后復(fù)習(xí)，與此同時也希望可以幫助同學(xué)們共同進步2021-09-09
這篇文章主要為大家詳細(xì)介紹了如何使用Java實現(xiàn)讀取設(shè)置pdf屬性信息,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-01-01
mybatis3使用@Select等注解實現(xiàn)增刪改查操作
這篇文章主要介紹了mybatis3使用@Select等注解實現(xiàn)增刪改查操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
很多朋友不清楚在Servlet中怎么上傳下載文件，談到這個問題，首先需要我們掌握開發(fā)servlet的步驟，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2022-06-06
這篇文章主要介紹了Jar包沖突問題原理及解決方案,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07
Java中的CompletionService批量異步執(zhí)行詳解
這篇文章主要介紹了Java中的CompletionService批量異步執(zhí)行詳解,我們知道線程池可以執(zhí)行異步任務(wù),同時可以通過返回值Future獲取返回值,所以異步任務(wù)大多數(shù)采用ThreadPoolExecutor+Future,需要的朋友可以參考下2023-12-12
spring boot實現(xiàn)過濾器和攔截器demo
本篇文章主要介紹了spring boot實現(xiàn)過濾器和攔截器demo ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要介紹了關(guān)于LocalDateTime使用,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08