springboot vue接口测试HutoolUtil TreeUtil处理树形结构

目录
  • 基于springboot+vue的测试平台开发
    • 一、引用 HutoolUtil
    • 二、建表
    • 三、后端接口实现
      • 1. Controller 层
      • 2. DAO层
      • 3. Service 层
    • 四、测试一下
      • 1. 测试结构数据
      • 2. 测试新增默认

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

继续更新

上次完成了接口定义功能的前端页面,那么后端现在开始逐一实现对应的功能,首先就是提供模块列表接口,这个模块是支持子层级的,所以大概结构是这样:

[
  {
    id: 1,
    label: '默认',
    children: [
      {
        id: 4,
        label: '二级子模块1',
        children: [
          {
            id: 9,
            label: '三级子模块1'
          },
          {
            id: 10,
            label: '三级子模块2'
          }
        ]
      }
    ]
  },
  {
    id: 2,
    label: '一级子模块2',
    children: [
      {
        id: 5,
        label: '二级子模块 1'
      },
      {
        id: 6,
        label: '二级子模块 2'
      }
    ]
  }
]

通常来说,可以写递归代码来找出子层级的数据,然后再进行封装返回出来,比较麻烦。

后来发现 HutoolUtil 中有个工具类 TreeUtil 可以完成我需求,非常便捷,本次就使用它来实现。

HutoolUtil 这个框架还是大奇分享给我的,这货是个测试领域资深大佬,它的公众号里更是干活满满。而且最近他在更新基于python语言的web开发知识,不容错过。
VX搜索【大奇测试开发】即可找到他。

言归正传,下面来完成接口功能的开发。

一、引用 HutoolUtil

Hutool是一个小而全的Java工具类库,通过静态方法封装,降低相关API的学习成本,提高工作效率,使Java拥有函数式语言般的优雅,让Java语言也可以“甜甜的”。

Hutool中的工具方法来自每个用户的精雕细琢,它涵盖了Java开发底层代码中的方方面面,它既是大型项目开发中解决小问题的利器,也是小型项目中的效率担当;

Hutool是项目中“util”包友好的替代,它节省了开发人员对项目中公用类和公用工具方法的封装时间,使开发专注于业务,同时可以最大限度的避免封装不完善带来的bug。

要使用它直接添加依赖即可:

<!--hutool-->
    <dependency>
        <groupId>cn.hutool</groupId>
        <artifactId>hutool-all</artifactId>
        <version>5.7.12</version>
    </dependency>

官方文档:https://www.hutool.cn/docs/#/

内容很详细,不仅后面的树结构工具,像常用的集合类、JSON、日志、缓存、文件、线程和并发等等应有尽有。

二、建表

给模块建一张新表api_module:

