springboot vue前后端接口测试树结点添加功能的方法(springboot,vue,开发技术)

时间:2024-03-29 22:57:40 作者 : 石家庄SEO 分类 : 开发技术
  • TAG :

基于springboot+vue的测试平台开发

一、前端Tree树形控件的append方法

在elementUI 树控件下有个append方法,可以用来为 Tree 中的一个节点追加一个子节点。

springboot vue前后端接口测试树结点添加功能的方法

目前我们已经完成了树列表的接口,可以在 append 方法中输出一下传入的 data 里到底是什么。

console.log('传入的node:'+JSON.stringify(data))

springboot vue前后端接口测试树结点添加功能的方法

点击顶层的默认节点,F12 查看控制台,

springboot vue前后端接口测试树结点添加功能的方法

可以看到:

springboot vue前后端接口测试树结点添加功能的方法

格式化看下其实就是整个节点的树形结构。点击哪一个节点,data 内容就是这个节点下的所有节点数据。

但实际上,我只需要当前点击的节点的数据即可,这个节点下的 children 可以不关心,不过考虑到数据量也不大,就整个传给后端好了。

二、后端实现节点新增接口

我要实现的功能是点击哪个节点的添加按钮,就是添加这个节点的子节点,比如:

springboot vue前后端接口测试树结点添加功能的方法

既然前端可以拿到当前节点的数据,那么新增接口的思路也就有了:

拿到前端传过来的当前节点的数据set 创建时间、更新时间set 好 pos,也就是这个新增的子结点在兄弟节点中的位置顺序set 子结点的层级,也就是当前节点的 level + 1set 子节点的父节点,也就是当前传入接口的节点的 idset 新增节点的名称,=最后进行 insert

1. controller 层

新增对应的控制器方法:

@PostMapping("/add")publicResultaddNode(@RequestBodyApiModulenode){try{System.out.println(node);LongnodeId=apiModuleService.addNode(node);returnResult.success(nodeId);}catch(Exceptione){returnResult.fail(e.toString());}}
2. service 层

实现 addNode 方法:

publicLongaddNode(ApiModulenode){node.setCreateTime(newDate());node.setUpdateTime(newDate());doublepos=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);returnnode.getId();}

这里就是按照上述思路来进行实现,setName 暂时用一个固定值代替,先看下新增接口是否可以正常实现。

这里 pos 处理稍微麻烦一点,这个是代表新增的这个节点处于的位置顺序,所以抽出去新增了一个方法实现getNextLevelPos

privatedoublegetNextLevelPos(LongprojectId,intlevel,LongnodeId){//查询项目下,同parentId下,所有节点QueryWrapper<ApiModule>queryWrapper=newQueryWrapper<>();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,作为下一个returnapiModules.get(0).getPos()+1;}else{//否则就是当前父节点里的第一个子结点,pos直接为1return1;}}

查询项目下,同parentId,所有节点数据,注意这里的查询条件。

.eq("level", level + 1),当前层级 + 1 作为子节点的层级.eq("parentId", nodeId),当前节点作为父节点

然后判断查询出来的结果,如果列表不为空,返回最新的一个子结点的 pos 加上 1,作为下一个子结点的位置。

否则,新增的节点就是当前父节点里的第一个子节点,直接返回 1 ,作为 pos 值。

三、前后端联调

前端写好接口,然后页面里调用接口。

springboot vue前后端接口测试树结点添加功能的方法

调用接口,增加成功提示,然后刷新树列表。

springboot vue前后端接口测试树结点添加功能的方法

功能正常,在对应节点下新增了固定名称“ceshi111”的子结点,并且刷新树,展示出最新数据。

springboot vue前后端接口测试树结点添加功能的方法

四、编辑节点名称

上面完成了,证明功能没啥大问题了,现在只需要解决节点名称编辑的问题。决定还是用对话框 dialog 来解决。

点击添加按钮,打开对话框,可以输入节点名称,然后保存。该对话框同样适用于编辑场景。

在项目管理功能中,已经用过一次对话框,我直接copy过来相关代码,进行修改。

springboot vue前后端接口测试树结点添加功能的方法

对应 return 里:

springboot vue前后端接口测试树结点添加功能的方法

对话框里会有 2 个按钮:取消和保存。当点击保存的按钮的时候,会根据当前是新建还是修改来调用不同的方法。

1. 打开对话框

修改 append 方法,点击新增按钮时候需要打开对话框。

还有一个重要点,因为新增结点需要传入 data,而现在实际进行新增操作的是handleNodeAdd方法。所以需要在打开对话框的时候,把 data 存下来。

于是,在 return 里新建一个字段currentNode: {}:

springboot vue前后端接口测试树结点添加功能的方法

在 append 方法里把 data 赋值给 currentNode:

springboot vue前后端接口测试树结点添加功能的方法

这里this.dialogStatus = 'create'就是显示对话框。

2. 新增节点

在对话框里输入节点名称,点击保存,就好调用handleNodeAdd方法来请求后端接口。

springboot vue前后端接口测试树结点添加功能的方法

因为传给后端的节点名称是我们输入的,所以这里this.currentNode.name = this.form.nodeName即可。

springboot vue前后端接口测试树结点添加功能的方法

请求成功后给个提示,然后清空表单,以免打开对话框后显示上一次的内容。

3. 测试

测试一下功能是否正常,我把项目id=3 下的节点删掉。

springboot vue前后端接口测试树结点添加功能的方法

新增一个测试节点:

springboot vue前后端接口测试树结点添加功能的方法

功能正常。

 </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
本文:springboot vue前后端接口测试树结点添加功能的方法的详细内容,希望对您有所帮助,信息来源于网络。
上一篇:如何使用C++代码实现双向链表下一篇:

3 人围观 / 0 条评论 ↓快速评论↓

(必须)

(必须,保密)

阿狸1 阿狸2 阿狸3 阿狸4 阿狸5 阿狸6 阿狸7 阿狸8 阿狸9 阿狸10 阿狸11 阿狸12 阿狸13 阿狸14 阿狸15 阿狸16 阿狸17 阿狸18