众筹网站项目第七天之用户角色分配(1)_众筹平台项目角色分配开发-CSDN博客

本文链接：https://blog.csdn.net/qq_43451907/article/details/106804503

打开原教程视频
注：本人是渣渣，有错请谅解。

实现用户角色分配功能

在这里插入图片描述

1、数据准备

insert into `t_role` (`id`, `name`) values('1','PM - 项目经理');
insert into `t_role` (`id`, `name`) values('2','SE - 软件工程师');
insert into `t_role` (`id`, `name`) values('3','PG - 程序员');
insert into `t_role` (`id`, `name`) values('4','TL - 组长');
insert into `t_role` (`id`, `name`) values('5','GL - 组长');
insert into `t_role` (`id`, `name`) values('6','QA - 品质保证');
insert into `t_role` (`id`, `name`) values('7','QC - 品质控制');
insert into `t_role` (`id`, `name`) values('8','SA - 软件架构师');
insert into `t_role` (`id`, `name`) values('9','CMO / CMS - 配置管理员');

在这里插入图片描述
2、页面准备

在main工程下的/WEB-INF/jsp/user目录下创建assignRole.jsp文件，在文件中添加下面代码

<%--
  Created by IntelliJ IDEA.
  User: 黄彬
  Date: 2020/6/15
  Time: 22:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh-CN">
<head>
    <base href="<%=basePath%>"/>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/doc.min.css">
    <style>
        .tree li {
            list-style-type: none;
            cursor:pointer;
        }
    </style>
</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <div><a class="navbar-brand" style="font-size:32px;" href="user.html">众筹平台 - 用户维护</a></div>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li style="padding-top:8px;">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default btn-success dropdown-toggle" data-toggle="dropdown">
                            <i class="glyphicon glyphicon-user"></i> ${sessionScope.user.username} <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#"><i class="glyphicon glyphicon-cog"></i> 个人设置</a></li>
                            <li><a href="#"><i class="glyphicon glyphicon-comment"></i> 消息</a></li>
                            <li class="divider"></li>
                            <li><a href="dispatcherController/logout.do"><i class="glyphicon glyphicon-off"></i> 退出系统</a></li>
                        </ul>
                    </div>
                </li>
                <li style="margin-left:10px;padding-top:8px;">
                    <button type="button" class="btn btn-default btn-danger">
                        <span class="glyphicon glyphicon-question-sign"></span> 帮助
                    </button>
                </li>
            </ul>
            <form class="navbar-form navbar-right">
                <input type="text" class="form-control" placeholder="Search...">
            </form>
        </div>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <div class="tree">
<%--                <ul style="padding-left:0px;" class="list-group">--%>
<%--                    <li class="list-group-item tree-closed" >--%>
<%--                        <a href="main.html"><i class="glyphicon glyphicon-dashboard"></i> 控制面板</a>--%>
<%--                    </li>--%>
<%--                    <li class="list-group-item">--%>
<%--                        <span><i class="glyphicon glyphicon glyphicon-tasks"></i> 权限管理 <span class="badge" style="float:right">3</span></span>--%>
<%--                        <ul style="margin-top:10px;">--%>
<%--                            <li style="height:30px;">--%>
<%--                                <a href="user.html" style="color:red;"><i class="glyphicon glyphicon-user"></i> 用户维护</a>--%>
<%--                            </li>--%>
<%--                            <li style="height:30px;">--%>
<%--                                <a href="role.html"><i class="glyphicon glyphicon-certificate"></i> 角色维护</a>--%>
<%--                            </li>--%>
<%--                            <li style="height:30px;">--%>
<%--                                <a href="permission.html"><i class="glyphicon glyphicon-lock"></i> 许可维护</a>--%>
<%--                            </li>--%>
<%--                        </ul>--%>
<%--                    </li>--%>
<%--                    <li class="list-group-item tree-closed">--%>
<%--                        <span><i class="glyphicon glyphicon-ok"></i> 业务审核 <span class="badge" style="float:right">3</span></span>--%>
<%--                        <ul style="margin-top:10px;display:none;">--%>
<%--                            <li style="height:30px;">--%>
<%--                                <a href="auth_cert.html"><i class="glyphicon glyphicon-check"></i> 实名认证审核</a>--%>
<%--                            </li>--%>
<%--                            <li style="height:30px;">--%>
<%--                                <a href="auth_adv.html"><i class="glyphicon glyphicon-check"></i> 广告审核</a>--%>
<%--                            </li>--%>
<%--                            <li style="height:30px;">--%>
<%--                                <a href="auth_project.html"><i class="glyphicon glyphicon-check"></i> 项目审核</a>--%>
<%--                            </li>--%>
<%--                        </ul>--%>
<%--                    </li>--%>
<%--                    <li class="list-group-item tree-closed">--%>
<%--                        <span><i class="glyphicon glyphicon-th-large"></i> 业务管理 <span class="badge" style="float:right">7</span></span>--%>
<%--                        <ul style="margin-top:10px;display:none;">--%>
<%--                            <li style="height:30px;">--%>
<%--                                <a href="cert.html"><i class="glyphicon glyphicon-picture"></i> 资质维护</a>--%>
<%--                            </li>--%>
<%--                            <li style="height:30px;">--%>
<%--                                <a href="type.html"><i class="glyphicon glyphicon-equalizer"></i> 分类管理</a>--%>
<%--                            </li>--%>
<%--                            <li style="height:30px;">--%>
<%--                                <a href="process.html"><i class="glyphicon glyphicon-random"></i> 流程管理</a>--%>
<%--                            </li>--%>
<%--                            <li style="height:30px;">--%>
<%--                                <a href="advertisement.html"><i class="glyphicon glyphicon-hdd"></i> 广告管理</a>--%>
<%--                            </li>--%>
<%--                            <li style="height:30px;">--%>
<%--                                <a href="message.html"><i class="glyphicon glyphicon-comment"></i> 消息模板</a>--%>
<%--                            </li>--%>
<%--                            <li style="height:30px;">--%>
<%--                                <a href="project_type.html"><i class="glyphicon glyphicon-list"></i> 项目分类</a>--%>
<%--                            </li>--%>
<%--                            <li style="height:30px;">--%>
<%--                                <a href="tag.html"><i class="glyphicon glyphicon-tags"></i> 项目标签</a>--%>
<%--                            </li>--%>
<%--                        </ul>--%>
<%--                    </li>--%>
<%--                    <li class="list-group-item tree-closed" >--%>
<%--                        <a href="param.html"><i class="glyphicon glyphicon-list-alt"></i> 参数管理</a>--%>
<%--                    </li>--%>
<%--                </ul>--%>
                <jsp:include page="/WEB-INF/jsp/common/menu.jsp"></jsp:include>
            </div>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <ol class="breadcrumb">
                <li><a href="#">首页</a></li>
                <li><a href="#">数据列表</a></li>
                <li class="active">分配角色</li>
            </ol>
            <div class="panel panel-default">
                <div class="panel-body">
                    <form role="form" class="form-inline">
                        <div class="form-group">
                            <label for="exampleInputPassword1">未分配角色列表</label><br>
                            <select id="unAssign" class="form-control" multiple size="10" style="width:150px;overflow-y:auto;">
