Tree结构目录场景

概述
- 技术栈：
- 内容：
步骤
- 1. 新建项目
- 2. 整合SSM
- 3. 在`application.yaml`中配置端口和数据库连接
- 4. 编写`Category`相关`bean`、`mapper`、`service`和`controller`
- - 数据库表
  - pojo
  - mapper
  - service & serviceImpl
  - controller
  - 测试整合SSM：`@MapperScan("com.yue.mapper")`
- 5. 使用stream流完成分类的递归的相关操作
- - （1）定义接口
  - （2）递归实现：
- 6. 使用axios完成异步接口的调用
- - 概述
  - 测试引入`axios.js`是否成功：
  - 测试结果：引入成功
  - 调用代码
  - 测试调用结果：调用成功
- 7. 使用vue的组件和递归组件完成tree结构
- - 基础框架实现
  - 添加图标

概述技术栈：

springBoot
Mybatis-Plus
Vue
stream

内容：

做一个目录场景

步骤 1. 新建项目

2. 整合SSM

在pom文件中整合ssm相关的依赖


    org.springframework.boot
    spring-boot-starter-freemarker




    mysql
    mysql-connector-java
    8.0.26




    com.baomidou
    mybatis-plus-boot-starter
    3.4.2




    org.springframework.boot
    spring-boot-starter-web




    org.projectlombok
    lombok
    true
    1.18.20




    org.springframework.boot
    spring-boot-starter-test
    test



    org.apache.commons
    commons-lang3
    3.12.0

3. 在application.yaml中配置端口和数据库连接

logging.level：设置日志级别，后面跟生效的区域，比如root表示整个项目，也可以设置为某个包下，也可以具体到某个类名（日志级别的值不区分大小写）

server:
  port: 9100 # 端口号

spring:
  freemarker: # freemarker模板引入
    suffix: .html # 模板后缀
    cache: false # 关闭缓存
  jackson: # 日期格式化
    date-format: yyyy-MM-dd HH:mm:ss
    time-zone: GMT+8 # 时区
    locale: zh_CN
    generator: # 数据处理（防止精度丢失）
      write-numbers-as-strings: true
      write-bigdecimal-as-plain: true
    serialization:
      write-dates-as-timestamps: false
  datasource:  #数据源
    type: com.zaxxer.hikari.HikariDataSource
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://127.0.0.1:3306/yue-user-cours-db?serverTimezone=GMT%2b8&useUnicode=true&characterEncoding=utf-8&useSSL=false #数据库
    username: root
    password:
    hikari:
      connection-timeout: 60000
      validation-timeout: 3000
      idle-timeout: 60000
      login-timeout: 5
      max-lifetime: 60000
      maximum-pool-size: 30
      minimum-idle: 10
      read-only: false

# mybatis-plus配置
mybatis-plus:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  mapper-locations: classpath*:/mapper
@Data
@ToString
@AllArgsConstructor
@NoArgsConstructor
@Builder
@TableName("kss_course_category")
public class CourseCategory implements java.io.Serializable{

    @TableId(type = IdType.AUTO)
    private Integer id;
    // 上课标题
    private String title;
    // 分类描述
    private String descrciption;
    // 是否更新
    private Integer mark;
    // 发布状态1发布 0未发布
    private Integer status;
    // 类型 1文件夹 2文件
    private Integer type;
    // 父id =0 根集 其它全部都是子集(节点pid对映哪个id就说明其是哪个节点的子节点)
    private Integer pid;
    // 是否展开和收起
    private Boolean isexpand;
    // 子节点集合：这里一定加exist=false ,代表当前这个字段不在表中，不加就会报错
    @TableField(exist = false)
    private List chilrenList;
    // 创建时间
    @TableField(fill = FieldFill.INSERT)//在新增的时候填充
    private Date createTime;
    // 更新时间
    @TableField(fill = FieldFill.INSERT_UPDATE)//在新增的时候填充
    private Date updateTime;
}

mapper

baseMapper 接口:Mapper 继承该接口后，无需编写 mapper.xml 文件，即可获得CRUD功能,其全限定名称为com.baomidou.mybatisplus.core.mapper.baseMapper，该接口提供了插入、修改、删除和查询功能。我们可以在测试类中直接使用了insert()、selectById()、updateById()和 deleteById()方法

baseMapper部分源码截图：

package com.yue.mapper;

import com.baomidou.mybatisplus.core.mapper.baseMapper;
import com.yue.pojo.CourseCategory;


public interface CourseCategoryMapper extends baseMapper {
}