CREATE TABLE `api_module` (
  `id` bigint NOT NULL AUTO_INCREMENT COMMENT 'id',
  `projectId` bigint NOT NULL COMMENT '该节点所属项目id',
  `name` varchar(64) COLLATE utf8mb4_general_ci NOT NULL COMMENT '节点名称',
  `parentId` varchar(50) COLLATE utf8mb4_general_ci DEFAULT NULL COMMENT '父节点id',
  `level` int DEFAULT '1' COMMENT '节点层级',
  `createTime` datetime NOT NULL DEFAULT '1900-01-01 00:00:00' COMMENT '创建时间',
  `updateTime` datetime NOT NULL DEFAULT '1900-01-01 00:00:00' COMMENT '更新时间',
  `pos` double DEFAULT NULL COMMENT '节点顺序位置',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci COMMENT='模块表';

重要字段:

projectId:与项目进行关联

parentId:该节点的父节点,一级目录的父节点我会设置为 0 。

level:该节点对应层级,从 1 开始。

pos:表示该节点在父节点下的位置顺序。

三、后端接口实现

1. Controller 层

新建 ApiModuleController 类,添加一个处理器方法 getNodeByProjectId,通过项目 ID 查询出下面的所有模块。

package com.pingguo.bloomtest.controller;

import com.pingguo.bloomtest.common.Result;
import com.pingguo.bloomtest.service.ApiModuleService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("module")
public class ApiModuleController {

    @Autowired
    ApiModuleService apiModuleService;

    @GetMapping("/list/{projectId}")
    public Result getNodeByProjectId(@PathVariable Long projectId) {
        return Result.success(apiModuleService.getNodeTreeByProjectId(projectId));
    }
}

2. DAO层

dao 层自然也要有。

package com.pingguo.bloomtest.dao;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.pingguo.bloomtest.pojo.ApiModule;
import org.springframework.stereotype.Repository;

@Repository
public interface ApiModuleDAO extends BaseMapper<ApiModule> {
}

3. Service 层

实现 getNodeTreeByProjectId 方法。

public List<Tree<String>> getNodeTreeByProjectId(Long projectId) {
        this.getDefaultNode(projectId);
        // 根据 projectId 查询所有节点
        QueryWrapper<ApiModule> wrapperApiModule = new QueryWrapper<>();
        List<ApiModule> apiModules = apiModuleDAO.selectList(wrapperApiModule.eq("projectId", projectId));
        // 配置
        TreeNodeConfig treeNodeConfig = new TreeNodeConfig();
        // 自定义属性名 ,即返回列表里对象的字段名
        treeNodeConfig.setIdKey("id");
        treeNodeConfig.setWeightKey("pos");
        treeNodeConfig.setParentIdKey("parentId");
        treeNodeConfig.setChildrenKey("children");
        // 最大递归深度
//        treeNodeConfig.setDeep(5);
        treeNodeConfig.setNameKey("name");
        //转换器
        List<Tree<String>> treeNodes = TreeUtil.build(apiModules, "0", treeNodeConfig,
                (treeNode, tree) -> {
                    tree.setId(treeNode.getId().toString());
                    tree.setParentId(treeNode.getParentId().toString());
                    tree.setWeight(treeNode.getPos());
                    tree.setName(treeNode.getName());
                    // 扩展属性 ...
                    tree.putExtra("projectId", treeNode.getProjectId());
                    tree.putExtra("level", treeNode.getLevel());
                    tree.putExtra("label", treeNode.getName());
                    tree.putExtra("createTime", treeNode.getCreateTime());
                    tree.putExtra("updateTime", treeNode.getUpdateTime());

                });
        return treeNodes;

    }

这里开头有个方法 getDefaultNode,在这里面会判断当前项目下是否有默认模块,没有则添加默认模块。

private void getDefaultNode(Long projectId) {
        QueryWrapper<ApiModule> wrapperApiModule = new QueryWrapper<>();
        wrapperApiModule.eq("projectId", projectId)
                        .eq("pos", 1.0);
        // 判断当前项目下是否有默认模块,没有则添加默认模块
        if (apiModuleDAO.selectCount(wrapperApiModule) == 0) {
            ApiModule apiModule = new ApiModule();
            apiModule.setName("默认");
            apiModule.setPos(1.0);
            apiModule.setLevel(1);
            apiModule.setParentId(0L);
            apiModule.setCreateTime(new Date());
            apiModule.setUpdateTime(new Date());
            apiModule.setProjectId(projectId);
            apiModuleDAO.insert(apiModule);
        }
    }

然后通过 项目id 把项目下所有的数据查询出来:

接下来使用 TreeUtil 来完成树结构处理。

首先,创建一个配置类 TreeNodeConfig 对象,在这个对象里设置属性,对应的就是返回出来的字段名。

还可以设置最大递归深度,也可以不设。我测试之后就注释掉了,先不加限制。

最后就是构建树结构 treeNodes,完成处理后返回给 controller 层。

因为我要返回的还有其他的字段,可以使用tree.putExtra来添加要返回的其他字段,比如:

tree.putExtra("projectId", treeNode.getProjectId());

第一个参数是定义的字段名称,第二个参数就是使用这个结点的 get 方法获取对应的属性值。

最后返回到上层的是List<Tree<String>>类型,可以直接塞到统一结果里去返回。

四、测试一下

1. 测试结构数据

测试一下接口,先手动网表里插入了对应结构的数据。

请求接口,传入 projectId 为 3。

{
    "code": 20000,
    "message": "成功",
    "data": [
        {
            "id": "9",
            "parentId": "0",
            "pos": 1.0,
            "name": "默认",
            "projectId": 3,
            "level": 1,
            "label": "默认",
            "createTime": "2021-09-29 10:50:00",
            "updateTime": "2021-09-29 10:50:00",
            "children": [
                {
                    "id": "14",
                    "parentId": "9",
                    "pos": 1.0,
                    "name": "默认-2",
                    "projectId": 3,
                    "level": 2,
                    "label": "默认-2",
                    "createTime": "1900-01-01 08:00:00",
                    "updateTime": "1900-01-01 08:00:00"
                },
                {
                    "id": "10",
                    "parentId": "9",
                    "pos": 1.0,
                    "name": "默认-1",
                    "projectId": 3,
                    "level": 2,
                    "label": "默认-1",
                    "createTime": "2021-10-01 08:00:00",
                    "updateTime": "1900-01-01 08:00:00",
                    "children": [
                        {
                            "id": "11",
                            "parentId": "10",
                            "pos": 1.0,
                            "name": "默认-1-1",
                            "projectId": 3,
                            "level": 3,
                            "label": "默认-1-1",
                            "createTime": "1900-01-01 08:00:00",
                            "updateTime": "1900-01-01 08:00:00",
                            "children": [
                                {
                                    "id": "12",
                                    "parentId": "11",
                                    "pos": 1.0,
                                    "name": "默认-1-1-1",
                                    "projectId": 3,
                                    "level": 4,
                                    "label": "默认-1-1-1",
                                    "createTime": "1900-01-01 08:00:00",
                                    "updateTime": "1900-01-01 08:00:00",
                                    "children": [
                                        {
                                            "id": "13",
                                            "parentId": "12",
                                            "pos": 1.0,
                                            "name": "默认-1-1-1-1",
                                            "projectId": 3,
                                            "level": 5,
                                            "label": "默认-1-1-1-1",
                                            "createTime": "1900-01-01 08:00:00",
                                            "updateTime": "1900-01-01 08:00:00"
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

结果正确。

2. 测试新增默认

传入一个 projectId 为 4 ,localhost:8080/bloomtest/module/list/4:

{
    "code": 20000,
    "message": "成功",
    "data": [
        {
            "id": "15",
            "parentId": "0",
            "pos": 1.0,
            "name": "默认",
            "projectId": 4,
            "level": 1,
            "label": "默认",
            "createTime": "2021-10-01 12:25:54",
            "updateTime": "2021-10-01 12:25:54"
        }
    ]
}

返回正确。

落库正常。

以上就是springboot vue接口测试HutoolUtil TreeUtil处理树形结构的详细内容,更多关于HutoolUtil TreeUtil处理树形结构的资料请关注我们其它相关文章!

(0)

相关推荐

  • springboot vue接口测试定义编辑功能的实现

    目录 基于springboot+vue 的测试平台开发 一.后端 1. 查询接口 2. 更新接口 二.前端 1. 实现编辑外显 2. 实现接口更新 基于springboot+vue 的测试平台开发 继续更新 额,昨天还说编辑不着急做,但是我发现如果不做,那么在做接口发送功能的时候,我需要反复新增新的接口来调试,那就先做了. 一.后端 后端要增加2个接口:根据接口ID查询.更新接口. 1. 查询接口 @GetMapping("/getApi") public Result getApiB

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

    目录 基于springboot+vue 的测试平台开发 一.编辑功能 1. 编辑页外显 2. 实现后端接口 3. 前后联调 4. 测试 二.删除功能 1. 后端接口 2. 前端实现 3. 测试 基于springboot+vue 的测试平台开发 继续更新. 一.编辑功能 1. 编辑页外显 点击树节点的编辑按钮,打开对话框,展示原有的节点名称. 本来树形控件里没有自带的编辑操作,我直接加了一个按钮在上面,绑定点击事件调用edit(data)方法. 为了确认 data 可用,我在edit方法中打印了一

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

    目录 基于springboot+vue的测试平台开发 一.前端Tree树形控件的append方法 二.后端实现节点新增接口 1. controller 层 2. service 层 三.前后端联调 四.编辑节点名称 1. 打开对话框 2. 新增节点 3. 测试 基于springboot+vue的测试平台开发 继续更新. 一.前端Tree树形控件的append方法 在elementUI 树控件下有个append方法,可以用来为 Tree 中的一个节点追加一个子节点. 目前我们已经完成了树列表的接口

  • springboot vue测试列表递归查询子节点下的接口功能实现

    目录 基于 springboot+vue 的测试平台开发 一.后端 1. 建表 2. 列表接口 二.前端 1. 准备工作 2. 请求接口 3. 测试效果 4. 发现问题 基于 springboot+vue 的测试平台开发 继续更新 模块树节点的开发暂告一段落,现在开发右边接口相关的部分,今天先完成列表的功能. 功能是这样,当点击树的某个节点时候,右侧列表展示这个节点下的所有接口,带分页(最终效果图). 需要注意的是,因为节点下还有子节点,所以列表的功能需要使用递归来查询. 一.后端 1. 建表

  • springboot vue接口测试前端动态增删表单功能实现

    目录 基于 springboot+vue 的测试平台开发 页面实现 1. 基础信息部分 2. 请求参数部分 3. 响应内容部分 基于 springboot+vue 的测试平台开发 继续更新 目前已经进入到接口定义功能的开发阶段,首先我还是直接在前段画了个大概的页面,先预览下: 不过目前只是画了这个页面都主要功能,细节未尽事宜待具体开发的时候再进一步完善. 从上面动态图上已经显示了大概情况,主要是创建接口的功能,其中还支持发送调试.发送请求的功能就直接参考 postman,用起来习惯. 页面实现

  • springboot vue测试平台接口定义前后端新增功能实现

    目录 开发继续更新 一.后端部分 二.前端部分 1. rest参数 2. 请求体 3. 请求参数 4. 请求接口 基于 springboot+vue 的测试平台 开发继续更新 上节画了大概的前端页面,今天主要来实现后端接口,然后调通前后端实现接口新增功能.先预览下效果: 老规矩,分为前后端讲解. 一.后端部分 在 ApiDefinitionController 类中新增一个处理方法,处理接口的新增请求: @PostMapping("/add") public Result add(@R

  • springboot vue接口测试HutoolUtil TreeUtil处理树形结构

    目录 基于springboot+vue的测试平台开发 一.引用 HutoolUtil 二.建表 三.后端接口实现 1. Controller 层 2. DAO层 3. Service 层 四.测试一下 1. 测试结构数据 2. 测试新增默认 基于springboot+vue的测试平台开发 继续更新 上次完成了接口定义功能的前端页面,那么后端现在开始逐一实现对应的功能,首先就是提供模块列表接口,这个模块是支持子层级的,所以大概结构是这样: [ { id: 1, label: '默认', child

  • springboot vue接口测试前后端实现模块树列表功能

    目录 基于 springboot+vue 的测试平台 一.存放接口的js文件 二.在vue文件中调用接口 1. 触发接口 2. 调用接口 三.实现选择项目功能 1. 后端增加获取所有项目接口 2. 前端调用接口 3. 选择项目触发模块树接口 4. 测试一下 基于 springboot+vue 的测试平台 开发继续更新. 上一篇完成了模块树的列表接口,接下来可以和前端页面联调了. 一.存放接口的js文件 老样子,新建js文件,把要调用的后端接口请求封装在 src/api/apiModule.js这

  • vue Element-ui表格实现树形结构表格

    本文实例为大家分享了Element-ui表格实现树形结构表格的具体代码,供大家参考,具体内容如下 前端效果展示: 在el-table中,支持树类型的数据的显示.当 row 中包含 children 字段时,被视为树形数据.渲染树形数据时,必须要指定 row-key.支持子节点数据异步加载. 通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点.children 与 hasChildren 都可以通过 tree-props 配置. row-key="id"和:tr

  • Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)

    数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout.js的实现方法. html代码 <div id="table-component-div"> <table-component v-for="item in data1" v-bind:list="item"></ta

  • vue.js与element-ui实现菜单树形结构的解决方法

    由于业务需要,要求实现树形菜单,且菜单数据由后台返回,在网上找了几篇文章,看下来总算有了解决办法. 场景:根据业务要求,需要实现活动的树形菜单,菜单数据由后台返回,最后的效果图如下: 后台返回的数据格式是这个样子的: data=[{ pID:'1',//父ID name:'目录一', menuID:'m1',//本身ID isContent:false//判断是否是目录 }, { pID:'1', name:'目录二', menuID:'m2', isContent:false }, { pID

  • vue实现的树形结构加多选框示例

    本文实例讲述了vue实现的树形结构加多选框.分享给大家供大家参考,具体如下: 前面说了如何用递归组件来写vue树形结构,写了树形结构还要在前面加多选框,然后往数组里push选项,并在左边显示出来,然后左边进行拖拽排序,拖拽排序上一篇文章我已经介绍过了,在这我就不介绍了,如何用阿里巴巴矢量图标库我也有相关文章,也不介绍了,本节主要介绍vue树形结构加多选框,并实现一定的逻辑,比如全选,单选,全选和单选之间的联动 先看下目录结构 下面我直接贴下代码 首先是pages文件夹中tree.vue页面中引用

随机推荐