beppeb/demo-workflow-repo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Reviewed-on: #2
This commit is contained in:
beppeb
2025-07-16 03:32:19 +00:00
parent 65e2b749bb 0aadca89a7
commit 0d333d6492
5 changed files with 475 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

203
css/styles.css Normal file
View File

@@ -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;
}
}

58
index.html Normal file
View File

@@ -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>

121
js/login.js Normal file
View File

@@ -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);
}
});

56
js/main.js Normal file
View File

@@ -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';
}

37
login.html Normal file
View File

@@ -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>