本次要分享的内容是之前教务系统中系统管理模块下的角色列表功能,包括对角色信息进行增删改查以及对当前的用户进行角色的分配(重点讲解)。
首先还是需要使用mysql数据库准备一张角色表,建表语句如下:
DROP TABLE IF EXISTS `sys_role`;
CREATE TABLE `sys_role` (
`role_id` int(11) NOT NULL AUTO_INCREMENT COMMENT '角色ID',
`role_name` varchar(225) DEFAULT NULL COMMENT '角色名称',
`state` varchar(225) DEFAULT NULL COMMENT '状态',
`decs` varchar(225) DEFAULT NULL COMMENT '描述',
PRIMARY KEY (`role_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci COMMENT='角色';
由于还要涉及到角色的分配问题所以还需要创建一张管理用户角色分配的中间表,建表语句如下:
DROP TABLE IF EXISTS `sys_user_role`;
CREATE TABLE `sys_user_role` (
`user_role_id` int(11) NOT NULL AUTO_INCREMENT COMMENT '用户角色表ID',
`user_id` int(11) DEFAULT NULL COMMENT 'ID',
`role_id` int(11) DEFAULT NULL COMMENT '角色ID',
PRIMARY KEY (`user_role_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci COMMENT='用户角色表';
因为要承载数据库的角色数据,所以需要一个角色实体类,系统角色实体类代码:
package com.cdtu.system.domain;
/**
* @author:lxj
* @date 2023/7/26 17:13
* 功能:角色类
*/
public class SysRole {
private int role_id;//角色ID
private String role_name;//角色名称
private String state;//状态
private String decs;//描述
public SysRole() {
}
public SysRole(int role_id, String role_name, String state, String decs) {
this.role_id = role_id;
this.role_name = role_name;
this.state = state;
this.decs = decs;
}
public int getRole_id() {
return role_id;
}
public void setRole_id(int role_id) {
this.role_id = role_id;
}
public String getRole_name() {
return role_name;
}
public void setRole_name(String role_name) {
this.role_name = role_name;
}
public String getState() {
return state;
}
public void setState(String state) {
this.state = state;
}
public String getDecs() {
return decs;
}
public void setDecs(String decs) {
this.decs = decs;
}
@Override
public String toString() {
return "SysRole{" +
"role_id=" + role_id +
", role_name='" + role_name + '\'' +
", state='" + state + '\'' +
", decs='" + decs + '\'' +
'}';
}
}
因为有中间表的参与,所以也需要把中间作为一个实体类,用户角色实体类代码:
/**
* @author:lxj
* @date 2023/7/27 15:10
* 功能:用户角色关联表类
*/
public class SysUserRole {
private int user_role_id;
private int user_id;
private int role_id;
public SysUserRole() {
}
public SysUserRole(int user_role_id, int user_id, int role_id) {
this.user_role_id = user_role_id;
this.user_id = user_id;
this.role_id = role_id;
}
public int getUser_role_id() {
return user_role_id;
}
public void setUser_role_id(int user_role_id) {
this.user_role_id = user_role_id;
}
public int getUser_id() {
return user_id;
}
public void setUser_id(int user_id) {
this.user_id = user_id;
}
public int getRole_id() {
return role_id;
}
public void setRole_id(int role_id) {
this.role_id = role_id;
}
@Override
public String toString() {
return "SysUserRole{" +
"user_role_id=" + user_role_id +
", user_id=" + user_id +
", role_id=" + role_id +
'}';
}
}
到此基本的数据准备工作已经差不多了,现在进入到项目中,通过业务分析,首先需要创建一个页面用来显示角色列表首页,通过编写jsp代码进行实现,角色列表首页效果图如下:
jsp代码如下:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<div align="center">
<h1>欢迎进入角色列表</h1>
<p><a href="${pageContext.servletContext.contextPath}/view/system/sysrole/addSysRole.jsp">增加</a></p>
<table border="1px" width="90%">
<tr>
<td>角色ID</td>
<td>角色名称</td>
<td>状态</td>
<td>描述</td>
<td colspan="3">操作</td>
</tr>
<c:forEach items="${roleList}" var="role">
<tr>
<td>${role.role_id}</td>
<td>${role.role_name}</td>
<td>${role.state}</td>
<td>${role.decs}</td>
<td><a href="${pageContext.servletContext.contextPath}/sysRoleController?method=updateUI&id=${role.role_id}">修改</a></td>
<td><a href="${pageContext.servletContext.contextPath}/sysRoleController?method=delete&id=${role.role_id}">删除</a></td>
<td><a href="${pageContext.servletContext.contextPath}/sysPermissionController?method=fpPermissionUI&id=${role.role_id}">分配权限</a></td>
</tr>
</c:forEach>
</table>
<p> </p>
<input type="button" value="首页">
<input type="button" value="上一页">
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="4">
<input type="button" value="5">
<input type="button" value="6">
<input type="button" value="7">
<input type="button" value="8">
<input type="button" value="9">
<input type="button" value="10">
<input type="button" value="下一页">
<input type="button" value="尾页">
</div>
</body>
</html>
前端页面架子搭好后,我们就需要去后台一一实现其中的功能,首先是角色的列表的显示功能,通过点击角色列表后跳转到角色首页自动调用查询角色全部信息的方法并返回查找的数据集合在角色首页页面上显示,查询全部角色控制层代码:
/**
* 查询全部角色数据
* @param req
* @param resp
* @return
*/
public String list(HttpServletRequest req, HttpServletResponse resp){
List<SysRole> roleList = RoleService.queryAllRole();
//返回数据
req.setAttribute("roleList",roleList);
// 跳转页面
return "view/system/sysrole/sysrole.jsp";
}
通过控制层去调用服务层的方法最终去调用数据层的sql查询语句拿取数据库的数据。
其次要实现的就是增加角色的功能,通过点击页面上的添加按钮跳转到增加页面,通过输入相应的角色信息然后提交,自动跳转到首页后显示加入后的所有角色信息。添加角色效果图如下:
jsp代码如下:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
<title>添加角色</title>
</head>
<body>
<div align="center">
<h1>添加角色</h1>
<form action="${pageContext.servletContext.contextPath}/sysRoleController?method=add" method="post">
<table>
<tr>
<td>角色名称</td>
<td><input type="text" name="role_name"></td>
</tr>
<tr>
<td>状态</td>
<td><input type="text" name="state"></td>
</tr>
<tr>
<td>描述</td>
<td><input type="text" name="decs"></td>
</tr>
<tr>
<td><input type="submit" value="增加"></td>
<td><input type="reset" value="重置"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
添加角色控制层代码:
/**
* 添加角色功能
* @param req
* @param resp
* @return
*/
public String add(HttpServletRequest req, HttpServletResponse resp){
SysRole sysRole = new SysRole();
// 接收数据
String role_name = req.getParameter("role_name");
String state = req.getParameter("state");
String decs = req.getParameter("decs");
//封装数据
sysRole.setRole_name(role_name);
sysRole.setState(state);
sysRole.setDecs(decs);
int n = RoleService.addRole(sysRole);
this.list(req, resp);
return "view/system/sysrole/sysrole.jsp";
}
通过控制层去调用服务层的方法并传入添加的角色信息对象最终去调用数据层的sql添加语句在数据库的添加一条角色数据。
然后是实现删除角色的功能,通过点击页面上的删除按钮,删除对应的一行角色信息,然后自动刷新首页的所有角色信息,由于删除操作直接就在首页界面上进行操作所以没有多余的页面,直接来看删除角色控制层代码:
/**
* 删除角色
* @param req
* @param resp
* @return
*/
public String delete(HttpServletRequest req, HttpServletResponse resp){
String id = req.getParameter("id");
int n = RoleService.deleteRole(id);
this.list(req,resp);
return "view/system/sysrole/sysrole.jsp";
}
通过控制层去调用服务层的方法并传入删除角色的id标识最终去调用数据层的sql删除语句在数据库的删除对应的角色数据。
再然后就是实现修改角色的功能,通过点击修改按钮,弹出修改界面,回显该角色的页面上的原来内容,通过修改其中的内容提交,然后自动刷新并显示首页修改后的所有角色信息,修改角色效果图如下:
jsp代码如下:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
<title>修改角色</title>
</head>
<body>
<div align="center">
<h1>修改角色</h1>
<form action="${pageContext.servletContext.contextPath}/sysRoleController?method=update" method="post">
<input type="hidden" name="role_id" value="${sysRole.role_id}" >
<table>
<tr>
<td>角色名称</td>
<td><input type="text" name="role_name" value="${sysRole.role_name}"></td>
</tr>
<tr>
<td>状态</td>
<td><input type="text" name="state" value="${sysRole.state}"></td>
</tr>
<tr>
<td>描述</td>
<td><input type="text" name="decs" value="${sysRole.decs}"></td>
</tr>
<tr>
<td><input type="submit" value="修改"></td>
<td><input type="reset" value="重置"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
修改角色控制层代码:
/**
* 跳转到更改页面
* @param req
* @param resp
* @return
*/
public String updateUI(HttpServletRequest req, HttpServletResponse resp){
//接收数据
String id = req.getParameter("id");
Integer role_id = Integer.valueOf(id);
//调用业务,根据id查询用户对象
SysRole sysRole = RoleService.queryRoleById(role_id);
//返回数据
req.setAttribute("sysRole",sysRole);
//跳转页面
return "view/system/sysrole/updateSysRole.jsp";
}
通过该控制层获取前台传递的角色的id信息去调用服务层的方法并传入角色的id标识最终去调用数据层的根据id查询对应的角色的sql语句在数据库的拿出对应的角色数据,并返回给真正的修改界面。
/**
* 角色更改功能
* @param req
* @param resp
* @return
* @throws ParseException
*/
public String update(HttpServletRequest req, HttpServletResponse resp) throws ParseException {
//接收数据
SysRole sysRole = new SysRole();
String id = req.getParameter("role_id");
Integer role_id = Integer.valueOf(id);
String role_name = req.getParameter("role_name");
String state = req.getParameter("state");
String decs = req.getParameter("decs");
//封装数据
sysRole.setRole_id(role_id);
sysRole.setRole_name(role_name);
sysRole.setState(state);
sysRole.setDecs(decs);
System.out.println(sysRole);
// 调用业务
int n = RoleService.updateRole(sysRole);
this.list(req, resp);
//跳转页面
return "view/system/sysrole/sysrole.jsp";
}
通过该控制层获取前台传递的角色的信息去调用服务层的方法并传入封装好的角色对象最终去调用数据层的根据id设置对应的角色信息的sql语句。
最后最终要的是实现角色分配的功能,通过点击用户列表界面上的角色分配,可以给对应的用户分配角色信息,如果已经分配过就回显对应的角色名称信息,点击提交分配角色按钮后会重新分配选中的角色,并返回用户列表首页。分配角色的效果图如下:
jsp代码如下:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
<title>分配角色</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title>简单实用教务后台管理系统网站</title>
<meta name="keywords" content="简单,实用,网站,后台管理,管理系统" />
<meta name="description" content="简单实用后台管理系统网站。" />
<link rel="stylesheet" href="${pageContext.servletContext.contextPath}/css/pintuer.css">
<link rel="stylesheet" href="${pageContext.servletContext.contextPath}/css/admin.css">
<script src="${pageContext.servletContext.contextPath}/js/jquery.js"></script>
</head>
<body>
<div align="center">
<h1>欢迎进入分配角色列表</h1>
<h3>${sysUser.name}</h3>
<hr>
</div>
<div align="center">
<form action="${pageContext.servletContext.contextPath}/sysRoleController?method=fpRole" method="post">
<input type="hidden" name="user_id" value="${sysUser.user_id}">
<c:forEach items="${sysRoles}" var="sysRole" >
<input type="radio" id="${sysRole.role_id}" name="role_id" value="${sysRole.role_id}"
<c:if test="${sysRole.role_id==Role.role_id}">checked="checked"</c:if>><div class="button-group" > <span class="button border-blue" > ${sysRole.role_name}</span> </div>
</c:forEach>
<br>
<input type="submit" class="button-group" value="分配角色">
</form>
</div>
</body>
</html>
分配角色控制层代码:
/**
* 跳转角色分配页面
* @param req
* @param resp
* @return
* @throws ParseException
*/
public String fpRoleUI(HttpServletRequest req, HttpServletResponse resp) throws ParseException {
//接收数据
//根据用户Id获取用户对象,并返回给页面
String id = req.getParameter("id");
Integer user_id = Integer.valueOf(id);
System.out.println("user_id" + user_id);
SysUser sysUser = sysUserService.queryUserById(user_id);
req.setAttribute("sysUser",sysUser);
//获取角色列表,并返回给页面
List<SysRole> sysRoles = RoleService.queryAllRole();
System.out.println(sysRoles);
req.setAttribute("sysRoles",sysRoles);
// 返回回显选中对应的角色对象
SysRole Role = RoleService.queryXZByRole_id(user_id);
req.setAttribute("Role",Role);
//封装数据
// 调用业务
//跳转页面
return "view/system/sysrole/fpRoleUI.jsp";
}
通过该控制层获取前台传递的用户的id信息去调用服务层的方法并传入当前选中用户的id标识最终去调用数据层的根据id查询对应的用户的sql语句在数据库的拿出对应的角色数据和调用角色全查询获取所有的角色信息以及根据用户id去通过中间表去查询对应的角色信息,并把查询到的用户对象、角色集合、橘色信息一并返回给真正的角色分配界面。
/**
* 角色分配
* @param req
* @param resp
* @return
*/
public String fpRole(HttpServletRequest req, HttpServletResponse resp){
//接收数据
String role_id = req.getParameter("role_id");
Integer roleId = Integer.valueOf(role_id);
SysRole sysRole = RoleService.queryRoleById(roleId);
String user_id = req.getParameter("user_id");
Integer userId = Integer.valueOf(user_id);
SysUser sysUser = sysUserService.queryUserById(userId);
// 封装数据
SysUserRole sysUserRole = new SysUserRole();
sysUserRole.setRole_id(roleId);
sysUserRole.setUser_id(userId);
//调用业务 添加用户角色
int n = userRoleService.addUserRole(sysUserRole);
//返回数据
List<SysUser> userList = sysUserService.queryAllUser();
req.setAttribute("userList",userList);
//跳转页面
return "view/system/sysuser/sysuser.jsp";
}
该控制层获取前台传递过来地角色id和用户id封装成用户角色对象,调用服务层的方法并把传入角色对象,调用数据层的添加sql语句加入到中间表中进行维护,最后再刷新用户列表首页。
到此角色列表下的所有功能实现完毕。