102 lines
3.5 KiB
Plaintext
102 lines
3.5 KiB
Plaintext
|
<!-- WEB-INF/jsp/register.jsp -->
|
|||
|
|
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<title>注册 - 学生考勤系统</title>
|
|||
|
|
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
|
|||
|
|
<style>
|
|||
|
|
body { font-family: Arial, sans-serif; margin: 50px; }
|
|||
|
|
.container { max-width: 400px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; border-radius: 5px; }
|
|||
|
|
.form-group { margin-bottom: 15px; }
|
|||
|
|
label { display: block; margin-bottom: 5px; }
|
|||
|
|
input[type="text"], input[type="password"], select { width: 100%; padding: 8px; box-sizing: border-box; }
|
|||
|
|
button { width: 100%; padding: 10px; background-color: #2196F3; color: white; border: none; cursor: pointer; }
|
|||
|
|
.error { color: red; margin-top: 10px; }
|
|||
|
|
.success { color: green; margin-top: 10px; }
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="container">
|
|||
|
|
<h2>用户注册</h2>
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label>用户名:</label>
|
|||
|
|
<input type="text" id="username" placeholder="请输入用户名">
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label>密码:</label>
|
|||
|
|
<input type="password" id="password" placeholder="请输入密码（至少6位）">
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label>确认密码:</label>
|
|||
|
|
<input type="password" id="confirmPassword" placeholder="请再次输入密码">
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label>角色:</label>
|
|||
|
|
<select id="role">
|
|||
|
|
<option value="STUDENT">学生</option>
|
|||
|
|
<option value="TEACHER">教师</option>
|
|||
|
|
<option value="ADMIN">管理员</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<button onclick="register()">注册</button>
|
|||
|
|
<button onclick="goToLogin()" style="margin-top: 10px; background-color: #4CAF50;">返回登录</button>
|
|||
|
|
<div id="message" class="error"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
function register() {
|
|||
|
|
const username = $("#username").val();
|
|||
|
|
const password = $("#password").val();
|
|||
|
|
const confirmPassword = $("#confirmPassword").val();
|
|||
|
|
const role = $("#role").val();
|
|||
|
|
|
|||
|
|
// 简单验证
|
|||
|
|
if (!username || username.length < 3) {
|
|||
|
|
$("#message").text("用户名至少3位").addClass("error").removeClass("success");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!password || password.length < 6) {
|
|||
|
|
$("#message").text("密码至少6位").addClass("error").removeClass("success");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (password !== confirmPassword) {
|
|||
|
|
$("#message").text("两次密码不一致").addClass("error").removeClass("success");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
$.ajax({
|
|||
|
|
// 正确写法：拼接上下文路径
|
|||
|
|
url: "${pageContext.request.contextPath}/api/user/register",
|
|||
|
|
type: "POST",
|
|||
|
|
contentType: "application/json",
|
|||
|
|
data: JSON.stringify({
|
|||
|
|
username: username,
|
|||
|
|
password: password,
|
|||
|
|
role: role
|
|||
|
|
}),
|
|||
|
|
success: function(response) {
|
|||
|
|
if (response.success) {
|
|||
|
|
$("#message").text("注册成功，请登录").addClass("success").removeClass("error");
|
|||
|
|
// 注册成功后跳转登录页（正确写法）
|
|||
|
|
setTimeout(function() {
|
|||
|
|
window.location.href = "${pageContext.request.contextPath}/login";
|
|||
|
|
}, 2000);
|
|||
|
|
|
|||
|
|
} else {
|
|||
|
|
$("#message").text(response.message).addClass("error").removeClass("success");
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
error: function() {
|
|||
|
|
$("#message").text("注册失败，请检查网络").addClass("error").removeClass("success");
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function goToLogin() {
|
|||
|
|
window.location.href = "${pageContext.request.contextPath}/login";
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|