使用 JavaScript 和 jQuery 实现用户登录功能

介绍

在这个项目中，你将学习如何使用 JavaScript 和 jQuery 实现用户登录功能。这个项目旨在帮助你培养基本的前端开发技能，特别是在数据动态化方面。

👀 预览

成功的结果如下：

成功登录界面

失败的效果如下：

登录尝试失败结果

🎯 任务

在这个项目中，你将学习：

如何使用 jQuery 的 AJAX 功能从 JSON 文件中获取用户数据
如何根据用户数据验证输入的用户名和密码
如何根据登录尝试显示适当的成功或失败消息

🏆 成果

完成这个项目后，你将能够：

使用 jQuery 的 AJAX 方法发出 HTTP 请求并处理响应
使用 jQuery 操作 DOM，根据登录结果更新用户界面
将用户输入与登录功能集成，并处理登录过程

设置项目结构

在这一步中，你将设置项目文件和结构。按照以下步骤完成此步骤：

打开项目文件夹。目录结构如下：

├── bootstrap.min.css ## Bootstrap 文件
├── index.html ## 用户登录页面
├── jQuery-3.6.0.min.js ## jQuery 文件
├── userlist.json  ## JSON 文件
├── login.js   ## 用户登录的 JavaScript 代码
├── index.html ## 用户登录页面

点击 WebIDE 右下角的Go Live按钮来运行项目。

接下来，在 VM 顶部打开“Web 8080”并手动刷新，你将看到页面。

获取用户数据

在这一步中，你将学习如何使用 jQuery 的ajax函数从userlist.json文件中获取用户数据。

打开login.js文件并找到login函数。
在login函数内部，添加以下代码以向userlist.json文件发出 AJAX 请求：

function login(username, password) {
  // TODO
  $.ajax({
    method: "GET",
    url: "userlist.json",
    success: function (data) {
      // 用户数据现在可在'data'参数中获取
      console.log(data);
    }
  });
}

这段代码将向userlist.json文件发出 GET 请求。

验证用户登录

在这一步中，你将学习如何将输入的用户名和密码与从 AJAX 请求中获取的用户数据进行比较。

在 AJAX 请求的success回调函数内部，添加以下代码以检查输入的用户名和密码是否与任何用户记录匹配：

$.ajax({
  method: "GET",
  url: "userlist.json",
  success: function (data) {
    let judge = data.userlist.some((item) => {
      return item.username == username && item.password == password;
    });
    //...
  }
});

这段代码使用some方法来检查data.userlist数组中的任何用户记录是否与输入的用户名和密码匹配。

在some方法调用之后，添加以下代码以显示适当的成功或失败消息：

$.ajax({
  method: "GET",
  url: "userlist.json",
  success: function (data) {
    //...
    if (judge) {
      $("#tip1").removeClass("fade");
      $("#tip2").addClass("fade");
    } else {
      $("#tip2").removeClass("fade");
      $("#tip1").addClass("fade");
    }
  }
});

这段代码使用 jQuery 来操作页面上成功和失败消息元素的可见性。

集成登录功能

在这最后一步中，你将学习如何将登录功能与页面上的用户输入元素集成。

在$(document).ready()函数内部，找到“登录”按钮的点击事件处理程序：

$("#btnsubmit").click(function () {
  // TODO
});

在点击事件处理程序内部，添加以下代码以获取输入的用户名和密码值，并调用login函数：

$("#btnsubmit").click(function () {
  // TODO
  let username = $("#exampleInputUsername").val();
  let password = $("#exampleInputPassword").val();
  login(username, password);
});

这段代码获取用户在用户名和密码输入字段中输入的值，然后使用这些值调用login函数。

保存login.js文件并在浏览器中刷新index.html页面。尝试输入不同的用户名和密码组合，然后点击“登录”按钮以查看成功和失败消息。

成功结果如下：

成功登录消息显示

失败效果如下：

登录失败消息显示

恭喜！你已完成用户登录功能的实现。

总结

恭喜！你已完成此项目。你可以在 LabEx 中练习更多实验以提升你的技能。