springboot vue前后端接口测试树结点添加功能
目录
- 基于springboot+vue的测试平台开发
- 一、前端Tree树形控件的append方法
- 二、后端实现节点新增接口
- 1. controller 层
- 2. service 层
- 三、前后端联调
- 四、编辑节点名称
- 1. 打开对话框
- 2. 新增节点
- 3. 测试
基于springboot+vue的测试平台开发
继续更新。
一、前端Tree树形控件的append方法
在elementUI 树控件下有个append方法，可以用来为 Tree 中的一个节点追加一个子节点。
目前我们已经完成了树列表的接口，可以在 append 方法中输出一下传入的 data 里到底是什么。
console.log('传入的node：' + JSON.stringify(data))
点击顶层的默认节点，F12 查看控制台，
可以看到：
格式化看下其实就是整个节点的树形结构。点击哪一个节点，data 内容就是这个节点下的所有节点数据。
但实际上，我只需要当前点击的节点的数据即可，这个节点下的 children 可以不关心，不过考虑到数据量也不大，就整个传给后端好了。
二、后端实现节点新增接口
我要实现的功能是点击哪个节点的添加按钮，就是添加这个节点的子节点，比如：
既然前端可以拿到当前节点的数据，那么新增接口的思路也就有了：
拿到前端传过来的当前节点的数据set 创建时间、更新时间set 好 pos，也就是这个新增的子结点在兄弟节点中的位置顺序set 子结点的层级，也就是当前节点的 level + 1set 子节点的父节点，也就是当前传入接口的节点的 idset 新增节点的名称，=最后进行 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 下的节点删掉。
新增一个测试节点：
功能正常。
以上就是springboot vue前后端接口测试树结点添加功能的详细内容，更多关于springboot vue接口测试树结点添加的资料请关注我们其它相关文章！
相关推荐
-
springboot vue测试平台接口定义前后端新增功能实现
目录 开发继续更新 一.后端部分 二.前端部分 1. rest参数 2. 请求体 3. 请求参数 4. 请求接口 基于 springboot+vue 的测试平台 开发继续更新 上节画了大概的前端页面,今天主要来实现后端接口,然后调通前后端实现接口新增功能.先预览下效果: 老规矩,分为前后端讲解. 一.后端部分 在 ApiDefinitionController 类中新增一个处理方法,处理接口的新增请求: @PostMapping("/add") public Result add(@R
-
springboot vue接口测试前后端树节点编辑删除功能
目录 基于springboot+vue 的测试平台开发 一.编辑功能 1. 编辑页外显 2. 实现后端接口 3. 前后联调 4. 测试 二.删除功能 1. 后端接口 2. 前端实现 3. 测试 基于springboot+vue 的测试平台开发 继续更新. 一.编辑功能 1. 编辑页外显 点击树节点的编辑按钮,打开对话框,展示原有的节点名称. 本来树形控件里没有自带的编辑操作,我直接加了一个按钮在上面,绑定点击事件调用edit(data)方法. 为了确认 data 可用,我在edit方法中打印了一
-
springboot vue接口测试定义编辑功能的实现
目录 基于springboot+vue 的测试平台开发 一.后端 1. 查询接口 2. 更新接口 二.前端 1. 实现编辑外显 2. 实现接口更新 基于springboot+vue 的测试平台开发 继续更新 额,昨天还说编辑不着急做,但是我发现如果不做,那么在做接口发送功能的时候,我需要反复新增新的接口来调试,那就先做了. 一.后端 后端要增加2个接口:根据接口ID查询.更新接口. 1. 查询接口 @GetMapping("/getApi") public Result getApiB
-
springboot vue测试平台接口定义及发送请求功能实现
目录 基于 springboot+vue 的测试平台开发 一.http客户端选型 二.后端接口实现 1. controller 层 2. service 层 三.前端实现 四.修改遗留 bug 基于 springboot+vue 的测试平台开发 继续更新 添加的接口,我要来调试确定是否是通的,那么要发送接口请求,今天来实现这个功能,先预览一下: 捋一下思路,分为三步走: 点击发送按钮,调用后端接口后端接口处理内部,发送http接口请求后端接口把响应返回给前端展示 一.http客户端选型 为了更方
-
springboot vue接口测试前端动态增删表单功能实现
目录 基于 springboot+vue 的测试平台开发 页面实现 1. 基础信息部分 2. 请求参数部分 3. 响应内容部分 基于 springboot+vue 的测试平台开发 继续更新 目前已经进入到接口定义功能的开发阶段,首先我还是直接在前段画了个大概的页面,先预览下: 不过目前只是画了这个页面都主要功能,细节未尽事宜待具体开发的时候再进一步完善. 从上面动态图上已经显示了大概情况,主要是创建接口的功能,其中还支持发送调试.发送请求的功能就直接参考 postman,用起来习惯. 页面实现
-
springboot vue测试列表递归查询子节点下的接口功能实现
目录 基于 springboot+vue 的测试平台开发 一.后端 1. 建表 2. 列表接口 二.前端 1. 准备工作 2. 请求接口 3. 测试效果 4. 发现问题 基于 springboot+vue 的测试平台开发 继续更新 模块树节点的开发暂告一段落,现在开发右边接口相关的部分,今天先完成列表的功能. 功能是这样,当点击树的某个节点时候,右侧列表展示这个节点下的所有接口,带分页(最终效果图). 需要注意的是,因为节点下还有子节点,所以列表的功能需要使用递归来查询. 一.后端 1. 建表
-
springboot vue前后端接口测试树结点添加功能
目录 基于springboot+vue的测试平台开发 一.前端Tree树形控件的append方法 二.后端实现节点新增接口 1. controller 层 2. service 层 三.前后端联调 四.编辑节点名称 1. 打开对话框 2. 新增节点 3. 测试 基于springboot+vue的测试平台开发 继续更新. 一.前端Tree树形控件的append方法 在elementUI 树控件下有个append方法,可以用来为 Tree 中的一个节点追加一个子节点. 目前我们已经完成了树列表的接口
-
SpringBoot+Vue 前后端合并部署的配置方法
前后端分离开发项目 前端vue项目 服务端springboot项目 如何将vue的静态资源整合到springboot项目里,通过启动jar包的方式部署服务. 前端项目执行npm run build命令进行打包,会自动生成打包后的dist目录文件所有东西放置在Resources/static文件下,如下图 此处index.html文件的资源路径(需要在前端打包配置中进行配置)应该如下图: 对应的springboot:application.yml需添加: server: port: 8080 to
-
springboot+VUE前后端分离实现疫情防疫平台JAVA
目录 主要模块: 系统主要实现如下: 登录之后进入系统首页:目前系统主要功能如下 用户管理模块:用户添加.修改.删除.查询等基本操作 角色管理模块.通过用户绑定角色.角色控制菜单显示.灵活控制菜单. 前端VUE代码添加菜单 菜单添加修改列表层操作 历史行程数据管理:添加修改删除等操作 用户每日健康打卡列表数据展示以及添加打卡信息 员工出行外出报备管理申请 员工复工申请 管理员审核 通知公告模块: 一些设计报告和文档描述参考 数据库连接: 主要模块: 管理员用户登录:用户登录. 用户信息: 用户信
-
SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权限问题的解决方法
当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异.笔者前几天刚好在负责一个项目的权限管理模块,现在权限管理模块已经做完了,我想通过5-6篇文章,来介绍一下项目中遇到的问题以及我的解决方案,希望这个系列能够给小伙伴一些帮助.本系列文章并不是手把手的教程,主要介绍了核心思路并讲解了核心代码,完整的代码小伙伴们可以在GitHub上star并clone下来研究.另外,原本计划把项目跑起来放到网上供小伙伴们查看,但是之前买服务器为了省钱,内存只有512M,两个应用跑不起来(已经有一个V部落开
-
SpringBoot+Vue前后端分离实现请求api跨域问题
前言 最近过年在家无聊,刚好有大把时间学习Vue,顺便做了一个增删查改+关键字匹配+分页的小dome,可是使用Vue请求后端提供的Api的时候确发现一个大问题,前后端分离了,但是请求的时候也就必定会有跨域这种问题,那如何解决呢? 前端解决方案 思路:由于Vue现在大多数项目但是用脚手架快速搭建的,所以我们可以直接在项目中创建一个vue.config.js的配置文件,然后在里面配置proxy代理来解决,话不多说,直接上代码 module.exports = { devServer: { proxy
-
SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建过程(前端篇)
后端篇 SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建[后端篇][快速生成后端代码.封装结果集.增删改查.模糊查找][毕设基础框架] 前端篇 创建vue项目 1.找个文件夹进入命令行,输入:vue create vue-front 2.直接回车,等待片刻,稍微有点小久 3.根据提示指令测试 打开浏览器输入:http://localhost:8080/ 安装所需工具 安装的工具会有点多,为了提供更好的拓展性,可以自主选择安装(不建议),后面的代码中都是使用到了,不安装
-
SpringBoot+MyBatisPlus+Vue 前后端分离项目快速搭建过程(后端)
数据库准备 data_test.sql: /* SQLyog Enterprise v12.08 (64 bit) MySQL - 5.7.31 : Database - data_test ********************************************************************* */ /*!40101 SET NAMES utf8 */; /*!40101 SET SQL_MODE=''*/; /*!40014 SET @OLD_UNIQUE_
-
基于Java SpringBoot的前后端分离信息管理系统的设计和实现
目录 前言 视频演示 主要功能说明 功能截图 主要代码实现 主要数据表设计 前言 当今社会,随着科学技术的发展,以及市场经济的多元化,使人才的流动速度大大增加,因此也对党建工作的管理层面工作带来了空前且复杂的挑战, 从而使得如何高效的开展管理党建工作成为了亟待解决的问题.为此将高速发展的信息科学技术引入到党建工作管理的应用中,力求合理有效的提升全面各项工作的进展,实现以人为本的科学发展思想和意识,是一种高效可实现的方法. Java作为一种面向对象的.可以撰写跨平台应用软件的程序设计语言,其技术具
-
Spring Boot和Vue前后端分离项目架构的全过程
目录 Spring Boot+Vue 前后端分离项目架构 1. SpringBoot 后端项目 2. Vue 前端项目 总结 Spring Boot+Vue 前后端分离项目架构 项目流程: 1. SpringBoot 后端项目 1.新建一个 SpringBoot 工程,并添加项目开发过程中需要的相关依赖: 2.数据库新建 book 数据表: -- ---------------------------- -- Table structure for book -- ---------------
-
SpringBoot Security前后端分离登录验证的实现
最近一段时间在研究OAuth2的使用,想整个单点登录,从网上找了很多demo都没有实施成功,也许是因为压根就不懂OAuth2的原理导致.有那么几天,越来越没有头绪,又不能放弃,转过头来一想,OAuth2是在Security的基础上扩展的,对于Security自己都是一无所知,干脆就先研究一下Security吧,先把Security搭建起来,找找感觉. 说干就干,在现成的SpringBoot 2.1.4.RELEASE环境下,进行Security的使用. 简单的Security的使用就不说了,目前