项目一众筹网05_01_[树形结构开发]菜单维护-树形结构基础知识、自关联、zTree的介绍和使用、如果可以尽量不要嵌套循环、时间复杂度和空间复杂度的区别

树形结构开发]菜单维护

文章目录

• 树形结构开发]菜单维护
• 01-菜单维护-树形结构基础知识-上

• ==在数据库中怎么去表示树形关系==
• ==其实这就是自关联==
• ==我们怎么识别根节点==

• 02-菜单维护-树形结构基础知识-下
• 03-页面显示树形结构-后端-逆向工程

• ==开发的细节：如何避免空指针异常：初始化==

• 04-后端-handler方法中组装-未改进（页面显示树形结构）
• 05-后端-handler方法中组装-改进后（页面显示树形结构）

• 如果可以尽量不要嵌套循环
• ==时间复杂度和空间复杂度的区别==
• 注意事项，这个不仅仅是需要代码知识也很需要数据库知识，假如数据库有问题，代码是不行的
• ==根节点的是没有pid的根节点的pid必为null，连0都不行/如果非要用0代替null那么0也是不存在的数据才行，总之根节点是没有父的，它就是天，并并且必须要有一个根节点==

• 06-页面显示树形结构-过渡-跳转到menu-page页面

• ==下面我们跑起来试试看==
• 跳转页面

• 07-页面显示树形结构-前端-参考demo用假数据显示

• zTree的使用

• 08-页面显示树形结构-前端-使用真实数据（下一篇）
• 09-准备zTree的API文档
• 10-前端-显示图标-分析思路（-页面显示树形结构）
• 11-前端-显示图标-代码实现（-页面显示树形结构）

01-菜单维护-树形结构基础知识-上

需要需要熟悉节点的类型，心里要有东西，才能做到胸有成竹

为什么我们要约定整个树形结构的节点层次最多只能有3层，原因是超过3层就非常复杂了，我们这里暂时不考虑过于复杂的层次结构

在数据库中怎么去表示树形关系

我们知道，在数据库中只能是一列一列的数据，那么怎么去表示树形关系呢

找到这个sql文件，我们看看建表语句

create table t_menu
(
   id                   int(11) not null auto_increment,
   pid                  int(11),
   name                 varchar(255),
   icon                 varchar(255),
   url                  varchar(255),
   primary key (id)
);

alter table t_menu comment '菜单表';

数据都可以在这个文件中找到，我们插入数据

根据我们的观察可以得知根节点可以是null也可以是0，即用null和0表示根节点都是可以的

父节点是0 也可以表示该菜单 是根节点

父节点是null也可以表示该菜单 是根节点如下，只是两种写法而已，思路是一模一样的

id表示的是这条数据本身的id ，pid表示的是父节点的id

分析上图，我们看出，用户维护、角色维护、菜单维护，他们的父节点都是3，都是权限管理

这样是不是就慢慢可以理解他们之间那层关系了子节点通过pid字段关联到父节点的id字段，建立父子关系。

其实这就是自关联

我们怎么识别根节点

根节点是没有父节点的，他就像是 天地初开 鸿蒙伊始的盘古，只有后代子孙，没有祖宗，它就是祖宗，

没有父节点的就是祖宗，没有父节点的父节点可以用null（或者0）表示

02-菜单维护-树形结构基础知识-下

数据库里面弄清楚了之后，下一步就是我们怎么在页面去显示出来

因为光数据库里面有也没有用，怎么使用java结合前端知识，把数据展示出来呢

下面我们来看

上面说的是后端，前端我们直接用用一个插件来生成即可

实际上就非常简单了

这个插件名叫做 zTree，也是基于jquery的

我们后端只需要传给Ztree即可至于传哪些参数，我们可以看zTree的官方文档

03-页面显示树形结构-后端-逆向工程