<%--                      展示未分配的角色          --%>
                                <c:forEach items="${unAssignRoles}" var="unAssignRole">
                                    <option value="${unAssignRole.id}">${unAssignRole.name}</option>
                                </c:forEach>

                            </select>
                        </div>
                        <div class="form-group">
                            <ul>
                                <li id="unAssignButton" class="btn btn-default glyphicon glyphicon-chevron-right"></li>
                                <br>
                                <li id="assignButton" class="btn btn-default glyphicon glyphicon-chevron-left" style="margin-top:20px;"></li>
                            </ul>
                        </div>
                        <div class="form-group" style="margin-left:40px;">
                            <label for="exampleInputPassword1">已分配角色列表</label><br>
                            <select id="assign" class="form-control" multiple size="10" style="width:150px;overflow-y:auto;">
<%--                                展示已分配的角色--%>
                                <c:forEach items="${assignRoles}" var="assignRole">
                                    <option value="${assignRole.id}">${assignRole.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">帮助</h4>
            </div>
            <div class="modal-body">
                <div class="bs-callout bs-callout-info">
                    <h4>测试标题1</h4>
                    <p>测试内容1，测试内容1，测试内容1，测试内容1，测试内容1，测试内容1</p>
                </div>
                <div class="bs-callout bs-callout-info">
                    <h4>测试标题2</h4>
                    <p>测试内容2，测试内容2，测试内容2，测试内容2，测试内容2，测试内容2</p>
                </div>
            </div>
            <!--
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
            -->
        </div>
    </div>
</div>
<script src="jquery/jquery-2.1.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="script/docs.min.js"></script>
<script type="text/javascript" src="jquery/layer/layer.js"></script>
<script type="text/javascript">
    $(function () {
        $(".list-group-item").click(function(){
            if ( $(this).find("ul") ) {
                $(this).toggleClass("tree-closed");
                if ( $(this).hasClass("tree-closed") ) {
                    $("ul", this).hide("fast");
                } else {
                    $("ul", this).show("fast");
                }
            }
        });
    });

    //添加角色按钮事件处理
    $("#unAssignButton").click(function () {
        //获取选中的角色的id
       var items = $("#unAssign option:selected");

       //判断长度
        if (items.length==0) {
            layer.msg("请选择分配的角色", {time:1500, icon:5, shift:6}); //弹出时间，图标，特效
            return false;
        }else {
            //封装数据到json
            var jsonObject = {
                id : "${param.id}"//用户id
            };

            $.each(items,function (index,role) {//角色id
                jsonObject["roleID["+index+"]"] = this.value;
            });
            var saving=-1;
            $.ajax({
               type : "post",
               data : jsonObject,
               url : "userController/saveUserRole" ,

                beforeSend : function(){
                   saving=layer.msg('Loading', {icon: 16});
                   return true;
                },
                success : function (result) {
                    layer.close(saving);
                    if(result.success) {
                        $("#assign").append(items.clone());
                        items.remove();
                    }else {
                        layer.msg("分配失败！！！", {time:1500, icon:5, shift:6}); //弹出时间，图标，特效
                    }
                },
                error : function (result) {
                    layer.msg(result.message, {time:1500, icon:5, shift:6}); //弹出时间，图标，特效
                }
            });

        }

    });
    //取消角色按钮事件处理
    $("#assignButton").click(function () {
        //获取选中的角色的id
        var items = $("#assign option:selected");//取消已选定的角色
        //判断长度
        if (items.length==0) {
            layer.msg("请选择删除的角色", {time:1500, icon:5, shift:6}); //弹出时间，图标，特效
            return false;
        }else {

            //封装数据到json
            var jsonObject = {//用户id
                id : "${param.id}"
            };

            $.each(items,function (index,role) {//角色id
                jsonObject["roleID["+index+"]"] = this.value;
            });
            var deleting=-1;
            $.ajax({
                type : "post",
                data : jsonObject,
                url : "userController/deleteUserRole" ,

                beforeSend : function(){
                    deleting=layer.msg('Loading', {icon: 16});
                    return true;
                },
                success : function (result) {
                    layer.close(deleting);
                    if(result.success) {
                        $("#unAssign").append(items.clone());//将选定的角色进行添加
                        items.remove();
                    }else {
                        layer.msg("删除失败！！！", {time:1500, icon:5, shift:6}); //弹出时间，图标，特效
                    }
                },
                error : function (result) {
                    layer.msg(result.message, {time:1500, icon:5, shift:6}); //弹出时间，图标，特效
                }
            });
        }
    });
</script>
</body>
</html>

3、添加页面跳转的处理路径和controller方法

在这里插入图片描述

/**
     * 跳转至角色分配页面
     * @return
     */
    @RequestMapping(value = "/toAssignRole")
    public String toAssignRole(Integer id, Map<String, List<Role>> roleMap){
        List<Role> assignRoles = new ArrayList<Role>();
        List<Role> unAssignRoles = new ArrayList<Role>();

        //查询该用户已分配得角色的id
        List<Integer> RoleIDs = userService.selectAssignRole(id);
        //查询所有角色
        List<Role> allRole = userService.selectAllRole();

        for (Role role : allRole) { //对角色是否分配进行判断
            if (RoleIDs.contains(role.getId())){
                assignRoles.add(role);
            }else { 
                unAssignRoles.add(role);
            }
        }
        //将数据封装并返回前端页面
        roleMap.put("assignRoles",assignRoles);
        roleMap.put("unAssignRoles",unAssignRoles);

        return "user/assignRole";
    }

 /**
     * 处理用户角色删除
     * @param id
     * @param data
     * @return
     */
    @ResponseBody
    @RequestMapping(value = "/deleteUserRole")
    public Object deleteUserRole(Integer id , Data data){
        AjaxResult result = new AjaxResult();
        try {
            userService.deleteUserRole(id ,data);
            result.setSuccess(true);
        }catch (Exception e){
            result.setSuccess(false);
            result.setMessage("出现异常！！！");
        }
        return result;
    }

 /**
     * 处理用户角色分配
     * @param id
     * @param data
     * @return
     */
    @ResponseBody
    @RequestMapping(value = "/saveUserRole")
    public Object saveUserRole(Integer id , Data data){
        AjaxResult result = new AjaxResult();
        try {
            userService.saveUserRole(id ,data);
            result.setSuccess(true);
        }catch (Exception e){
            e.printStackTrace();
            result.setSuccess(false);
            result.setMessage("出现异常！！！");
        }
        return result;
    }

5、service、dao层的数据处理和sql查询语句

页面数据查询：

 public List<Integer> selectAssignRole(int userID) {
        return userMapper.selectAssignRole(userID);
    }

 public List<Role> selectAll() {
        return roleMapper.selectAll();
    }

<select id="selectAssignRole" resultType="int" parameterType="int" >
    select roleid from t_user_role where userid = #{userID}
  </select>

<select id="selectAllRole" resultType="com.bin.crowdfunding.bean.Role">
    select * from t_role
  </select>

添加用户角色：

public Integer saveUserRole(Integer userID, Data data) {
        return userMapper.saveUserRole(userID,data);
    }

<insert id="saveUserRole">
    <foreach collection="data.roleID" separator=";" item="roleID">
      insert into t_user_role(userid , roleid) values(#{userID},#{roleID})
    </foreach>
  </insert>

删除用户角色：

public Integer deleteUserRole(Integer userID, Data data) {
        return userMapper.deleteUserRole(userID,data);
    }

<delete id="deleteUserRole">
    delete from t_user_role where userid= #{userID} and roleid in
    <foreach collection="data.roleID" open="(" separator="," close=")" item="roleID">
      #{roleID}
    </foreach>
  </delete>