SpringBoot+layuimini实现角色权限菜单增删改查（layui扩展组件 dtree）

相关组件方法

消息通知组件：notify
树组件：dtree
前端框架：layuimini
layui文档地址：layui

效果图

MySQL

代码实现

资源菜单树组件实现

权限树方法js

这里我先主要实现权限树的整体实现方法，如果是直接查看使用的话可以只看这里！

  //初始化树
        function initTree(roleId) {
   
   
            console.log(roleId);
            var DTree = dtree.render({
   
   
                elem: "#treeSelect",
                dataStyle: "layuiStyle",  //使用layui风格的数据格式
                response: {
   
   message: "msg", statusCode: 0},  //修改response中返回数据的定义
                dataFormat: "list",  //配置data的风格为list
                checkbar: true,//复选框
                checkbarType: "all", // 默认就是all
                checkbarData: "choose",
                menubar: true,//菜单栏
                menubarTips: {
   
   
                    group: ["moveDown", "moveUp", "refresh", "checkAll", "unCheckAll", "searchNode"], //按钮组
                },
                skin: "zdy", // 自定义风格
                line: true,  // 显示树线
                initLevel: 1,//默认展开层级为1
                ficon: ["1", "-1"], // 显示非最后一级节点图标，隐藏最后一级节点图标
                icon: "2",//修改二级图标样式
                url: "/role/getAllSelectResourceDate?roleId=" + roleId
            });
            /*
             * 搜索框方法
            * */
            $("#search_btn").unbind("click");
            $("#search_btn").click(function () {
   
   
                var value = $("#searchInput").val();
                if (value) {
   
   
                    var flag = DTree.searchNode(value); // 内置方法查找节点
                    if (!flag) {
   
   
                        layer.msg("该名称节点不存在！刷新后重试！");
                    }
                } else {
   
   
                    DTree.menubarMethod().refreshTree(); // 内置方法刷新树
                }
            });
        }

后端代码

Controlle层代码

  /*
     * 权限配置菜单查询
     * @getAllSelectRoleDate
     * */
    @PostMapping("/getAllSelectResourceDate")
    public DataGridView listResource(Integer roleId) {
   
   
        // System.out.println("前端接受的权限id"+roleId);
        return roleService.listResource(roleId);
    }

Service代码及实现类代码

Service代码

 /*
    * 查询所有菜单
    * */
    DataGridView listResource(Integer roleId);

ServiceImpl代码

 /*
     * 查询所有菜单信息
     * */
    @Override
    public DataGridView listResource(Integer roleId) {
   
   
        // 从数据库中获取所有的资源
        List<ResourceEntity> resourceList = resourceMapper.selectAllResource();
        //根据权限id查询资源，修改更新权限的时候使用
        List<RoleResourceEntity> roleResourceEntities = roleResourceMapper.selectRoleResourceByRoleId(roleId);
        // 遍历所有资源
        List<TreeNode> data = new ArrayList<>();
        // 判断是否是提提添加还是修改操作
        if (roleId == 0 || roleResourceEntities.isEmpty()) {
   
   
            for (ResourceEntity resource : resourceList) {
   
   
                // 资源ID
                Integer id = resource.getResourceId();
                // 资源ID
                Integer pid = resource.getParentId();
                // 资源名称
                String title = resource.getTitle();
                // 默认展开状态为false
                Boolean spread = false;
                // 默认选中状态为false
                String checkArr="0";
                // 封装数据
                data.add(new TreeNode(id, pid, title, spread,checkArr));
            }
        } else {
   
   
            for (ResourceEntity resource : resourceList) {
   
   
                // 遍历角色对应的资源列表
                // 默认选中状态为false 这里实现的是dtree的选中状态 0：未选中 1：选中
                String checkArr = "0";
                for (RoleResourceEntity roleResource : roleResourceEntities) {
   
   
                    // 如果资源ID相同
                    if (roleResource.getResourceId().equals(resource.getResourceId())) {
   
   
                        // 将资源的选中状态设置为true
                        checkArr = "1";
                    }
                }
                // 封装数据
                // 资源ID
                Integer id = resource.getResourceId();
                // 父级ID
                Integer pid = resource.getParentId();
                // 资源名称
                String title = resource.getTitle();
                // 默认不展开,如果数据不为空则展开
                Boolean spread = true;
                // 将数据封装到TreeNode中
                data.add(new TreeNode(id, pid, title, spread, checkArr));
            }
        }
        // 返回数据
        return new DataGridView(data);
    }

