This repository has been archived on 2024-07-21. You can view files and clone it, but cannot push or open issues or pull requests.
java_ee_project/project2/web/WEB-INF/views/usermanage.jsp
Chenx221 2cd656e4c0 用户管理中创建用户功能完成
已登录用户不应能够再访问login登录页

Signed-off-by: Chenx221 <chenx221@yandex.com>
2023-06-15 10:56:47 +08:00

393 lines
22 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<meta http-equiv="x-ua-compatible" content="ie=edge"/>
<title>用户管理</title>
<script src="${pageContext.request.contextPath}/resources/js/jquery-3.7.0.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/mdb.min.css"/>
<style>
.table-container {
min-width: 60vw;
/* 设置最小宽度为视窗宽度的80% */
min-height: 80vh;
/* 设置最小高度为视窗高度的80% */
/*display: flex;*/
align-items: center;
justify-content: center;
}
.table-container table {
width: 100%;
/*height: 100%;*/
}
</style>
</head>
<body style="font-family: 'Noto Sans SC Regular',serif">
<!--Main Navigation-->
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="z-index: 1;min-height: 58.59px">
<div class="container">
<button class="navbar-toggler" type="button" data-mdb-toggle="collapse"
data-mdb-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<a class="navbar-brand mt-2 mt-lg-0" href="#">
<i class="fas fa-chalkboard-user me-2"></i>
教务管理系统
</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">首页</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button"
data-mdb-toggle="dropdown" aria-expanded="false">
学生管理
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown1">
<li><a class="dropdown-item" href="#">学生信息查询</a></li>
<li><a class="dropdown-item" href="#">学生信息管理</a></li>
<li><a class="dropdown-item" href="#">学生信息管理</a></li>
<li>
<hr class="dropdown-divider"/>
</li>
<li><a class="dropdown-item" href="#">学生成绩管理</a></li>
<li><a class="dropdown-item" href="#">学生成绩管理</a></li>
<li><a class="dropdown-item" href="#">学生成绩管理</a></li>
<li>
<hr class="dropdown-divider"/>
</li>
<li><a class="dropdown-item" href="#">学生选课管理</a></li>
<li><a class="dropdown-item" href="#">学生选课管理</a></li>
<li><a class="dropdown-item" href="#">学生选课管理</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button"
data-mdb-toggle="dropdown" aria-expanded="false">
教师管理
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown2">
<li><a class="dropdown-item" href="#">教师信息管理</a></li>
<li><a class="dropdown-item" href="#">教师课程管理</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown3" role="button"
data-mdb-toggle="dropdown" aria-expanded="false">
课程管理
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown3">
<li><a class="dropdown-item" href="#">课程信息管理</a></li>
<li><a class="dropdown-item" href="#">课程安排管理</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown4" role="button"
data-mdb-toggle="dropdown" aria-expanded="false">
系统管理
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown4">
<li><a class="dropdown-item" href="#">个人设定</a></li>
<li><a class="dropdown-item" href="#">用户管理</a></li>
<li><a class="dropdown-item" href="#">日志管理</a></li>
<li><a class="dropdown-item" href="#">版本信息</a></li>
</ul>
</li>
</ul>
</div>
<div class="dropdown">
<a class="dropdown-toggle d-flex align-items-center hidden-arrow" href="#"
id="navbarDropdownMenuAvatar" role="button" data-mdb-toggle="dropdown" aria-expanded="false">
<i class="fas fa-circle-user fa-lg me-1"></i>
${username}
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownMenuAvatar">
<li>
<a class="dropdown-item" href="${pageContext.request.contextPath}/logout">登出</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!--Main Navigation-->
<!--Main layout-->
<main>
<div class="bg-image shadow-2-strong vh-100"
style="background-image: url('${pageContext.request.contextPath}/resources/img/jason-blackeye-nyL-rzwP-Mk-unsplash.jpg'); margin-top: -58.59px;">
<div class="mask d-flex align-items-center h-100" style="background-color: hsla(0, 0%, 100%, 0.5);">
<div class="container d-flex justify-content-center">
<button type="button" class="btn btn-primary" onclick="location.href='../dashboard'">返回</button>
<div class="table-container rounded-4 shadow-3-strong"
style="background-color: rgba(255,255,255,0.9); overflow-y: auto; max-height: 400px">
<table class="table table-striped table-hover border-primary align-middle">
<thead>
<tr>
<th scope="col">用户ID</th>
<th scope="col">用户名(登录用)</th>
<th scope="col">身份</th>
<th scope="col">身份ID</th>
<th scope="col">禁用状态</th>
<th scope="col" class="text-center">操作</th>
</tr>
</thead>
<tbody>
<c:forEach var="user" items="${userList}">
<tr>
<td>${user.id}</td>
<td>${user.username}</td>
<td>${user.roles}</td>
<td>${user.detail}</td>
<td>${user.disabled_str}</td>
<td class="text-center">
<div class="btn-group" role="group" aria-label="Basic example">
<c:choose>
<c:when test="${user.disabled_str == false}">
<button type="button" class="btn btn-danger"><i
class="fas fa-ban me-1"></i>禁用账户
</button>
</c:when>
<c:when test="${user.disabled_str == true}">
<button type="button" class="btn btn-success"><i
class="fas fa-circle-check me-1"></i>启用账户
</button>
</c:when>
</c:choose>
<button type="button" class="btn btn-primary" onclick="resetPWD(${user.id})"><i
class="fas fa-arrow-rotate-right me-1"></i>重设密码
</button>
</div>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<div class="container">
<div class="card rounded-4 shadow-3-strong" style="min-width: 244px">
<!-- Tabs navs -->
<ul class="nav nav-tabs" id="ex1" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active fs-6" id="ex1-tab-1" data-mdb-toggle="tab" href="#ex1-tabs-1"
role="tab" aria-controls="ex1-tabs-1" aria-selected="true">创建账户</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link fs-6" id="ex1-tab-2" data-mdb-toggle="tab" href="#ex1-tabs-2"
role="tab" aria-controls="ex1-tabs-2" aria-selected="true">密码重置</a>
</li>
</ul>
<!-- Tabs navs -->
<hr class="hr" style="margin: 1px"/>
<!-- Tabs content -->
<div class="tab-content" id="ex1-content">
<div class="tab-pane fade show active" id="ex1-tabs-1" role="tabpanel"
aria-labelledby="ex1-tab-1">
<div class="card-body" style="min-width: 175px">
<form action="create" method="post">
<div class="row mb-2">
<div class="col-12">
<div class="form-outline">
<input type="text" id="typeText1" class="form-control"
name="username" required/>
<label class="form-label" for="typeText1">用户名</label>
</div>
</div>
</div>
<div class="row mb-2 mt-2">
<div class="col-12">
<div class="form-outline">
<input type="password" id="typeText2" class="form-control"
name="password" required/>
<label class="form-label" for="typeText2">密码</label>
</div>
</div>
</div>
<div class="row mb-2 mt-2">
<div class="col-12">
<div class="form-outline">
<input type="password" id="typeText3" class="form-control"
name="re_password" required/>
<label class="form-label" for="typeText3">重复密码</label>
</div>
</div>
</div>
<div class="row mb-2 mt-2">
<div class="col-12">
<div class="form-outline">
<input type="number" id="typeText4" class="form-control"
name="roleid" disabled/>
<label class="form-label" for="typeText4">身份ID</label>
</div>
</div>
</div>
<div class="row mb-2 mt-2">
<div class="col-12">
<label class="form-label" for="role-select">权限组:</label>
<select name="role" id="role-select" required>
<option value="admin">管理员</option>
<option value="teacher">教师</option>
<option value="student">学生</option>
</select>
</div>
</div>
<div class="row mb-2 mt-4">
<div class="col-lg-6 text-center">
<button type="submit" class="btn btn-primary">创建
</button>
</div>
<div class="col-lg-6 text-center">
<button type="reset" class="btn btn-secondary">重置</button>
</div>
</div>
</form>
</div>
</div>
<div class="tab-pane fade" id="ex1-tabs-2" role="tabpanel"
aria-labelledby="ex1-tab-2">
<div class="card-body" style="min-width: 175px">
<form action="" method="post">
<div class="row mb-2">
<div class="col-12">
<div class="form-outline">
<input type="number" id="typeText5" class="form-control"
name="id" readonly required/>
<label class="form-label" for="typeText5">用户ID</label>
</div>
</div>
</div>
<div class="row mb-2 mt-2">
<div class="col-12">
<div class="form-outline">
<input type="password" id="typeText6" class="form-control"
name="password" required/>
<label class="form-label" for="typeText6">新的密码(必填)</label>
</div>
</div>
</div>
<div class="row mb-2 mt-2">
<div class="col-12">
<div class="form-outline">
<input type="password" id="typeText7" class="form-control"
name="re_password" required/>
<label class="form-label" for="typeText7">重复密码(必填)</label>
</div>
</div>
</div>
<div class="row mb-2 mt-4">
<div class="col-lg-6 text-center">
<button type="submit" class="btn btn-primary">重置
</button>
</div>
<div class="col-lg-6 text-center">
<button type="reset" class="btn btn-secondary">清除</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Tabs content -->
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">
<i class="fas fa-circle-exclamation me-2"></i>错误
</h5>
<button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<c:if test="${not empty errorMessage}">
${errorMessage}
</c:if>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-mdb-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel2"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel2">
<i class="fas fa-circle-check me-2"></i>成功
</h5>
<button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<c:if test="${not empty successMessage}">
${successMessage}
</c:if>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-mdb-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
</main>
<!--Main layout-->
<!-- Footer -->
<footer class="bg-link text-center text-lg-start ">
</footer>
<!-- Footer -->
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/mdb.min.js"></script>
<script>
$(document).ready(function () {
// 判断模型中是否存在错误信息
<c:if test="${not empty errorMessage && errorMessage ne 'null'}">
$('#exampleModal').modal('show');
</c:if>
<c:if test="${not empty successMessage && successMessage ne 'null'}">
$('#exampleModal2').modal('show');
</c:if>
});
function resetPWD(id) {
$('#typeText5').val(id);
$('#ex1-tab-2').tab('show');
}
// 监听权限组选择框的变化
document.getElementById('role-select').addEventListener('change', function() {
var roleSelect = document.getElementById('role-select');
var typeText4 = document.getElementById('typeText4');
// 如果选择的是管理员权限组则禁用身份ID输入框否则启用身份ID输入框
typeText4.disabled = roleSelect.value === 'admin';
});
</script>
</body>
</html>