使用 html、css、bootstrap 和 JavaScript 构建简单的登录系统
作为前端开发人员开始我的旅程既充满挑战又充满收获。我的第一个项目是创建一个基本的登录系统。虽然概念简单，但它使我能够应用前端开发的基本概念，并学习如何使用浏览器本地存储来存储用户数据。
这是我处理这个项目的方法：
目标
目标是构建一个基本的登录系统，其中：
-
用户可以通过输入凭据进行注册。
-
凭证使用本地存储保存在浏览器本地。
-
用户可以通过验证其保存的凭据来登录。
使用的工具和技术
html：构建网页。
css：用于样式和布局自定义。
bootstrap：使设计具有响应性和视觉吸引力。
javascript：用于交互、验证和本地存储集成。
特点
注册表单：捕获用户的姓名、电子邮件和密码。
登录表单：根据本地存储中存储的数据验证用户凭据。
错误处理：如果用户登录失败或电子邮件未注册，则会向用户发出警报。
响应式设计：确保在所有设备上提供无缝体验。
如何运作
- 注册流程
用户填写注册表。
javascript 验证输入以确保所有字段均正确填写。
数据以 json 对象的形式安全地存储在浏览器的本地存储中。
- 登录流程
用户输入他们的电子邮件和密码。
javascript 检查提供的凭据是否与本地存储中存储的数据匹配。
如果凭据正确，用户将被重定向到仪表板或显示成功消息。
- 错误处理
如果电子邮件不存在，系统会提示用户注册。
如果密码不正确，会显示错误消息。
代码概述
html（结构）
<div class="container mt-5"> <h2 class="text-center">login system</h2> <div class="row justify-content-center"> <div class="col-md-6"> <!-- sign-up form --> <div id="signup-form"> <h4>sign up</h4> <input type="text" id="name" class="form-control mb-2" placeholder="name" /> <input type="email" id="email" class="form-control mb-2" placeholder="email" /> <input type="password" id="password" class="form-control mb-2" placeholder="password" /> <button class="btn btn-primary w-100" onclick="signup()">sign up</button> </div> <!-- login form --> <div id="login-form" class="d-none"> <h4>login</h4> <input type="email" id="login-email" class="form-control mb-2" placeholder="email" /> <input type="password" id="login-password" class="form-control mb-2" placeholder="password" /> <button class="btn btn-success w-100" onclick="login()">login</button> </div> </div> </div> </div>
我使用 bootstrap 进行响应式布局，确保系统在所有设备上都能正常运行。添加了少量自定义 css 以微调填充和边距。
javascript（功能）
// Sign-Up Function function signup() { const name = document.getElementById("name").value; const email = document.getElementById("email").value; const password = document.getElementById("password").value; if (name && email && password) { const user = { name, email, password }; localStorage.setItem(email, JSON.stringify(user)); alert("Sign up successful! Please login."); document.getElementById("signup-form").classList.add("d-none"); document.getElementById("login-form").classList.remove("d-none"); } else { alert("Please fill out all fields."); } } // Login Function function login() { const email = document.getElementById("login-email").value; const password = document.getElementById("login-password").value; const storedUser = JSON.parse(localStorage.getItem(email)); if (storedUser) { if (storedUser.password === password) { alert(`Welcome back, ${storedUser.name}!`); } else { alert("Incorrect password."); } } else { alert("Email not registered. Please sign up first."); } }
挑战和学习
-
本地存储：
了解如何在本地存储中保存、检索和解析数据是一个关键要点。 -
表单验证：
我学习了如何使用 javascript 来验证用户输入并提供实时反馈。 -
响应式设计：
使用 bootstrap 帮助我创建了一个干净、响应灵敏的 ui，而无需在样式上花费太多时间。
未来的改进
这只是开始。未来，我计划：
添加密码加密以提高安全性。
实现会话存储来管理登录状态。
用后端数据库替换本地存储以实现可扩展性。
添加“忘记密码”功能以提高可用性。
结论
这个项目是一次很棒的学习经历，也是我作为前端开发人员的旅程中的一个重要里程碑。通过构建这个登录系统，我巩固了对 html、css、bootstrap 和 javascript 的理解。它简单而实用，为未来更高级的项目奠定了坚实的基础。
欢迎尝试并分享您的反馈！
