如何在网站上添加用户登录功能?

步骤 1：创建用户登录页面

• 创建一个新的 HTML 文件，命名为 login.html。
• 在页面中添加一个表单，用于用户输入登录信息。
• 表单应该包含以下元素：
  • 用户名文本框
  • 密码文本框
  • 登陆按钮

步骤 2：添加 JavaScript 代码

• 在 login.html 页面中添加以下 JavaScript 代码：

const form = document.querySelector('form');

form.addEventListener('submit', (event) => {
  event.preventDefault();

  const username = document.querySelector('#username').value;
  const password = document.querySelector('#password').value;

  // 将登录信息提交到服务器
  fetch('/login.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: new FormData({ username, password }),
  })
    .then((response) => response.json())
    .then((data) => {
      // 如果登录成功，将用户路由到首页
      if (data.success) {
        window.location.href = '/index.html';
      } else {
        // 登录失败，显示错误信息
        alert(data.message);
      }
    })
    .catch((error) => {
      // 如果发生错误，显示错误信息
      alert('发生错误：' + error.message);
    });
});

步骤 3：设置服务器端逻辑

• 创建一个名为 login.php 的服务器端脚本。
• 在脚本中处理登录请求。
• 检查用户输入的用户名和密码是否正确。
• 如果登录成功，将用户路由到首页。
• 如果登录失败，将错误信息返回给客户端。

步骤 4：测试登录功能

• 打开 login.html 页面。
• 输入正确的用户名和密码。
• 点击登录按钮。
• 如果登录成功，用户将被路由到首页。
• 如果登录失败，用户将看到错误信息。

提示：

• 使用 HTML5 canvas 存储用户登录状态，以避免每次页面刷新时重新输入用户名和密码。
• 使用正则表达式验证用户输入的用户名和密码格式。
• 对用户输入的密码进行加密。