0
点赞
收藏
分享

微信扫一扫

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句


系列文章目录

众筹网

文章目录

  • 系列文章目录
  • 01-角色和权限分配-引入
  • 02-Admin分配Role-目标和思路
  • 03 Admin 分配 Role 创建中间表
  • 有些表是不需要实体类的自然也就不需要做逆向工程
  • 04-Admin分配Role-前往分配页面-handler方法
  • 05-Admin分配Role-前往分配页面-Service方法和SQL
  • 06-Admin分配Role-前往分配页面-页面操作-显示option
  • 07-Admin分配Role-前往分配页面-页面操作-调整表单,让表单能够提交
  • 08-Admin分配Role-前往分配页面-页面操作-左右移动option
  • 前端jquery实现列表移动过来移动过去
  • 09-Admin分配Role-执行分配-handler方法(下一篇)

01-角色和权限分配-引入

我们前面做的事情就是没有管权限管理
	没有去考虑登录进来的人是谁
	不管是谁菜单都一样
	现在我们就要考虑登录进来的人是谁了

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_java


项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_jquery_02


把逻辑想明白即可,代码先别管,后面有框架帮我们处理

但是我们必须要清楚他们之间的关系才能去使用框架 搭好他们之间的关系

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_前端_03

02-Admin分配Role-目标和思路

我们看前端模板

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_sql_04


项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_前端_05


项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_前端_06


所以我们需要一个中间表

用户和角色中间表

后面我们还需要一个中间表

角色和菜单中间表==

一个权限管理系统,最少需要五张表,分别是 用户表、角色表、菜单表、用户和角色关系表、角色和菜单关系表

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_sql_07


这里注意,,必须是要带数据的

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_jquery_08

03 Admin 分配 Role 创建中间表

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_前端_09


其中需要注意,中间表的主键有两种方式

一种是正常的

一种是联合主键

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_前端_10


两种方式都可以,我们这里选择传统的

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_sql_11

有些表是不需要实体类的自然也就不需要做逆向工程

思考一下,这个表我们要不要做逆向工程?

答案是:不需要

因为这个表它确实不是实体类,它只是中间表

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_jquery_12


没有实体类怎么执行sql呢?

在别人那凑合一下就行了,别的地方并不是不能执行sql,所以不必纠结

04-Admin分配Role-前往分配页面-handler方法

修改分配按钮的超链接

首先要找到页面

在这里插入代码片

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_实体类_13


项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_java_14


改成a标签之后,注意要加上href可以模仿 下面的修改、删除等功能

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_sql_15


页面创建好之后,我们要做的就是,不是要发请求吗,自然就需要控制器,注意并不是每个控制器都需要实体类

我们先就创建实体类

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_前端_16


项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_前端_17


项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_实体类_18


存入模型实际上就是放到请求域里面了,只是springMvc去帮我们做了

05-Admin分配Role-前往分配页面-Service方法和SQL

把上面我们写的那两个方法写好

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_前端_19


项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_sql_20


中间表加点数据

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_前端_21


这个数据的意思就是,比如111 这个账号 拥有哪些角色,比如张三是 超级管理员、也是后端管理员、也是普通用户

小结一下,handler层

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_前端_22


service层

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_jquery_23


项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_sql_24


mapper层/Dao层注意它是没有实现类的,因为它的实现类就相当于下面这个xml ,我们对着来写:

sql语句暂时看不完整,我们先分析一下,最后揭晓打答案

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_java_25


看不清楚sql语句对吧,我们换个行

这个sql语句很重要,,考验 sql能力 的时候到了

我们假设是这个id登录进来的,我们看它的 已被分配的角色

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_前端_26


我们知道他的id是26了

那么我们就应该去找 用户与角色关联表( inner_admin_role )所以看似复杂,但是要是逻辑清楚了,其实很简单

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_sql_27


用户与角色关系表

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_jquery_28


id 为26 的用户 已匹配的角色 的sql 语句 如下:

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_jquery_29