resourceMapper 代码

 /*
    * 查询所有资源
    * */
    List<ResourceEntity> selectAllResource();

roleResourceMapper代码

    /*
    * 根据角色ID查询角色资源
    * */
    List<RoleResourceEntity> selectRoleResourceByRoleId(Integer roleId);

Mybatis代码

RoleResourceMapper.xml

 <select id="selectRoleResourceByRoleId" resultType="com.example.erp_project.entity.RoleResourceEntity">
        select *
        from sys_role_resource
        where roleId = #{roleId}
    </select>

ResourceMapper.xml

  <!--查询所有资源-->
    <select id="selectAllResource" resultType="com.example.erp_project.entity.ResourceEntity">
        select *
        from sys_resource
        order by sort asc
    </select>

TreeNode.java类

package com.example.erp_project.util;

import com.fasterxml.jackson.annotation.JsonProperty;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.util.ArrayList;
import java.util.List;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class TreeNode {
   
   
    //自己的资源id
    private Integer id;
    @JsonProperty("parentId") //返回的json的名称 parentId ,为了确定层级关系
    //父级id
    private Integer pid;
    //名称
    private String title;
    //是否展开
    private Boolean spread;
    //子节点
    private List<TreeNode> children = new ArrayList<TreeNode>();

    /**
     * 0为不选中  1为选中
     */
    private String checkArr="0";
    /*
    * 前端数据接收的数据项
    * */
    public TreeNode(Integer id, Integer pid, String title, Boolean spread, String checkArr) {
   
   
        this.id = id;
        this.pid = pid;
        this.title = title;
        this.spread = spread;
        this.checkArr = checkArr;
    }


}

DataGridView.java类

package com.example.erp_project.util;

import lombok.Data;

/**
 * @author Lolo don‘t feel
 */
@Data
public class DataGridView {
   
   
    //状态码
    private Integer code = 0;
    //总数
    private String msg = "";
    //分页数据
    private Long count = 0L;
    //这里是dtree中部门的数据
    private Object data;

    public DataGridView(Long count, Object data) {
   
   
        this.count = count;
        this.data = data;
    }

    public DataGridView(Object data) {
   
   
        this.data = data;
    }

}

角色信息添加及编辑页面实现

添加页面和编辑页面代码HTML

这里主要查看的是分配权限中的 lay-filter="role-status"属性

<!-- 添加和修改的弹出层开始 -->
        <div style="display: none;padding: 20px" id="saveOrUpdateDiv">
            <form class="layui-form" lay-filter="role-form" id="role-form">
                <!--隐藏数据id值，用于数据更新使用-->
                <input type="hidden" name="roleId" id="roleId">
                <div class="layui-form-item">
                    <label class="layui-form-label">角色名称:</label>
                    <div class="layui-input-block">
                        <input type="text" name="roleName" id="roleName" lay-verify="required"
                               placeholder="请填写角色名称"
                               autocomplete="off"
                               class="layui-input" lay-affix="clear">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">角色描述:</label>
                    <div class="layui-input-block">
                        <textarea name="remark" placeholder="请输入内容" class="layui-textarea"
                                  lay-affix="clear"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">角色状态:</label>
                    <div class="layui-input-block">
                        <input type="radio" name="state" value="1" title="正常" checked>
                        <input type="radio" name="state" value="0" title="停用">
                    </div>
                </div>
                <input type="hidden" name="r" id="r">
                <div class="layui-form-item">
                    <label class="layui-form-label">分配权限:</label>
                    <div class="layui-input-block">
                        <input type="radio" name="roleState" value="1" title="分配" lay-filter="role-status">
                        <input type="radio" name="roleState" value="0" title="暂不分配"lay-filter="role-status" >
                    </div>
                </div>
            </form>
        </div>
        <!-- 添加和修改的弹出层结束 -->

