spirngboot +vue +mybatis后端查询其他表的数据来实现(年月树)没有父子关系的实体来支撑 封装树结构实现前端的使用(年月来实现)

后端封装树结构实现前端的使用(年月来实现)

数据库样式(主要针对时间业务年月)

1.时间格式:2022-07-22 16:37:33
2.注意我的时间是自动插入;
3.实体类没指定时区没做UTF-8处理
4.所以查询出来的是Tue May 23 22:46:47 CST 2023111

后端代码

1. 创建树的工具类工具类(主要是要实现的年月树没有父子关系只能自己进行设置和截取来实现实体封装)
package com.ruoyi.meeting.domain;
import org.apache.poi.ss.formula.functions.T;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.*;
//1.树形工具类(自己封装)
public class TreeBuild {
//2.封装存储的年的截取信息
private String year;
//3.封装孩子节点的List
private List child;
//4.get和set和toString
public String getYear() {
return year;
}
public void setYear(String year) {
this.year = year;
}
public List getChild() {
return child;
}
public void setChild(List child) {
this.child = child;
}
@Override
public String toString() {
return “TreeBuild{” +
“year='” + year + ‘’’ +
“, moon='” + moon + ‘’’ +
“, child=” + child +
‘}’;
}
//5.无参数构造(必须实现)应为下面的代码需要创建对象来实现返回值
public TreeBuild() {
}
//6.接收其他表的查询的全部数据(其他的表的全部数据)
private List nodeList=new ArrayList<>();
//参数构造函数用于后期new 对象传入对应的数据
public TreeBuild(List list){
this.nodeList = list;
}
//7.创建年为父节点
Set(注意:一定为Set应为显示的年一般不会重复)节点结合
Set rootNodeList=new HashSet<>();
//获取父节点年的方法
public Set getRootNode() {
Set setList=new HashSet<>();
//便利每一条数据来获取跟节点
for (MmMeeting treeNode : nodeList){
// 判断当前节点是否为根节点,
//此处注意:判断数据的查询的结果是否为空
if(treeNode.getCreateBy()!=null){
//格式化数据库时间Tue May 23 22:46:47 CST 2023111
SimpleDateFormat sdf = new SimpleDateFormat(“yyyy-MM-dd hh:mm:ss”);
//格式化数据库时间Tue May 23 22:46:47 CST 2023111
String datef = sdf.format(treeNode.getCreateTime());
//截取年来做父节点
String TimeYear=datef.substring(0,4);
//添加为一个Set集合主要是实现年去重
setList.add(TimeYear);
}
}
//遍历年的集合
for (String s : setList) {
//创建对象将年的数据set进入成员变量(实体类的属性)
TreeBuild treeBuild=new TreeBuild();
treeBuild.setYear(s);
System.out.println(treeBuild);
//将该对象返回(注意看我的返回值,本人亲自尝试过:树结构必须返回一个对象的形式,返回其他的你做不出效果少走弯路)
rootNodeList.add(treeBuild);
}
//返回Set<对象>集合
return rootNodeList;
}
/**
* 根据每一个顶级节点(根节点)进行构建树形结构
* @return 构建整棵树
/
public Set buildTree(){
// treeNodes:保存一个顶级节点所构建出来的完整树形
Set treeNodes = new HashSet<>();
// getRootNode():获取所有的根节点
for (TreeBuild treeRootNode : getRootNode()) {
// 将顶级节点进行构建子树
treeRootNode = buildChildTree(treeRootNode);
// 完成一个顶级节点所构建的树形,增加进来
treeNodes.add(treeRootNode);
}
return treeNodes;
}
/
*
* 递归-----构建子树形结构
* @param pNode 根节点(顶级节点)
* @return 整棵树
*/
public TreeBuild buildChildTree(TreeBuild pNode){
List childTree = new ArrayList();
Set setListRoot = new HashSet<>();
// nodeList:所有节点集合(所有数据)
for (MmMeeting treeNode : nodeList) {
//格式化数据库时间Tue May 23 22:46:47 CST 2023111
SimpleDateFormat sdf = new SimpleDateFormat(“yyyy-MM-dd hh:mm:ss”);
//格式化数据库时间Tue May 23 22:46:47 CST 2023111
String datef = sdf.format(treeNode.getCreateTime());
//截取年来做父节点
String TimeYear = datef.substring(0, 4);
// 判断当前节点的父节点ID是否等于根节点的ID,即当前节点为其下的子节点
if (TimeYear.equals(pNode.getYear())) {
// 再递归进行判断当前节点的情况,调用自身方法buildChildTree(treeNode)
//实现去重月
setListRoot.add(sdf.format(treeNode.getCreateTime()).substring(5, 7));
}
}
for (String s : setListRoot) {
TreeBuild treeBuild=new TreeBuild();
//注意(因为ElmentUI的默认显示
defaultProps: {
children: ‘children’,
label: ‘label’
}
};所以你的孩子节点的命名也得是 year ,label: ‘label’)
//添加孩子节点的数据
treeBuild.setYear(s);
childTree.add(treeBuild);
}
// for循环结束,即节点下没有任何节点,树形构建结束,设置树结果
pNode.setChild(childTree);
return pNode;
}
}

后端的接口
    @GetMapping(value = "/getTree/getTime")
    public String getTree() throws ParseException {
        List<MmMeeting> list=mmMeetingService.getTreeGetTime();
        Set<TreeBuild> terr=  new TreeBuild(list).buildTree();
        return JSON.toJSONString(terr);
    }
}
前端vue
界面:
 <el-tree :data="Tree" :props="defaultProps" @node-click="handleNodeClick" ></el-tree>
 数据(注意仔细看):
 //这个是elmenTUi的数据样式
 data: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        },
 **************
data{
 Tree:[],
      defaultProps: {
      遍历数据之后一定需要修改这里,应为这里是决定你前端的数据显示
        children: 'child',
        //所以为什么我的后端需要设置一样的命名了
        label: 'year'
      },
}
请求:
  listTree().then(res=>{
        this.Tree=res;
      })
    },

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值