基于JavaWEB的综合项目 - 5.1(权限分配-角色分配功能） - 《Java笔记》

权限分配-角色分配功能
①概要设计-建表

②角色列表页增加分配功能的按钮
a）点击分配按钮，传递rid和rname

<button type="button" class="layui-btn layui-btn-normal layui-btn-sm" onclick="toSetFun('{{d.rid}}','{{d.rname}}')">
                <i class="layui-icon">&#xe716;</i>分配功能</button>

b）jQuery-AJAX请求模板页

//给角色分配功能  语雀5.1
            function toSetFun(rid,rname) {
                //弹出一个窗口（弹出层）
                layui.use(['layer'],function() {
                    var layer = layui.layer;
                    var $=layui.$;
                    $.ajax({
                        type:'get',
                        url:'setFuns.jsp',
                        data:{rid:rid,rname:rname},//自动拼装
                        synch:true,//设置异步的ajax请求还是同步的
                        success:function (responseText) {
                            layer.open({
                                type:1,
                                area:[600,500],
                                title:'分配功能',
                                content:responseText,  //需要弹出层展示的网页模板内容，请求
                                btn:['保存','取消'],
                                yes:function () {
                                    //点击保存触发函数
                                }
                            });
                        }
                    });
                });
            }

c）将模板页展示layer弹出层
d）上部展示rid和rname
e）下部treetable展示功能列表信息

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%--设计分配功能的页面   语雀5.1--%>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
        <script src="./layui/layui.all.js"></script>
    </head>
    <body>
    <div class="layui-card">
        <div class="layui-card-header" style="padding: 10px;text-align: center">
            角色编号：<input class="layui-input layui-input-inline" value="${param.rid}" id="rid2" name="rid2" style="width:150px;" />
            角色名称：<input class="layui-input layui-input-inline" value="${param.rname}" id="rname2" name="rname2" style="width:150px;" />
        </div>
        <div class="layui-card-body">
            <%--数据展示的位置--%>
            <div id="funGrid"></div>
        </div>
    </div>
    <!-- layui-js代码实现 -->
    <script>
    var insTb ;
        layui.config({
            base: './treetable-lay/' //指定treetable组件所在的文件夹目录
        }).use(['treeTable'], function () { //use() 使用指定的layui组件
            var treeTable = layui.treeTable;
            insTb = treeTable.render({
                elem: '#funGrid',//指定渲染的位置
                url: 'funAll',//使用ajax技术展示请求表格中要展示的数据
                cols: [[//告诉组件按照什么样的表格形式去展示数据
                    {type:'numbers',width:70},     // <td>
                    {type:'checkbox',width:70},     // <td>
                    {title: '功能名称', field: 'fname'}//<td>
                ]],
                tree:{//设置查询数据之间的子父关系
                    iconIndex: 2,//指定展开合并图标出现在哪一列
                    idName:'fid',//按照id和pid的关系实现子父级别
                    pidName:'pid',
                    isPidData:true,//表示按照id和pid的关系实现子父级别
                },
                done:function () {
                }
            });
        });
    </script>
    </body>
</html>

③分配功能，打开弹出层时除了要展示功能列表,还要默认选中上一次分配的功能

方式一：可以使用2个查询语句，分别查出所有的功能(以供选择)，查出上一次已分配的功能
方式二：使用1个联合查询语句，查询出所有的功能额外还配有选中和未选中的状态

treetable组件复选框默认选中有2种方式
方式一：正常加载所有的功能信息，加载完毕，利用treetable的一个函数，选中指定的复选框
insTb.setChecked([‘1’,’2’]);
* 扩展： jquery.ajax 增加dataType:’json’ 将响应的json格式字符串自动json反序列化
* 注意：关于模板网页引用问题，编码是在2个文件中编写，但执行的时候2个文件内容会合并在一起

done:function () {
                //当treetable表格数据加载完毕时调用的函数
                //数据库查询当前角色上一次分配的功能编号
                //需要js代码发请求 location.href , window.open() , ajax
                $.ajax({
                    type:'get',
                    url:'findFidsByRole',
                    data:{rid:$("#rid2").val()},
                    synch:true,
                    success:function (responseText){
                        insTb.setChecked(responseText);
                        //JSON.parse(responseText);
                    },
                    dataType:'json'//告诉jQuery，将响应回来的字符串json反序列化
                });
            }

RoleController

@RequestMapping("/findFidsByRole")
    @ResponseBody
    public List<Integer> findFidsByRole(@RequestParam("rid") int rid){//语雀5.1
        return roleService.findFidsByRole(rid);
    }

RoleService

//语雀5.1
    public List<Integer> findFidsByRole(int rid){
        return roleDao.findFidsByRole(rid);
    }

RoleDao

@Select("select fid from t_role_fun where rid = #{rid}")
    public List<Integer> findFidsByRole(int rid);//语雀5.1

方式二：加载功能信息时就自动勾选了，要求查询结果中，每条记录都增加一个新的字段 LAY_CHECKED:true/false
* 建议使用Map装载查询结果

④保存，将角色id和选中的一堆fid存入关系表中
扩展：treetable提供了一个方法 insTb.checkStatus(); 获取选中数据
role.jsp

yes:function () {
                                    //点击保存触发函数
                                    //发送请求，传递rid，fids
                                    var checkboxs=insTb.checkStatus();//获取所有被选中的复选框
                                    var fids='';
                                    for(var i=0;i<checkboxs.length;i++){
                                        fids+=checkboxs[i].fid+',';
                                    }
                                    fids=fids.substring(0,fids.length-1);
                                    $.ajax({
                                        type:'post',
                                        url:'setF',
                                        data:{rid:rid,fids:fids},
                                        synch:true,
                                        success:function(respText){
                                            layer.alert('分配成功',function(){
                                                layer.closeAll();
                                            });
                                        }
                                    });
                                }

RoleController

@RequestMapping("/setF")
    public void setFuns(@RequestParam("rid") int rid,@RequestParam("fids") String fids){//语雀5.1
        System.out.println("setFuns123");
        roleService.setFuns(rid, fids);
    }

RoleService

//语雀5.1
    public void setFuns(int rid, String fids) {
        funDao.removeRelationship(rid);
        if (fids != null && !"".equals(fids)) {
            Map<String, Integer> param = new HashMap<>();
            param.put("rid", rid);
            String[] fid = fids.split(",");
            for (String f : fid) {
                param.put("fid", Integer.parseInt(f));
                funDao.addRelationship(param);
            }
        }
    }

FunDao

@Delete("delete from t_role_fun where rid=#{rid}")
    public void removeRelationship(int rid);//语雀5.1

    @Insert("insert into t_role_fun values(#{rid},#{fid})")
    public void addRelationship(Map<String,Integer> param);//语雀5.1