service & serviceImpl

IService 接口:Mapper 继承该接口后，即可获得CRUD功能,其全限定名称为com.baomidou.mybatisplus.extension.service.使用该接口时，其实现类也必须继承ServiceImpl类

IService接口部分源码截图：

ServiceImpl类部分源码截图

接口：

package com.yue.service;

import com.baomidou.mybatisplus.extension.service.IService;
import com.yue.pojo.CourseCategory;


public interface CourseCategoryService extends IService {
}

实现类：

package com.yue.service;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.yue.mapper.CourseCategoryMapper;
import com.yue.pojo.CourseCategory;
import lombok.extern.log4j.Log4j2;
import org.springframework.stereotype.Service;


@Service
@Log4j2
public class CourseCategoryServiceImpl extends ServiceImpl implements CourseCategoryService {
}

controller

package com.yue.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;


@RestController
public class CourseCategoryController {
    @GetMapping("/api/category/tree")
    public String tree(){
        return "tree";
    }
}

测试整合SSM：@MapperScan("com.yue.mapper")

package com.yue;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
@MapperScan("com.yue.mapper")
public class YeyuStreamVueTreeApplication {

    public static void main(String[] args) {
        SpringApplication.run(YeyuStreamVueTreeApplication.class, args);
    }

}

进行查询测试：

package com.yue.controller;

import com.yue.pojo.CourseCategory;
import com.yue.service.CourseCategoryService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;


@RestController
public class CourseCategoryController {

    @Autowired
    private  CourseCategoryService courseCategoryService;

    @GetMapping("/api/category/tree")
    public List tree(){
        return courseCategoryService.list();
    }
}

http://localhost:9100/api/category/tree：

5. 使用stream流完成分类的递归的相关操作（1）定义接口

public interface CourseCategoryService extends IService {

    
    List findCategoires();
}

（2）递归实现：

sorted((a,b) -> a.getSorted()-b.getSorted()):升序
sorted((a,b) -> b.getSorted()-a.getSorted()):降序

@Service
@Log4j2
public class CourseCategoryServiceImpl extends ServiceImpl implements CourseCategoryService {
    @Override
    public List findCategoires() {
        //1.查询表中所有数据
        List allList = this.list();
        //2.查询根节点
        List rootList = allList.stream().filter(category -> category.getPid().equals(0)).
                sorted((a,b) -> a.getSorted()-b.getSorted()).
                collect(Collectors.toList());
        //3.查询子节点
        List subList = allList.stream().filter(category -> !category.getPid().equals(0)).collect(Collectors.toList());
        //4.循环根节点找到各自对应子节点
        rootList.forEach(root -> rootSub(root,subList));
        return rootList;
    }

    
    private void rootSub(CourseCategory root,List subList){
        //根节点id和子节点pid相等
        List childList = subList.stream().filter(sub -> sub.getPid().equals(root.getId())).
                sorted((a,b) -> a.getSorted()-b.getSorted()).
                collect(Collectors.toList());
        //如果某个根节点下有子节点，就将子节点放入对应根节点下
        if (!CollectionUtils.isEmpty(childList)) {
            root.setChildrenList(childList);
            //如果子节点不为空，则继续递归，去找对应子节点
            childList.stream().forEach(child -> rootSub(child,subList));
        }else {
            root.setChildrenList(new ArrayList<>());
        }
    }
}

将控制层修改后进去看看效果

6. 使用axios完成异步接口的调用概述

两种方式：

要么使用现成的tree组件 v-tree/ztree/other tree
自己开发
步骤：
- 查询接口返回数据
- 使用Axios查询数据接口返回给页面
- 使用vue来进行tree实现

此处注意一点：

temeleaf下的html文件只可通过路由访问，不能直接访问

测试引入axios.js是否成功：

[v-cloak]{display: none} 作用：防止抖动渲染（就是刚进去会有一刹那的{{title}}显示）

注意：此处可能静态资源没编译进去会报js404，所以这个时候可以手动复制进编译文件中：

测试结果：引入成功

调用代码



    
        
        
        
        树形菜单
        
    
    
    
        {{title}}
        {{dataList}}

测试调用结果：调用成功

7. 使用vue的组件和递归组件完成tree结构基础框架实现

添加图标

 
            template:"" +
                    ""+
                        "" +
                            "目录图标  " +
                            "文件图标  " +
                                "{{d.title}}" +
                        ""+
                            ""+
                    ""+
                "",

Tree结构目录场景

{{title}}

{{title}}

{{title}}

Java相关栏目本月热门文章