css
复制代码
body {
background: linear-gradient(135deg, rgba(179, 217, 230, 0.8), rgba(0, 153, 204, 0.8));
display: grid;
height: 100vh;
place-items: center;
margin: 0;
font-family: 'Arial', sans-serif;
overflow: hidden; /* 防止滚动条出现 */
}
.container {
border-radius: 1rem;
width: 90%;
max-width: 400px;
height: auto;
overflow: hidden;
padding: 2rem;
transition: all 0.3s ease, transform 0.3s ease; /* 添加变换效果 */
backdrop-filter: blur(10px); /* 添加模糊背景效果 */
}
.container:hover {
transform: scale(1.02); /* 鼠标悬停时轻微放大效果 */
}
.form {
align-items: stretch;
background: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
border-radius: 1rem;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
display: flex;
flex-direction: column;
padding: 2rem;
animation: fadeIn 0.5s ease; /* 添加淡入动画 */
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
input {
border: 1px solid #c4c4c4;
border-radius: 0.25rem;
font-size: 1rem;
margin: 0.5rem 0;
padding: 0.6rem;
width: 95%;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
input::placeholder {
color: #999; /* 更加明显的占位符颜色 */
}
input:focus {
border-color: #00bfff;
outline: none;
box-shadow: 0 0 5px rgba(0, 191, 255, 0.5); /* 添加聚焦阴影效果 */
}
.btn {
background: linear-gradient(135deg, #00bfff, #0099cc);
border: none;
color: #fff;
cursor: pointer;
font-size: 1.1rem;
margin-top: 1.5rem;
padding: 0.6rem;
width: 100%;
border-radius: 0.25rem;
transition: background-color 0.3s ease, transform 0.1s ease, box-shadow 0.3s ease; /* 添加阴影效果 */
}
.btn:hover {
background: linear-gradient(135deg, #0099cc, #00bfff);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 鼠标悬停时添加阴影 */
}
.btn:active {
transform: scale(0.95); /* 改变按下时的缩放比例 */
}
.link {
color: #00bfff;
cursor: pointer;
font-size: 0.9rem;
text-align: center;
text-decoration: none;
transition: color 0.3s ease; /* 添加颜色过渡效果 */
}
.link:hover {
text-decoration: underline;
color: #0099cc; /* 悬停时颜色变化 */
}
h2 {
color: #0099cc;
margin-bottom: 2rem;
text-align: center; /* 中心对齐标题 */
}
.form .link {
display: block;
text-align: center;
margin-top: 10px; /* Adjust the margin as needed for spacing */
}
javascript
复制代码
document.addEventListener('DOMContentLoaded', function() {
// 获取页面上的元素
const loginLink = document.getElementById('loginLink'); // 登录链接
const registerLink = document.getElementById('registerLink'); // 注册链接
const registrationForm = document.querySelector('.registration-form'); // 注册表单
const loginForm = document.querySelector('.login-form'); // 登录表单
// 设置点击登录链接时的事件处理函数
loginLink.addEventListener('click', () => {
registrationForm.style.display = 'none'; // 隐藏注册表单
loginForm.style.display = 'block'; // 显示登录表单
});
// 设置点击注册链接时的事件处理函数
registerLink.addEventListener('click', () => {
registrationForm.style.display = 'block'; // 显示注册表单
loginForm.style.display = 'none'; // 隐藏登录表单
});
// 获取注册按钮元素
const registerBtn = document.getElementById('register');
// 设置点击注册按钮时的事件处理函数
registerBtn.addEventListener('click', async () => {
// 获取注册表单中的值
const nickname = document.getElementById('nickname').value;
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
// 检查所有字段是否都已填写
if (!nickname || !email || !password) {
alert('所有字段均不能为空！'); // 提示用户所有字段必须填写
return;
}
// 密码强度验证：至少8个字符，包括字母和数字
const passwordPattern = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/;
if (!passwordPattern.test(password)) {
alert('密码必须至少包含8个字符，包括字母和数字！'); // 提示用户密码要求
return;
}
try {
// 向服务器发送注册请求
const response = await axios.post('/register', { nickname, email, password });
alert(response.data); // 显示服务器返回的消息
// 切换到登录表单
registrationForm.style.display = 'none';
loginForm.style.display = 'block';
} catch (error) {
alert(error.response.data); // 显示服务器返回的错误信息
}
});
// 获取登录按钮元素
const loginBtn = document.getElementById('login');
// 设置点击登录按钮时的事件处理函数
loginBtn.addEventListener('click', async () => {
// 获取登录表单中的值
const username = document.getElementById('loginUsername').value;
const password = document.getElementById('loginPassword').value;
// 检查所有字段是否都已填写
if (!username || !password) {
alert('所有字段均不能为空！'); // 提示用户所有字段必须填写
return;
}
try {
// 向服务器发送登录请求
const response = await axios.post('/login', { username, password });
if (response.data === '登录成功!') {
alert(response.data); // 显示登录成功的消息
// 存储昵称到 sessionStorage
sessionStorage.setItem('nickname', username); // 使用登录时的用户名作为昵称
// 重定向到新页面
setTimeout(() => {
window.location.href = 'after.html';
}, 900); // 延迟900毫秒后重定向
} else {
alert(response.data); // 显示登录失败的消息
}
} catch (error) {
alert(error.response.data); // 显示服务器返回的错误信息
}
});
});
