两级分类以懒加载的方式展现树形数据

两级分类以懒加载的方式展现树形数据

解决方案：

​ 数据库设计+ElementUI

看懂以下代码前提知识：

​ mysql、springBoot、mybatisPlus、了解vue生命周期、了解ElementUI基本使用，了解前后分离开发。

场景：

​ 因为每一个课程都对应了课程分类（比如：Web基础课程，属于一级分类–>后端开发；属于二级分类–>java），想做课程的相关功能，需要先做一个课程的分类列表功能，为后面的添加课程做准备。要求该课程的分类列表功能能以树形的结构展示出课程的各种类别，还能实现只有点击一级菜单才会加载该一级分类下的二级分类内容（懒加载）。效果如下图2所示

数据库设计：

图1

效果演示：

图2

代码实现：

后端代码：

(1)统一返回结果类Result

//统一返回结果类
@Data
public class Result<T> {
    private Integer code; //状态码
    private String message; //返回状态信息（成功 失败）
    private T data; //返回数据
    public Result() {}
    //成功的方法，有data数据
    public static<T> Result<T> ok(T data) {
        Result<T> result = new Result<>();
        if(data != null) {
            result.setData(data);
        }
        result.setCode(20000);
        result.setMessage("成功");
        return result;
    }
    //失败的方法,有data数据
    public static<T> Result<T> fail(T data) {
        Result<T> result = new Result<>();
        if(data != null)