建表这块，不说了直接找到数据库文件，执行好表即可（注意表和数据都要） ==
然后我们这里直接就可以执行逆向工程==了

注意，就是这张表，注意执行的逆向工程的时候，如下表名和类名不要写错

选择这个是直接执行上一次的，我们这里选择这个就好

我们之前说过，还有两个附加的属性要加上，所以如下我们在实体里面加上

除了要给这两个新加的属性添加get、set方法外，我们特别要注意，还需要初始化一下这个

开发的细节：如何避免空指针异常：初始化

每一个属性，都加一下注释

然后构造器、get、set以及toString方法自己加一下注意是把实体的附加属性弄好了之后再去各就各位

下面就是service和handler

使用@Autowired 装配一下 MenuMapper，到时候好层层调用

这样架子先搭好，再来进行下一步

04-后端-handler方法中组装-未改进（页面显示树形结构）

service接口

service实现类

控制器

检查pid是否为null，有些数据库设计的时候父节点是0，

pid是null或者0就是根节点，这个要根据具体情况来，具体情况具体分析

父节点可以有多个子节点，子节点只能有1个父节点

05-后端-handler方法中组装-改进后（页面显示树形结构）

改进一下，上面的写法不能说错，只是还不够好

如果嵌套的循环能够改成不嵌套的循环，我们要尽量避免嵌套的循环

极端情况下，如果循环的次数非常多，由于嵌套循环是外层循环和内层循环相乘，所以是对资源极大的浪费

1000000000

20000

差别巨大

所以我们只要改成不嵌套就行了

之所以之前嵌套，是找父节点的时候嵌套的

如果可以尽量不要嵌套循环

上面我们将双循环/循环嵌套 改成了单循环/普通循环 ，优化的是时间复杂度

时间复杂度和空间复杂度的区别

时间复杂度解决同一个问题，谁运算的次数多，谁运算的次数少，肯定是越少越好
运行次数多的就时间复杂度高，运算次数少的就时间复杂度低，同理，时间复杂度也是越低越好
空间复杂度占用内存的大小，一个算法执行完毕肯定占用内存越少越好，也就是说空间复杂度也是越低越好

如果时间复杂度低，空间复杂度也低，那么这个算法就刘无限牛逼了这个是数据结构相关的知识

注意事项，这个不仅仅是需要代码知识也很需要数据库知识，假如数据库有问题，代码是不行的

上面的代码必须要，保证数据库里面的数据之间是有关联关系的

因为我自己测试不成功所以改了一下

这样上面的代码就生效了

所以，由此我们可以得出根节点的是没有pid的

根节点的是没有pid的根节点的pid必为null，连0都不行/如果非要用0代替null那么0也是不存在的数据才行，总之根节点是没有父的，它就是天，并并且必须要有一个根节点

我改了数据库的内容之后，他们就能够很好的关联起来了

最后推荐是用这个算法，不要搞错了

小结：zTree，树形开发结构开发，首先要数据库的数据没问题，才能使用java算法把结构理清楚，一句话首先要数据没问题

06-页面显示树形结构-过渡-跳转到menu-page页面

下面我们跑起来试试看

这里 老师讲解的时候用的是火狐浏览器，他主要是为了看JSON，火狐浏览器对JSON自带解析

跳转页面

没有这个menu-page页面的话，我们就新建一个

打开前端页面

07-页面显示树形结构-前端-参考demo用假数据显示

所以我们也要引入zTree的环境

zTree的使用

其实zTree功能非常丰富 但是弱水三千，我只取一瓢，我们只要能够满足我们的部分就可以了

先看看有没有所谓的"假数据"页面

我们的代码里面也要有 treeDemo其它的就删掉，会动态生成

测试一下：

08-页面显示树形结构-前端-使用真实数据（下一篇）

09-准备zTree的API文档

10-前端-显示图标-分析思路（-页面显示树形结构）

11-前端-显示图标-代码实现（-页面显示树形结构）