系列文章目录
项目一众筹网06_03给角色分配菜单
文章目录
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调试