You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
3.4 KiB
94 lines
3.4 KiB
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
|
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
|
|
<html>
|
|
<head>
|
|
<title>主界面</title>
|
|
<link rel="stylesheet" href="static/css/styles.css">
|
|
<style>
|
|
.my-class {
|
|
text-align: center;
|
|
}
|
|
/* 新增样式：登录表单容器 */
|
|
.login-container {
|
|
position: relative; /* 相对定位，用于子元素绝对定位 */
|
|
width: 300px; /* 固定宽度 */
|
|
margin: 20px auto; /* 居中显示 */
|
|
padding: 20px;
|
|
border: 1px solid #eee; /* 轻微边框 */
|
|
}
|
|
/* 按钮容器样式 */
|
|
.button-group {
|
|
display: flex; /* 弹性布局 */
|
|
justify-content: space-between; /* 两端对齐 */
|
|
margin-top: 15px; /* 与上方内容间距 */
|
|
}
|
|
/* 基础按钮样式 */
|
|
.base-btn {
|
|
padding: 6px 12px;
|
|
border: 1px solid #ccc;
|
|
background-color: #f5f5f5;
|
|
cursor: pointer; /* 鼠标悬停显示手型 */
|
|
text-decoration: none; /* 去除链接下划线 */
|
|
color: #333; /* 文字颜色 */
|
|
font-size: 14px;
|
|
}
|
|
.base-btn:hover {
|
|
background-color: #e0e0e0; /* 悬停效果 */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<a href="users/findUsers">测试查询</a>
|
|
<hr>
|
|
|
|
<!-- 登录区域 -->
|
|
<div class="login-container">
|
|
<div class="my-class">
|
|
<h3>用户登录</h3>
|
|
<form method="post" action="<c:url value="/users/login"/>">
|
|
用户：<input type="text" name="username"><br><br>
|
|
密码：<input type="password" name="password"><br><br>
|
|
|
|
<div class="input-icon">
|
|
<input class="form-control" style="width:180px;" type="text" id="verifyCode" name="verifyCode" placeholder="验证码" maxlength="4">
|
|
<img style="position:absolute;right: 40px;top: 168px;" src="<c:url value="/users/getVerifyCode"/>" width="110" height=24" id="verifyCodeImage" onclick="changeImage();">
|
|
</div>
|
|
<br>
|
|
|
|
<div class="button-group">
|
|
<a href="#" class="base-btn" onclick="document.getElementById('registerForm').submit()">注册</a>
|
|
<input type="submit" value="登录" class="base-btn">
|
|
</div>
|
|
<br>
|
|
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 注册表单（保持原有逻辑，隐藏显示） -->
|
|
<div style="display:none;">
|
|
<form id="registerForm" method="post" action="<c:url value="/users/insert"/>">
|
|
<!-- 注册表单字段会自动获取页面中输入的用户名和密码 -->
|
|
<input type="hidden" name="username" id="regUsername">
|
|
<input type="hidden" name="password" id="regPassword">
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
// 验证码刷新逻辑
|
|
function changeImage() {
|
|
const img = document.getElementById("verifyCodeImage");
|
|
const newSrc = "${pageContext.request.contextPath}/users/getVerifyCode?t=" + new Date().getTime();
|
|
img.src = newSrc;
|
|
}
|
|
|
|
// 同步注册表单与登录表单的输入值（点击注册时使用当前输入的用户名密码）
|
|
document.querySelector('input[name="username"]').addEventListener('input', function() {
|
|
document.getElementById('regUsername').value = this.value;
|
|
});
|
|
</script>
|
|
|
|
<hr>
|
|
</body>
|
|
</html>
|