智能登录系统

php中文网 2024-11-25 11:37:45

使用 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>

css（使用 bootstrap 进行样式设置）

我使用 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.");
  }
}

挑战和学习