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

系列文章目录

项目一众筹网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方法加上,加上完之后跟以前一样,各就各位
注意把,无参构造、有参构造、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调试

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值