ZTree入门权限管理

简介: ZTree入门权限管理

1 ztree入门

第一步:引入ztree相关资源

<!--引入jqurey-->
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<!--引入ztree-->
<link rel="stylesheet" type="text/css" href="css/zTreeStyle/zTreeStyle.css">
<script type="text/javascript" src="js/jquery.ztree.core-3.5.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.excheck-3.5.min.js"></script>

第二步: 创建ztree容器,存放树

<ul id="treeDemo" class="ztree"></ul>

第三步:初始化ztree

<script>
    $(function () {
        //菜单
        var zNodes =[
            { id:11, pId:1, name:"随意勾选 1-1", checked:true},
            { id:111, pId:11, name:"随意勾选 1-1-1",checked:true},
            { id:112, pId:11, name:"随意勾选 1-1-2",checked:true},
            { id:12, pId:1, name:"随意勾选 1-2",checked:true},
            { id:121, pId:12, name:"随意勾选 1-2-1",checked:false},
            { id:122, pId:12, name:"随意勾选 1-2-2",checked:false},
            { id:2, pId:0, name:"随意勾选 2", checked:true},
            { id:21, pId:2, name:"随意勾选 2-1",checked:false},
            { id:22, pId:2, name:"随意勾选 2-2",checked:true},
            { id:221, pId:22, name:"随意勾选 2-2-1", checked:true},
            { id:222, pId:22, name:"随意勾选 2-2-2",checked:false},
            { id:23, pId:2, name:"随意勾选 2-3",checked:false},
            { id:1, pId:0, name:"随意勾选 1",checked:true}
        ];
        //配置
        var setting = {
            check: {
                enable: true,//启用复选框
                chkboxType: {"Y": "ps", "N": "ps"}//子被选中父也被选中,父被选中,所有的子都被选中
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };
        //第一个参数为zTree的DOM容器,第二个为zTree设置详情可见官网api,第三个为zTree的节点数据,expandAll(true)表示默认展开树
        $.fn.zTree.init($("#treeDemo"), setting, zNodes).expandAll(true);
    });
</script>

获取选中的节点

var arr = $.fn.zTree.getZTreeObj("treeDemo").getCheckedNodes();//treeDemo是ztree树的ID值

2 权限

2.1 表关系

2.2 通过SQL查询某个用户对应的模块

SELECT
  su.`user_name`,
  sm.`name`
FROM ss_user su
LEFT JOIN ss_role_user sru ON su.`user_id` = sru.`user_id`
LEFT JOIN ss_role sr ON sru.`role_id` = sr.`role_id`
LEFT JOIN ss_role_module srm ON  srm.`role_id` = sr.`role_id`
LEFT JOIN ss_module sm ON srm.`module_id` = sm.`module_id`
WHERE su.`user_id` = 'e0de22fe-2c50-4216-ad75-ed0494d2dc92'

2.3 授权功能

2.3.1 效果展示

1.展示权限列表

2.点击授权跳转到授权页面

2.3.2 思考

前端需要的数据格式如下,使用java如何生成JSON格式的字符串:"[{}{}{}]"

var zNodes =[
    { id:11, pId:1, name:"随意勾选 1-1", open:true},
    { id:111, pId:11, name:"随意勾选 1-1-1"},
    { id:112, pId:11, name:"随意勾选 1-1-2"},
    { id:12, pId:1, name:"随意勾选 1-2", open:true},
    { id:121, pId:12, name:"随意勾选 1-2-1"},
    { id:122, pId:12, name:"随意勾选 1-2-2"},
    { id:2, pId:0, name:"随意勾选 2", checked:true, open:true},
    { id:21, pId:2, name:"随意勾选 2-1"},
    { id:22, pId:2, name:"随意勾选 2-2", open:true},
    { id:221, pId:22, name:"随意勾选 2-2-1", checked:true},
    { id:222, pId:22, name:"随意勾选 2-2-2"},
    { id:23, pId:2, name:"随意勾选 2-3"},
    { id:1, pId:0, name:"随意勾选 1", open:true}
];

后端的java怎么才能生成该格式的JSON数据

ArrayList<Map<String,String>> list = new ArrayList<>
Map<String,String> row1 = new HashMap<String,String>;
row1.put("id",11);
row1.put("pId",1);
row1.put("name","xx");
row1.put("checked","true");
Map<String,String> row2 = new HashMap<String,String>;
row2.put("id",11);
row2.put("pId",1);
row2.put("name","xx");
row2.put("checked","true");
list.add(row1);list.add(row2)
把该list转成JSON即可

2.3.3 展示权限Dao

List<Map> findAuthorDataByRoleId(String roleId);
<select id="findAuthorDataByRoleId" parameterType="string" resultType="java.util.Map">
    select
    module_id as id,
    parent_id as pId,
    name as name,
    case
    when module_id in (select module_id from ss_role_module where role_id = #{roleId})
    then 'true'
    else 'false'
    end
    as checked
    from
    ss_module
</select>

SQL

SELECT
  module_id 'id',
  parent_id 'pId',
  NAME 'name',
  CASE
    WHEN module_id IN (SELECT module_id FROM ss_role_module WHERE role_id='4028a1c34ec2e5c8014ec2ebf8430001') 
    THEN 'true'
    ELSE 'false'
  END AS 'checked'
FROM ss_module 

2.3.4 展示权限Service

@Override
public List<Role> findAllRoleByUserId(String userId) {
    SqlSession sqlSession = null;
    try{
        //1.获取SqlSession
        sqlSession = MapperFactory.getSqlSession();
        //2.获取Dao
        RoleDao roleDao = MapperFactory.getMapper(sqlSession,RoleDao.class);
        //3.调用Dao层操作
        return roleDao.findAllRoleByUserId(userId);
    }catch (Exception e){
        throw new RuntimeException(e);
        //记录日志
    }finally {
        try {
            TransactionUtil.close(sqlSession);
        }catch (Exception e){
            e.printStackTrace();
        }
    }
}

2.3.5 展示权限RoleServlet

    private void author(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
        //获取要授权的角色id
        String roleId = request.getParameter("id");
        //使用id查询对应的数据(角色id对应的模块信息)
        Role role = roleService.findById(roleId);
        request.setAttribute("role",role);
        //根据当前的角色id获取所有的模块数据,并加载关系数据
        List<Map> map = moduleService.findAuthorDataByRoleId(roleId);
        //map转成json数据
        ObjectMapper om = new ObjectMapper();
        String json = om.writeValueAsString(map);
        request.setAttribute("roleModuleJson",json);
        // TODO 数据未查询
        //跳转到树页面中
        request.getRequestDispatcher("/WEB-INF/pages/system/role/author.jsp").forward(request,response);
    }

2.3.6 展示权限前端

$(document).ready(function(){
    // 定义页面对应的树形组件
    var zTreeObj;
    var setting = {check: {enable: true},data: {simpleData: {enable: true}}};
    var zNodes =${roleModuleJson}
    zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes)
    var zTree = $.fn.zTree.getZTreeObj("treeDemo")
    zTree.setting.check.chkboxType = { "Y" : "ps", "N" : "ps" }
    zTreeObj.expandAll(true);//true:展开所有
});

2.4 修改权限

表单数据如下

第一步:给保存按钮添加单击事件,单击时获取所有的被选中的复选框的值,然后拼接成字符串赋值给#moduleIds

第二步:服务器Servlet直接获取表单数据,调用service

目录
相关文章
|
6月前
|
JavaScript 数据安全/隐私保护
vue权限管理
vue权限管理
45 8
|
前端开发 数据安全/隐私保护 UED
LayUI之树形菜单(权限管理)
LayUI之树形菜单(权限管理)
319 0
|
4月前
|
存储 开发框架 前端开发
循序渐进VUE+Element 前端应用开发(18)--- 功能点管理及权限控制
循序渐进VUE+Element 前端应用开发(18)--- 功能点管理及权限控制
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(15)--- 用户管理模块的处理
循序渐进VUE+Element 前端应用开发(15)--- 用户管理模块的处理
|
4月前
|
开发框架 移动开发 前端开发
在微信框架模块中,基于Vue&Element前端的后台管理功能介绍
在微信框架模块中,基于Vue&Element前端的后台管理功能介绍
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(24)--- 修改密码的前端界面和ABP后端设置处理
循序渐进VUE+Element 前端应用开发(24)--- 修改密码的前端界面和ABP后端设置处理
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(17)--- 菜单资源管理
循序渐进VUE+Element 前端应用开发(17)--- 菜单资源管理
|
4月前
|
存储 开发框架 前端开发
循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理
循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理
|
4月前
|
JavaScript 数据安全/隐私保护
vue 页面权限控制、按钮权限控制
vue 页面权限控制、按钮权限控制
29 0
|
6月前
|
JavaScript 数据安全/隐私保护
vue如何实现页面的权限控制?
vue如何实现页面的权限控制?
194 0