id 为26 的用户 未匹配的角色 的sql 语句 如下:

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_jquery_30


最终在代码里

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_java_31

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_实体类_32

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_sql_33


老师的sql 这样写的,其实说明一个问题

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_实体类_34


实测也是可以的,说明我们前面的sql是有bug的,仔细想想,不知道你发现没有,我们之前测试没有问题,只是运气好,数据量少,碰巧刚好数据是对应的,所以没有出问题,看下面这个逻辑,就应该查询的是 role_id而不是 id

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_sql_35

【注意】如果不放心,我们可以把sql拿出来,先执行一下看看,,确保万无一失

06-Admin分配Role-前往分配页面-页面操作-显示option

打开前端模板,对应的页面,检查——找到对应的代码

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_前端_36

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_java_37


把这个网页前端代码整理好,像以前一样放前端去

思路

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_jquery_38


项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_java_39


导入一下jstl ,这样就能够在jsp页面写java代码

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_jquery_40


注意不要写错,特别是已分配和未分配的,不要搞混

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_前端_41

测试看看——测试通过再进行下一步

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_java_42

07-Admin分配Role-前往分配页面-页面操作-调整表单,让表单能够提交

调整表单,让表单能够提交

加一个action,并且设置好隐藏域

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_前端_43


注意,加action的时候不要漏掉请求方式,请求方式在开发过程中绝大部分都是 post 请求

这里隐藏域的作用是,为了将来页面能够维持住之前的页面,从哪来回哪去

我们真正要提交的是 已分配的,未分配的我们不需要提交

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_前端_44


所以未分配我们不用做特殊处理

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_jquery_45


下面这个已分配就需要做一些特殊处理了

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_java_46


项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_java_47

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_java_48


这个到时候让1前端工程师来处理一下算了,挺麻烦的,我们前端不是特别精通,可能要花很长时间

暂时能用就行,美观 以后再说

暂时可以先这样

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_java_49

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_实体类_50

08-Admin分配Role-前往分配页面-页面操作-左右移动option

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_sql_51


怎么实现这个点一下就过去、过来的功能?

看似很复杂,实际上很简单,就一行代码的事情
但是不会的话,永远可能都不会,因为你会觉得很难很难,其实会了的话,很简单

前端jquery实现列表移动过来移动过去

思路

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_实体类_52


项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_sql_53


给他们加上id,这样才能绑定单击函数

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_前端_54


下一步就是我们需要 从 这个 selec 里面 找到 被选中的 option

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_前端_55


我们当然可以设置id,但是如果有特殊情况,我们不能设置id的话,要怎么解决这个问题呢?由于此页面只有2个select,所以我们可以这样写

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_实体类_56


这些用法都是有迹可循的,jquery很熟的话,是可以很好的运用的

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_前端_57


项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_前端_58


就一行代码

加一下注释

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_jquery_59


这是去右边,去左边就更简单了一样的代码,换一下就行了

项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_java_60


项目一众筹网06_01_【权限控制】角色和权限分配、Admin分配Role、Role分配Auth、前端jquery实现列表移动过来移动过去、有些表是不需要实体类的自然也就不需要做逆向工程、sql语句_sql_61


放前面还是放后面,都可以自定义选择,jquery都提供了不同的方法

09-Admin分配Role-执行分配-handler方法(下一篇)

10-Admin分配Role-执行分配-Service方法
11-Admin分配Role-执行分配-SQL语句
12-Admin分配Role-执行分配-修正Bug
13-Role分配Auth-目标和思路
14-Role分配Auth-Auth建表
15-Role分配Auth-代码-打开模态框-空模态框
16-Role分配Auth-代码-打开模态框-显示树-发请求
17-Role分配Auth-代码-打开模态框-显示树-发请求[改进]
18-Role分配Auth-代码-打开模态框-显示树-查询Auth并调整树显示
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调试


举报

相关推荐

0 条评论