上篇文章：Ant Design Vue - Tree实现右键功能 已经讲了如何创建一个tree组件，同时添加了vue组件的右键功能，那么实际工作中，这个tree 的数据肯定是动态从后端获取，那么我们简单讲讲后端如何构造出这个tree节点数据。

准备条件

新建一个Spring boot工程，并导入mybatis-plus等相关包。

实现

部分代码实现如下

创建表

  1. CREATE TABLE `t_cases_tree` (
  2.   `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT 'id',
  3.   `TITLE` varchar(255) NOT NULL COMMENT '节点名',
  4.   `PARENT_ID` int(11) NOT NULL COMMENT '父节点id -1表示根目录',
  5.   `TYPE` int(10) NOT NULL COMMENT '节点类型1 文件夹 2 脑图',
  6.   `PROJECT_ID` bigint(20) NOT NULL COMMENT '项目ID',
  7.   `CREATE_TIME` datetime NOT NULL COMMENT '创建时间',
  8.   `MODIFY_TIME` datetime DEFAULT NULL COMMENT '修改时间',
  9.   PRIMARY KEY (`id`),
  10.   KEY `PROJECT_ID` (`PROJECT_ID`),
  11.   CONSTRAINT `projectid` FOREIGN KEY (`PROJECT_ID`) REFERENCES `t_project` (`id`)
  12. ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4;

创建表对应的实体

  1. @Data
  2. @EqualsAndHashCode(callSuper = false)
  3. @Accessors(chain = true)
  4. @TableName("t_cases_tree")
  5. public class TCasesTree implements Serializable {
  7.     private static final long serialVersionUID = 1L;
  9.     @TableId(value = "id", type = IdType.AUTO)
  10.     private Long id;
  12.     /**
  13.      * 节点名
  14.      */
  15.     @TableField("TITLE")
  16.     private String title;
  18.     /**
  19.      * 父节点id
  20.      */
  21.     @TableField("PARENT_ID")
  22.     private Long parentId;
  24.     /**
  25.      * 节点类型 1.文件夹 2.脑图
  26.      */
  27.     @TableField("TYPE")
  28.     private Integer type;
  30.     /**
  31.      * 项目ID
  32.      */
  33.     @TableField("PROJECT_ID")
  34.     private Long projectId;
  36.     /**
  37.      * 创建时间
  38.      */
  39.     @TableField("CREATE_TIME")
  40.     private Date createTime;
  42.     /**
  43.      * 修改时间
  44.      */
  45.     @TableField("MODIFY_TIME")
  46.     private Date modifyTime;
  49.     /**
  50.      * 不写入数据库字段
  51.      */
  52.     private transient List<TCasesTree> children;
  54. }

创建dao层

  1. public interface TCasesTreeMapper extends BaseMapper<TCasesTree> {
  2. }

创建service

  1.     @Override
  2.     public List<TCasesTree> findAllByProjectId(Long projectId) {
  4.         List<TCasesTree> casesTrees = getTreeDataLoop(projectId,-1L);
  5.         return casesTrees;
  6.     }
  8.     private List<TCasesTree> getTreeDataLoop(Long projectId,Long parentId) {
  9. //        通过项目ID获取该ID下所有节点
  10.         QueryWrapper<TCasesTree> wrapper = new QueryWrapper<>();
  11.         wrapper.eq("PROJECT_ID", projectId);
  12.         wrapper.eq("PARENT_ID",parentId);
  13.         List<TCasesTree> casesTrees = this.baseMapper.selectList(wrapper);
  15.         // 循环获得的子级，将子级放入父级中
  16.         for (TCasesTree casesTree : casesTrees) {
  17.             // 递归方法，自己调用自己
  18.             List<TCasesTree> treeDataLoop = getTreeDataLoop(projectId,casesTree.getId());
  19.             // 将子级放入父级中
  20.             casesTree.setChildren(treeDataLoop);
  21.         }
  22.         return casesTrees;
  23.     }

controller实现

  1.     @GetMapping
  2.     public List<TCasesTree> findAllByProjectId(@NotBlank Long projectId) {
  3.         return casesTreeService.findAllByProjectId(projectId);
  4.     }