【測試開發】十、介面測試-前後端-實現新增樹結點功能
基於 springboot+vue 的測試平臺開發繼續更新。
一、前端Tree樹形控制元件的append方法
在elementUI 樹控制元件下有個append
方法,可以用來為 Tree 中的一個節點追加一個子節點。
目前我們已經完成了樹列表的介面,可以在 append 方法中輸出一下傳入的 data 裡到底是什麼。
console.log('傳入的node:' + JSON.stringify(data))
點選頂層的預設節點,F12 檢視控制檯,
可以看到:
格式化看下其實就是整個節點的樹形結構。點選哪一個節點,data 內容就是這個節點下的所有節點資料。
但實際上,我只需要當前點選的節點的資料即可,這個節點下的 children 可以不關心,不過考慮到資料量也不大,就整個傳給後端好了。
二、後端實現節點新增介面
我要實現的功能是點選哪個節點的新增按鈕,就是新增這個節點的子節點,比如:
既然前端可以拿到當前節點的資料,那麼新增介面的思路也就有了:
- 拿到前端傳過來的當前節點的資料
- set 建立時間、更新時間
- set 好 pos,也就是這個新增的子結點在兄弟節點中的位置順序
- set 子結點的層級,也就是當前節點的 level + 1
- set 子節點的父節點,也就是當前傳入介面的節點的 id
- set 新增節點的名稱,=
- 最後進行 insert
1. controller 層
新增對應的控制器方法:
@PostMapping("/add") public Result addNode(@RequestBody ApiModule node) { try { System.out.println(node); Long nodeId = apiModuleService.addNode(node); return Result.success(nodeId); } catch (Exception e) { return Result.fail(e.toString()); } }
2. service 層
實現 addNode 方法:
public Long addNode(ApiModule node) { node.setCreateTime(new Date()); node.setUpdateTime(new Date()); double pos = getNextLevelPos(node.getProjectId(), node.getLevel(), node.getId()); node.setPos(pos); node.setLevel(node.getLevel() + 1); node.setParentId(node.getId()); node.setName("ceshi111"); apiModuleDAO.insert(node); return node.getId(); }
這裡就是按照上述思路來進行實現,setName 暫時用一個固定值代替,先看下新增介面是否可以正常實現。
這裡 pos 處理稍微麻煩一點,這個是代表新增的這個節點處於的位置順序,所以抽出去新增了一個方法實現getNextLevelPos
:
private double getNextLevelPos(Long projectId, int level, Long nodeId) {
// 查詢專案下,同parentId下,所有節點
QueryWrapper<ApiModule> queryWrapper = new QueryWrapper<>();
queryWrapper.eq("projectId", projectId)
.eq("level", level + 1)
.eq("parentId", nodeId)
.orderByDesc("pos");
List<ApiModule> apiModules = apiModuleDAO.selectList(queryWrapper);
if (!CollectionUtil.isEmpty(apiModules)) {
// 不為空,獲取最新的同級結點 pos 再加 1,作為下一個
return apiModules.get(0).getPos() + 1;
} else {
// 否則就是當前父節點裡的第一個子結點,pos 直接為 1
return 1;
}
}
查詢專案下,同parentId,所有節點資料,注意這裡的查詢條件。
.eq("level", level + 1)
,當前層級 + 1 作為子節點的層級.eq("parentId", nodeId)
,當前節點作為父節點
然後判斷查詢出來的結果,如果列表不為空,返回最新的一個子結點的 pos 加上 1,作為下一個子結點的位置。
否則,新增的節點就是當前父節點裡的第一個子節點,直接返回 1 ,作為 pos 值。
三、前後端聯調
前端寫好介面,然後頁面裡呼叫介面。
呼叫介面,增加成功提示,然後重新整理樹列表。
功能正常,在對應節點下新增了固定名稱“ceshi111”的子結點,並且重新整理樹,展示出最新資料。
四、編輯節點名稱
上面完成了,證明功能沒啥大問題了,現在只需要解決節點名稱編輯的問題。決定還是用對話方塊 dialog 來解決。
點選新增按鈕,開啟對話方塊,可以輸入節點名稱,然後儲存。該對話方塊同樣適用於編輯場景。
在專案管理功能中,已經用過一次對話方塊,我直接copy過來相關程式碼,進行修改。
對應 return 裡:
對話方塊裡會有 2 個按鈕:取消和儲存。當點選儲存的按鈕的時候,會根據當前是新建還是修改來呼叫不同的方法。
1. 開啟對話方塊
修改 append 方法,點選新增按鈕時候需要開啟對話方塊。
還有一個重要點,因為新增結點需要傳入 data,而現在實際進行新增操作的是handleNodeAdd
方法。所以需要在開啟對話方塊的時候,把 data 存下來。
於是,在 return 裡新建一個欄位currentNode: {}
:
在 append 方法裡把 data 賦值給 currentNode:
這裡this.dialogStatus = 'create'
就是顯示對話方塊。
2. 新增節點
在對話方塊裡輸入節點名稱,點選儲存,就好呼叫handleNodeAdd
方法來請求後端介面。
因為傳給後端的節點名稱是我們輸入的,所以這裡this.currentNode.name = this.form.nodeName
即可。
請求成功後給個提示,然後清空表單,以免開啟對話方塊後顯示上一次的內容。
3. 測試
測試一下功能是否正常,我把專案id=3 下的節點刪掉。
新增一個測試節點:
功能正常。
--不要用肉體的勤奮,去掩蓋思考的懶惰--