单选框对应的js代码

    /*
        * 权限分配菜单
        * */
        form.on('radio(role-status)', function (data) {
   
   
            var elem = data.elem; // 获得 radio 原始 DOM 对象
            var checked = elem.checked; // 获得 radio 选中状态
            var value = elem.value; // 获得 radio 值
            var othis = data.othis; // 获得 radio 元素被替换后的 jQuery 对象
            //获取页面输入框的值,如果为空则赋值为0，否则赋值为输入框的值
            //将value赋值给隐藏域
            $("#r").val(value);//将value赋值给隐藏域，这里注意用于角色信息编辑页面，否则会报错，报的错误就是：Cannot read property 'checked' of null
            var roleId = $("#roleId").val();
            if (!roleId) {
   
   
                roleId = 0;
            }
            //如果选中的是分配权限，然后调用 treeSelectData(roleId,1);方法加载菜单资源
           if (value==="1"){
   
   
               treeSelectData(roleId,1);//这里传递的roleId是0 查询的就是全部资源未选择，而编辑页面传递的就是选中数据的roleId
           }

        });

treeSelectData方法

效果图

HTML代码

   <!--分配权限的弹出层开始-->
        <div style="display: none;padding: 20px" id="roleDiv">
            <div style="padding: 15px">
                <div class="layui-btn-container">
                    <button type="button" class="layui-btn layui-btn-xs data-orange-btn"
                            dtree-id="treeSelect" dtree-menu="checkAll"><i class="fa fa-check-square-o"></i> 全选
                    </button>
                    <button type="button" class="layui-btn layui-btn-xs data-black-btn"
                            dtree-id="treeSelect" dtree-menu="unCheckAll"><i class="fa fa-remove"></i> 取消全选
                    </button>
                    <button class="layui-btn data-light-btn layui-btn-xs" dtree-id="treeSelect" dtree-menu="moveDown"><i
                            class="fa fa-expand"></i> 展开
                    </button>
                    <button class="layui-btn data-grey-btn layui-btn-xs" dtree-id="treeSelect" dtree-menu="moveUp"><i
                            class="fa fa-compress"></i> 折叠
                    </button>
                </div>
                <div class="layui-input-inline" style="width: 130px">
                    <input type="text" class="layui-input" id="searchInput" placeholder="输入查询节点内容..."
                           lay-affix="clear"
                           style="height: 28px;font-size: 13px">
                </div>
                <button class="layui-btn data-other-btn layui-btn-xs " id="search_btn"><i class="fa fa-search"></i> 搜索
                </button>
                <button class="layui-btn data-other-btn layui-btn-xs " dtree-id="treeSelect" dtree-menu="refresh"><i
                        class="fa fa-refresh"></i> 刷新
                </button>
                <div class="layui-form-item" style="padding: 15px">
                    <ul id="treeSelect" class="dtree" data-id="0"></ul>
                </div>
            </div>
        </div>
        <!--分配权限的弹出层结束-->

添加和编辑页面下图中的代码课一不用查看

 /*
        * 权限树弹出层方法
        * 这里传递两个参数一个是根据roleId（用于获取数据将权限进行分配），
        * 一个是根据status（用于判断是添加和修改页面，还是权限直接分配页面）。
        * */
        function treeSelectData(roleId,status) {
   
   
            layer.open({
   
   
                type: 1,
                title: '权限分配',
                content: $("#roleDiv"),
                area: ['360px', '520px'],
                closeBtn: false,
                btnAlign: 'c',
                //样式
                skin: 'class-layer-orange',
                btn: ['<i class="fa fa-check"></i> 确认分配', '<i class="fa fa-times "></i> 关闭'],
                success: function () {
   
   
                    initTree(roleId);//弹出树组件根据角色id去查询对应的资源菜单
                },
                yes