项目一众筹网06_03给角色分配菜单权限表的设置使用zTree来实现节点判断（后端不写代码也能实现树形开发）接口不能写@service注解，实现类才能写

Posted 2022-02-10 平凡加班狗

系列文章目录

项目一众筹网06_03给角色分配菜单

文章目录

• 系列文章目录
• 13-Role分配Auth-目标和思路
• • ==理解为角色认证，即给角色分配菜单==
• 14-Role分配Auth-Auth（权限表）建表
• • 权限表的设置
• 15-打开模态框-空模态框
• 16-打开模态框-显示树-发请求
• • 使用zTree来实现节点判断、组装
• 17-打开模态框-显示树-发请求[改进]
• 18-打开模态框-显示树-查询Auth并调整树显示
• 报错解决 执行sql就开始报错
• 19-Role分配Auth-代码-打开模态框-显示树-展开并显示checkbox(下一篇)

13-Role分配Auth-目标和思路

理解为角色认证，即给角色分配菜单

是树形开发
并且我们还要是能够回显本来已经分配好的权限

14-Role分配Auth-Auth（权限表）建表

create table t_auth(
id int(11) not NULL AUTO_INCREMENT,
name varchar(200) DEFAULT null,
title varchar(200) DEFAULT null,
category_id int(11) DEFAULT null,
PRIMARY KEY(id)
);

权限表的设置

INSERT into t_auth (id ,name,title,category_id) VALUES(1,’’,‘用户模块’,null);
INSERT into t_auth (id ,name,title,category_id) VALUES(2,‘user:delete’,‘删除’,1);
INSERT into t_auth (id ,name,title,category_id) VALUES(3,‘user:get’,‘查询’,1);
INSERT into t_auth (id ,name,title,category_id) VALUES(4,’’,‘角色模块’,null);
INSERT into t_auth (id ,name,title,category_id) VALUES(5,‘role:delete’,‘删除’,4);
INSERT into t_auth (id ,name,title,category_id) VALUES(6,‘role:get’,‘查询’,4);
INSERT into t_auth (id ,name,title,category_id) VALUES(7,‘role:add’,‘新增’,4);
注意执行sql的时候，每一个insert语句后面都要加 分号（;）这样才能多条insert语句一起执行

仔细捋一捋表的关系，表内部是有关系的，这块其实就是自关联的一些知识，很典型的自关联

表建立好后，数据也插入后，效果大致就是这样的，至于为什么是这样的，后面我们会继续说

逆向工程把这个表的实体类等生成出来
记得实体生成完毕后，手动加上无参构造函数，最后各自归位、加上service和handler

生成之后 注意把，无参构造、有参构造、toString方法加上，加上完之后跟以前一样，各就各位

加完无参构造和有参构造之后，各自归位

zTree还跟我们长得不一样，我们看一下前面的代码之前我们还额外增加了这两个属性：

在这需不需要加？仔细想一想
答案是不加也行
包括前面不加都行，只是我们两种方式都要了解
这里我们就不加
不加其实我们也有办法生成树形结构
注意，这个表，对应的handler不需要单独为这个类创建，
但是service还是需要单独有，这个是要理清楚的地方

15-打开模态框-空模态框

首先找到代码的起点

给它加一个id和class即可，目的是为了后面好绑定点击函数

模态框文件复制进来

16-打开模态框-显示树-发请求

要使用zTree，必须要把这两个文件引入过来——复制粘贴一下


注意位置

加东西都往这个节点去加

使用zTree来实现节点判断、组装

原因是我们之前是根据zTree的文档里面的 最简单的数——标准json数据来写的，
这个是要写后端代码，让数据变成标准数据的

如果我们使用简单json数据就不需要后端处理，如下图

只需要设置一下，告诉 zTree，你来帮我处理，这个时候后端就不需要处理了，只要数据的 id 和pid 他们之间有关系即可

17-打开模态框-显示树-发请求[改进]

剪切一下，放外面去



然后把这个ajax 改成同步的



做这样的一个优化，也是同步的意义，否则异步就真的一点意义都没有了
我这里小结一下什么时候 必须要用同步，并且是异步代替不了的，就是现在这个情况
判断响应状态码如果不是200就不执行了，这种需求，必须要ajax结束了，再执行判断响应状态码

想一下面这个要怎么改

其实很简单：

接下来就是

【可参考源码】

18-打开模态框-显示树-查询Auth并调整树显示

逆向工程已经封装好了的后端代码：

现在的效果我们看一下

目前数据是有了，但是效果太粗糙了，我们怎么改一下呢？

要告诉zTree，要给我们显示数据里面的title属性，而不是name属性

还有一个地方要改，就是现在这个树形节点，完全不像一棵树，没有任何缩进
这是因为，zTree默认是用pid去当节点的，所以导致没有任何缩进

那么我们再看的话，最少显示是正常的了

报错解决 执行sql就开始报错

原因是service层忘记打@Autowired注解
非常尴尬

19-Role分配Auth-代码-打开模态框-显示树-展开并显示checkbox(下一篇)

20-Role分配Auth-代码-勾选已分配-后端-查询数据
21-Role分配Auth-代码-勾选已分配-前端-发请求拿到数据
22-Role分配Auth-代码-勾选已分配-前端-勾选已分配
23-Role分配Auth-代码-执行分配-前端-获取已经勾选的authId
24-Role分配Auth-代码-执行分配-前端-发送请求执行分配
25-Role分配Auth-代码-执行分配-后端-handler和service代码
26-Role分配Auth-代码-执行分配-后端-SQL
27-Role分配Auth-代码-执行分配-后端-修复Bug
28-Role分配Auth-小结
29-javascript代码在浏览器上Debug调试