springboot vue接口测试前后端树节点编辑删除功能

 更新时间:2022年05月26日 16:04:36   作者:把苹果咬哭的测试笔记  
这篇文章主要为大家介绍了springboot vue接口测试前后端树节点编辑删除功能,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

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

继续更新。

一、编辑功能

1. 编辑页外显

点击树节点的编辑按钮,打开对话框,展示原有的节点名称。

本来树形控件里没有自带的编辑操作,我直接加了一个按钮在上面,绑定点击事件调用edit(data)方法。

为了确认 data 可用,我在edit方法中打印了一下 data 的内容,是有我需要的字段的:

id 可以传给后端接口用于查询表里的数据,name 可以直接用来外显。

接下来编辑页面点击【保存按钮】的时候,调用的是 handleNodeUpdate 方法,通常需要传当前节点的 id 用于后端查询数据;传入输入的 name,用于节点名称的更新。

2. 实现后端接口

请求实体类

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) {
        // 根据传入的id查询出数据
        ApiModule apiModule = apiModuleDAO.selectById(request.getId());
        // 更新对象属性值,保存
        apiModule.setId(request.getId());
        apiModule.setName(request.getName());
        apiModule.setUpdateTime(new Date());
        apiModuleDAO.updateById(apiModule);
    }

3. 前后联调

完成 handleNodeUpdate 方法:

主要是进行接口的调用以及相关其他处理。

4. 测试

测试修改这个节点:

点击编辑按钮后成功外显。

重命名为修改后名称,点击保存按钮。

功能正常。

二、删除功能

删除功能实现比较简单,前端把当前要删除节点id传给后端,后端删除此id以及所有子节点的数据即可。

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);
  }

注意这里多条件默认情况下是and(),这里需要使用or()

2. 前端实现

增加一个接口:

页面里的删除按钮,绑定一个方法remove(data),data 里可以获取到节点的 id,这个已经在上面编辑功能里证实过了。

直接调用删除接口,完成后再刷新一下树。

3. 测试

删除掉这个节点。

删除成功。

不过后续这里还会有细节需要优化,比如确认弹框、顶层节点不可删除、节点下的所有资源(API和Case)逻辑删除等等。

以上就是springboot vue接口测试前后端树节点编辑删除功能的详细内容,接下来讲进行到接口定义核心功能的开发:接口列表、新增、调试等等,更多关于springboot vue树节点编辑删除的资料请关注脚本之家其它相关文章!

相关文章

  • SpringBoot+WebMagic实现网页爬虫的示例代码

    SpringBoot+WebMagic实现网页爬虫的示例代码

    本文是对spring boot+WebMagic+MyBatis做了整合,使用WebMagic爬取数据,然后通过MyBatis持久化爬取的数据到mysql数据库,具有一定的参考价值,感兴趣的可以了解一下
    2023-10-10
  • Spring Boot集成Druid数据库连接池

    Spring Boot集成Druid数据库连接池

    这篇文章主要介绍了Spring Boot集成Druid数据库连接池,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • Java高级特性基础之反射五连问

    Java高级特性基础之反射五连问

    反射赋予了我们在运行时分析类以及执行类中方法的能力。通过反射你可以获取任意一个类的所有属性和方法,你还可以调用这些方法和属性。本文就来和大家详细聊聊Java中的反射,感兴趣的可以了解一下
    2023-01-01
  • 全面理解Java中的引用传递和值传递

    全面理解Java中的引用传递和值传递

    这篇文章主要介绍了全面理解Java中的引用传递和值传递,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-10-10
  • Spring拦截器HandlerInterceptor接口代码解析

    Spring拦截器HandlerInterceptor接口代码解析

    这篇文章主要介绍了Spring拦截器HandlerInterceptor接口代码解析,具有一定借鉴价值,需要的朋友可以参考下
    2017-12-12
  • Spring整合CXF webservice restful实例详解

    Spring整合CXF webservice restful实例详解

    这篇文章主要为大家详细介绍了Spring整合CXF webservice restful的实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • SpringBoot 内置工具类的使用

    SpringBoot 内置工具类的使用

    本文主要介绍了SpringBoot 内置工具类的使用,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-12-12
  • idea将maven项目改成Spring boot项目的方法步骤

    idea将maven项目改成Spring boot项目的方法步骤

    这篇文章主要介绍了idea将maven项目改成Spring boot项目的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • JavaScript中HTML元素操作的实现

    JavaScript中HTML元素操作的实现

    本文主要介绍了JavaScript中HTML元素操作的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06
  • java四种引用及在LeakCanery中应用详解

    java四种引用及在LeakCanery中应用详解

    这篇文章主要介绍了java四种引用及在LeakCanery中应用,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09

最新评论