/** * 用户认证逻辑 * 处理登录、注册表单的提交和验证 */ // API配置 const API_BASE_URL = 'http://192.168.1.17:8080/api'; const AUTH_TOKEN_KEY = 'duoduo_auth_token'; const USER_INFO_KEY = 'duoduo_user_info'; // 专业大类数据 let professionalCategories = []; /** * 加载专业大类数据 */ async function loadProfessionalCategories() { try { const response = await fetch('/专业大类.json'); professionalCategories = await response.json(); // 填充注册表单的下拉选择框 const selectElement = document.getElementById('register-professional-category'); if (selectElement) { professionalCategories.forEach(category => { const option = document.createElement('option'); option.value = category.大类代码; option.textContent = category.大类名称; selectElement.appendChild(option); }); } } catch (error) { console.error('加载专业大类失败:', error); } } // ==================== 工具函数 ==================== /** * 显示错误信息 */ function showError(elementId, message) { const errorElement = document.getElementById(elementId); errorElement.textContent = message; errorElement.style.display = 'block'; } /** * 显示成功信息 */ function showSuccess(elementId, message) { const successElement = document.getElementById(elementId); successElement.textContent = message; successElement.style.display = 'block'; } /** * 隐藏消息 */ function hideMessage(elementId) { const element = document.getElementById(elementId); element.textContent = ''; element.style.display = 'none'; } /** * 隐藏所有消息 */ function hideAllMessages() { hideMessage('login-error-msg'); hideMessage('register-error-msg'); hideMessage('register-success-msg'); } // ==================== 表单验证 ==================== /** * 验证登录表单 */ function validateLoginForm(username, password) { if (!username || !password) { return '用户名和密码不能为空'; } return null; } /** * 验证注册表单 */ function validateRegisterForm(username, password, confirmPassword, email, phone) { // 真实姓名验证 if (!username) { return '真实姓名不能为空'; } if (username.length < 2 || username.length > 10) { return '姓名长度必须在2-10个字符之间'; } // 密码验证 if (!password) { return '密码不能为空'; } if (password.length < 6) { return '密码长度至少为6个字符'; } // 确认密码验证 if (password !== confirmPassword) { return '两次输入的密码不一致'; } // 邮箱验证(如果填写) if (email && email.trim() !== '') { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailRegex.test(email)) { return '邮箱格式不正确'; } } // 手机号验证(必填) if (!phone || phone.trim() === '') { return '手机号码不能为空'; } const phoneRegex = /^1[3-9]\d{9}$/; if (!phoneRegex.test(phone)) { return '手机号格式不正确'; } return null; } // ==================== 登录功能 ==================== /** * 处理用户登录 */ async function handleLogin() { // 隐藏之前的错误信息 hideAllMessages(); // 获取表单数据 const username = document.getElementById('login-username').value.trim(); const password = document.getElementById('login-password').value; // 前端验证 const validationError = validateLoginForm(username, password); if (validationError) { showError('login-error-msg', validationError); return; } // 禁用提交按钮,显示加载状态 const submitBtn = document.getElementById('login-submit-btn'); const originalText = submitBtn.textContent; submitBtn.disabled = true; submitBtn.textContent = '登录中...'; submitBtn.style.opacity = '0.7'; try { // 调用登录API const response = await fetch(`${API_BASE_URL}/auth/login`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username, password }) }); const data = await response.json(); if (data.success) { // 保存token和用户信息到localStorage localStorage.setItem(AUTH_TOKEN_KEY, data.data.token); localStorage.setItem(USER_INFO_KEY, JSON.stringify(data.data.user)); // 登录成功,跳转到首页 window.location.href = 'index.html'; } else { // 显示后端返回的错误信息 showError('login-error-msg', data.message || '登录失败,请重试'); } } catch (error) { console.error('登录错误:', error); showError('login-error-msg', '网络错误,请检查服务器是否运行'); } finally { // 恢复按钮状态 submitBtn.disabled = false; submitBtn.textContent = originalText; submitBtn.style.opacity = '1'; } } // ==================== 注册功能 ==================== /** * 处理用户注册 */ async function handleRegister() { // 隐藏之前的消息 hideAllMessages(); // 获取表单数据 const username = document.getElementById('register-username').value.trim(); const password = document.getElementById('register-password').value; const confirmPassword = document.getElementById('register-password-confirm').value; const email = document.getElementById('register-email').value.trim(); const phone = document.getElementById('register-phone').value.trim(); const professionalCategoryCode = document.getElementById('register-professional-category').value; // 前端验证 const validationError = validateRegisterForm(username, password, confirmPassword, email, phone); if (validationError) { showError('register-error-msg', validationError); return; } // 禁用提交按钮,显示加载状态 const submitBtn = document.getElementById('register-submit-btn'); const originalText = submitBtn.textContent; submitBtn.disabled = true; submitBtn.textContent = '注册中...'; submitBtn.style.opacity = '0.7'; try { // 调用注册API const requestBody = { username, password }; if (email) requestBody.email = email; if (phone) requestBody.phone = phone; // 如果选择了专业大类,添加到请求体 if (professionalCategoryCode) { requestBody.professional_category_code = professionalCategoryCode; const category = professionalCategories.find(c => c.大类代码 === professionalCategoryCode); if (category) { requestBody.professional_category = category.大类名称; } } const response = await fetch(`${API_BASE_URL}/auth/register`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(requestBody) }); const data = await response.json(); if (data.success) { // 显示成功提示 showSuccess('register-success-msg', '注册成功!正在跳转到登录...'); // 2秒后切换到登录表单并预填充用户名 setTimeout(() => { // 切换到登录表单 switchToLogin(); // 预填充用户名 document.getElementById('login-username').value = username; // 清空注册表单 document.getElementById('register-username').value = ''; document.getElementById('register-password').value = ''; document.getElementById('register-password-confirm').value = ''; document.getElementById('register-email').value = ''; document.getElementById('register-phone').value = ''; hideAllMessages(); }, 2000); } else { // 显示后端返回的错误信息 showError('register-error-msg', data.message || '注册失败,请重试'); } } catch (error) { console.error('注册错误:', error); showError('register-error-msg', '网络错误,请检查服务器是否运行'); } finally { // 恢复按钮状态 submitBtn.disabled = false; submitBtn.textContent = originalText; submitBtn.style.opacity = '1'; } } // ==================== 表单切换功能 ==================== /** * 切换到注册表单 */ function switchToRegister() { hideAllMessages(); const loginContainer = document.getElementById('login-form-container'); const registerContainer = document.getElementById('register-form-container'); // 隐藏登录 loginContainer.style.opacity = '0'; setTimeout(() => { loginContainer.classList.add('hidden'); // 显示注册 registerContainer.classList.remove('hidden'); registerContainer.classList.add('fade-in'); registerContainer.style.opacity = '1'; }, 300); } /** * 切换到登录表单 */ function switchToLogin() { hideAllMessages(); const loginContainer = document.getElementById('login-form-container'); const registerContainer = document.getElementById('register-form-container'); // 隐藏注册 registerContainer.classList.remove('fade-in'); registerContainer.style.opacity = '0'; setTimeout(() => { registerContainer.classList.add('hidden'); registerContainer.style.opacity = '1'; // 显示登录 loginContainer.classList.remove('hidden'); loginContainer.style.opacity = '1'; loginContainer.classList.add('fade-in'); }, 300); } // ==================== 页面初始化 ==================== document.addEventListener('DOMContentLoaded', () => { // 加载专业大类数据 loadProfessionalCategories(); // 检查是否已登录 const token = localStorage.getItem(AUTH_TOKEN_KEY); if (token) { // 已登录,直接跳转到首页 window.location.href = 'index.html'; return; } // 绑定切换按钮事件 document.getElementById('switch-to-register').addEventListener('click', switchToRegister); document.getElementById('switch-to-login').addEventListener('click', switchToLogin); // 绑定表单提交事件(通过form的onsubmit已经绑定,这里只是确保) // 表单已通过内联 onsubmit 绑定 });