Merge pull request 'feat: 实现用户登录功能（Issue #1）' (#2) from feature/login-page into main

Reviewed-on: #2
2025-07-16 03:32:19 +00:00
parent 65e2b749bb 0aadca89a7
commit 0d333d6492
5 changed files with 475 additions and 0 deletions
--- a/css/styles.css
+++ b/css/styles.css
@@ -0,0 +1,203 @@
+/* 基本样式重置 */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Microsoft YaHei', Arial, sans-serif;
+    line-height: 1.6;
+    color: #333;
+    background-color: #f4f4f4;
+}
+
+.container {
+    width: 90%;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+/* 头部样式 */
+header {
+    background-color: #3498db;
+    color: #fff;
+    padding: 1rem 0;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+
+header h1 {
+    margin: 0;
+    font-size: 1.8rem;
+}
+
+nav {
+    margin-top: 1rem;
+}
+
+nav ul {
+    list-style: none;
+    display: flex;
+}
+
+nav ul li {
+    margin-right: 20px;
+}
+
+nav ul li a {
+    color: #fff;
+    text-decoration: none;
+    padding: 5px 10px;
+    border-radius: 3px;
+    transition: background-color 0.3s;
+}
+
+nav ul li a:hover,
+nav ul li a.active {
+    background-color: rgba(255,255,255,0.2);
+}
+
+/* 页脚样式 */
+footer {
+    background-color: #333;
+    color: #fff;
+    padding: 1rem 0;
+    margin-top: 2rem;
+    text-align: center;
+}
+
+/* 主内容区域 */
+main {
+    padding: 2rem 0;
+}
+
+.welcome-section {
+    background-color: #fff;
+    padding: 2rem;
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+    margin-top: 2rem;
+}
+
+/* 登录页面样式 */
+.login-page {
+    background-color: #f9f9f9;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.login-container {
+    width: 100%;
+    max-width: 400px;
+    padding: 1rem;
+}
+
+.login-box {
+    background-color: #fff;
+    padding: 2rem;
+    border-radius: 5px;
+    box-shadow: 0 2px 15px rgba(0,0,0,0.1);
+}
+
+.login-box h1 {
+    text-align: center;
+    margin-bottom: 2rem;
+    color: #3498db;
+}
+
+.form-group {
+    margin-bottom: 1.5rem;
+}
+
+label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: bold;
+}
+
+input[type="text"],
+input[type="password"] {
+    width: 100%;
+    padding: 0.8rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 1rem;
+    transition: border-color 0.3s;
+}
+
+input[type="text"]:focus,
+input[type="password"]:focus {
+    border-color: #3498db;
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
+}
+
+.btn-login {
+    background-color: #3498db;
+    color: #fff;
+    border: none;
+    padding: 0.8rem;
+    width: 100%;
+    font-size: 1rem;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.btn-login:hover {
+    background-color: #2980b9;
+}
+
+.error-message {
+    color: #e74c3c;
+    font-size: 0.85rem;
+    margin-top: 5px;
+    display: block;
+}
+
+.form-message {
+    text-align: center;
+    margin-top: 1rem;
+    font-weight: bold;
+}
+
+.form-message.error {
+    color: #e74c3c;
+}
+
+.form-message.success {
+    color: #2ecc71;
+}
+
+/* 响应式设计 */
+@media screen and (max-width: 768px) {
+    header h1 {
+        font-size: 1.5rem;
+    }
+    
+    nav ul {
+        flex-direction: column;
+    }
+    
+    nav ul li {
+        margin-right: 0;
+        margin-bottom: 0.5rem;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .login-container {
+        padding: 0.5rem;
+    }
+    
+    .login-box {
+        padding: 1.5rem;
+    }
+    
+    .login-box h1 {
+        font-size: 1.5rem;
+    }
+}
--- a/index.html
+++ b/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>首页 - 演示项目</title>
+    <link rel="stylesheet" href="css/styles.css">
+</head>
+<body>
+    <header>
+        <div class="container">
+            <h1>欢迎来到演示项目</h1>
+            <nav>
+                <ul>
+                    <li><a href="index.html" class="active">首页</a></li>
+                    <li><a href="#" id="logout">退出登录</a></li>
+                </ul>
+            </nav>
+        </div>
+    </header>
+
+    <main class="container">
+        <section class="welcome-section">
+            <h2>欢迎，<span id="username">用户</span>!</h2>
+            <p>您已成功登录系统。</p>
+        </section>
+    </main>
+
+    <footer>
+        <div class="container">
+            <p>&copy; 2025 演示项目</p>
+        </div>
+    </footer>
+
+    <script src="js/main.js"></script>
+    <script>
+        // 检查用户是否已登录
+        document.addEventListener('DOMContentLoaded', function() {
+            const isLoggedIn = localStorage.getItem('isLoggedIn');
+            const storedUsername = localStorage.getItem('username');
+            
+            if (!isLoggedIn) {
+                window.location.href = 'login.html';
+            } else if (storedUsername) {
+                document.getElementById('username').textContent = storedUsername;
+            }
+            
+            // 退出登录功能
+            document.getElementById('logout').addEventListener('click', function(e) {
+                e.preventDefault();
+                localStorage.removeItem('isLoggedIn');
+                localStorage.removeItem('username');
+                window.location.href = 'login.html';
+            });
+        });
+    </script>
+</body>
+</html>
--- a/js/login.js
+++ b/js/login.js
@@ -0,0 +1,121 @@
+/**
+ * 登录功能实现
+ * 原生JavaScript，不依赖框架
+ */
+
+document.addEventListener('DOMContentLoaded', function() {
+    const loginForm = document.getElementById('loginForm');
+    const usernameInput = document.getElementById('username');
+    const passwordInput = document.getElementById('password');
+    const usernameError = document.getElementById('username-error');
+    const passwordError = document.getElementById('password-error');
+    const formMessage = document.getElementById('form-message');
+    
+    // 用于演示的模拟用户数据
+    const mockUsers = [
+        { username: 'admin', password: 'admin123' },
+        { username: 'user', password: 'user123' }
+    ];
+    
+    /**
+     * 表单提交处理
+     */
+    loginForm.addEventListener('submit', function(e) {
+        e.preventDefault();
+        
+        // 重置错误信息
+        resetErrors();
+        
+        // 获取输入值
+        const username = usernameInput.value.trim();
+        const password = passwordInput.value.trim();
+        
+        // 验证表单
+        let isValid = validateForm(username, password);
+        
+        if (isValid) {
+            // 模拟登录请求
+            mockLogin(username, password);
+        }
+    });
+    
+    /**
+     * 表单验证
+     */
+    function validateForm(username, password) {
+        let isValid = true;
+        
+        // 验证用户名
+        if (username === '') {
+            displayError(usernameError, '请输入用户名');
+            isValid = false;
+        } else if (username.length < 3) {
+            displayError(usernameError, '用户名长度必须至少为3个字符');
+            isValid = false;
+        }
+        
+        // 验证密码
+        if (password === '') {
+            displayError(passwordError, '请输入密码');
+            isValid = false;
+        } else if (password.length < 6) {
+            displayError(passwordError, '密码长度必须至少为6个字符');
+            isValid = false;
+        }
+        
+        return isValid;
+    }
+    
+    /**
+     * 显示错误信息
+     */
+    function displayError(element, message) {
+        element.textContent = message;
+    }
+    
+    /**
+     * 重置错误信息
+     */
+    function resetErrors() {
+        usernameError.textContent = '';
+        passwordError.textContent = '';
+        formMessage.textContent = '';
+        formMessage.className = 'form-message';
+    }
+    
+    /**
+     * 模拟登录
+     */
+    function mockLogin(username, password) {
+        // 显示加载状态
+        formMessage.textContent = '登录中...';
+        formMessage.className = 'form-message';
+        
+        // 模拟网络延迟
+        setTimeout(function() {
+            // 检查用户是否存在
+            const user = mockUsers.find(user => 
+                user.username === username && user.password === password
+            );
+            
+            if (user) {
+                // 登录成功
+                formMessage.textContent = '登录成功，即将跳转...';
+                formMessage.className = 'form-message success';
+                
+                // 保存登录状态到本地存储
+                localStorage.setItem('isLoggedIn', 'true');
+                localStorage.setItem('username', username);
+                
+                // 重定向到首页
+                setTimeout(function() {
+                    window.location.href = 'index.html';
+                }, 1000);
+            } else {
+                // 登录失败
+                formMessage.textContent = '用户名或密码错误';
+                formMessage.className = 'form-message error';
+            }
+        }, 1000);
+    }
+});
--- a/js/main.js
+++ b/js/main.js
@@ -0,0 +1,56 @@
+/**
+ * 主页JavaScript
+ */
+
+document.addEventListener('DOMContentLoaded', function() {
+    // 检查用户是否已登录
+    checkLoginStatus();
+    
+    // 初始化页面事件
+    initEvents();
+});
+
+/**
+ * 检查用户登录状态
+ */
+function checkLoginStatus() {
+    const isLoggedIn = localStorage.getItem('isLoggedIn');
+    
+    if (!isLoggedIn) {
+        // 如果未登录，重定向到登录页面
+        window.location.href = 'login.html';
+        return;
+    }
+    
+    // 获取并显示用户名
+    const username = localStorage.getItem('username');
+    if (username) {
+        document.getElementById('username').textContent = username;
+    }
+}
+
+/**
+ * 初始化页面事件
+ */
+function initEvents() {
+    // 退出登录
+    const logoutBtn = document.getElementById('logout');
+    if (logoutBtn) {
+        logoutBtn.addEventListener('click', function(e) {
+            e.preventDefault();
+            logout();
+        });
+    }
+}
+
+/**
+ * 退出登录
+ */
+function logout() {
+    // 清除本地存储中的登录信息
+    localStorage.removeItem('isLoggedIn');
+    localStorage.removeItem('username');
+    
+    // 重定向到登录页面
+    window.location.href = 'login.html';
+}
--- a/login.html
+++ b/login.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>用户登录 - 演示项目</title>
+    <link rel="stylesheet" href="css/styles.css">
+</head>
+<body class="login-page">
+    <div class="login-container">
+        <div class="login-box">
+            <h1>用户登录</h1>
+            <form id="loginForm">
+                <div class="form-group">
+                    <label for="username">用户名</label>
+                    <input type="text" id="username" name="username" placeholder="请输入用户名" required>
+                    <span class="error-message" id="username-error"></span>
+                </div>
+                
+                <div class="form-group">
+                    <label for="password">密码</label>
+                    <input type="password" id="password" name="password" placeholder="请输入密码" required>
+                    <span class="error-message" id="password-error"></span>
+                </div>
+                
+                <div class="form-group">
+                    <button type="submit" class="btn-login">登录</button>
+                </div>
+                
+                <div class="form-message" id="form-message"></div>
+            </form>
+        </div>
+    </div>
+
+    <script src="js/login.js"></script>
+</body>
+</html>