2023-06-19 16:23:27 +08:00
|
|
|
|
<%@ 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>
|
|
|
|
|
|
.tab-pane {
|
|
|
|
|
|
min-height: 500px;
|
|
|
|
|
|
}
|
|
|
|
|
|
</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="function goBack() {
|
|
|
|
|
|
window.history.back(); //返回上一页
|
|
|
|
|
|
}
|
|
|
|
|
|
goBack()">返回
|
|
|
|
|
|
</button>
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
|
<div class="card rounded-4 shadow-3-strong" style="min-width: 244px">
|
|
|
|
|
|
<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>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
<hr class="hr" style="margin: 1px"/>
|
|
|
|
|
|
<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">
|
2023-06-19 17:53:31 +08:00
|
|
|
|
<div class="note note-primary mb-3" id="note" style="display: none">
|
|
|
|
|
|
<strong>提示:</strong> 用户头像更新成功
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
|
<div class="col-lg-2 text-center">
|
|
|
|
|
|
<p>
|
|
|
|
|
|
头像设置:
|
|
|
|
|
|
</p>
|
2023-06-19 16:23:27 +08:00
|
|
|
|
</div>
|
2023-06-19 17:53:31 +08:00
|
|
|
|
<div class="col-lg-2">
|
|
|
|
|
|
<i class="far fa-circle-user fa-8x" id="default_avatar"
|
|
|
|
|
|
style="display: none"></i>
|
|
|
|
|
|
<img src="/person/image" class="img-fluid rounded-circle" alt="avatar"
|
|
|
|
|
|
style="height: 128px;width: 128px;display: none"
|
|
|
|
|
|
id="custom_avatar"/>
|
2023-06-19 16:23:27 +08:00
|
|
|
|
</div>
|
2023-06-19 17:53:31 +08:00
|
|
|
|
<div class="col-lg-4">
|
|
|
|
|
|
<label class="form-label"
|
|
|
|
|
|
for="customFile">请选择要上传的图片(大小<15MB)</label>
|
|
|
|
|
|
<input type="file" class="form-control" id="customFile" name="avatar"/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
|
<div class="col-lg-12 text-center mt-lg-5">
|
|
|
|
|
|
<%-- Todo: 换成消息框--%>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2023-06-19 16:23:27 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</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-info 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 message}">
|
|
|
|
|
|
${message}
|
|
|
|
|
|
</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 message && message ne 'null'}">
|
|
|
|
|
|
$('#exampleModal').modal('show');
|
|
|
|
|
|
</c:if>
|
|
|
|
|
|
|
2023-06-19 17:53:31 +08:00
|
|
|
|
fetch("/person/image")
|
|
|
|
|
|
.then(function (response) {
|
|
|
|
|
|
if (response.ok) {
|
|
|
|
|
|
// 图像存在，显示自定义头像
|
|
|
|
|
|
$('#custom_avatar').show();
|
|
|
|
|
|
} else {
|
|
|
|
|
|
// 图像不存在，显示默认头像
|
|
|
|
|
|
$('#default_avatar').show();
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch(function (error) {
|
|
|
|
|
|
console.log("请求失败:", error);
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
$('#customFile').on('change', function () {
|
2023-06-19 16:23:27 +08:00
|
|
|
|
var file = this.files[0]; // 获取选择的文件
|
|
|
|
|
|
|
|
|
|
|
|
// 检查是否选择了文件
|
|
|
|
|
|
if (!file) {
|
|
|
|
|
|
// 如果没有选择文件，执行相应的操作
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 创建FormData对象，将文件数据附加到其中
|
|
|
|
|
|
var formData = new FormData();
|
|
|
|
|
|
formData.append('avatar', file);
|
|
|
|
|
|
|
|
|
|
|
|
// 发送AJAX请求到后端的uploadAvatar方法
|
|
|
|
|
|
$.ajax({
|
|
|
|
|
|
url: 'uploadAvatar',
|
|
|
|
|
|
type: 'POST',
|
|
|
|
|
|
data: formData,
|
|
|
|
|
|
processData: false, // 告诉jQuery不要处理FormData对象
|
|
|
|
|
|
contentType: false, // 告诉jQuery不要设置Content-Type请求头
|
2023-06-19 17:53:31 +08:00
|
|
|
|
success: function () {
|
2023-06-19 16:23:27 +08:00
|
|
|
|
$('#default_avatar').hide(); // 隐藏默认头像
|
2023-06-19 17:53:31 +08:00
|
|
|
|
$('#custom_avatar').show(); // 显示自定义头像
|
|
|
|
|
|
$('#note').show(); // 显示提示消息
|
2023-06-19 16:23:27 +08:00
|
|
|
|
},
|
2023-06-19 17:53:31 +08:00
|
|
|
|
error: function (xhr, status, error) {
|
2023-06-19 16:23:27 +08:00
|
|
|
|
console.log('上传失败:', error);
|
|
|
|
|
|
alert('上传失败，请重试');
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
|
|
</html>
|
