打开原教程视频
注:本人是渣渣,有错请谅解。
实现用户角色分配功能
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">×</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>
6、测试效果
查看数据库的t_user_role表,检查数据的真实性: