实现用户登录功能

jQueryjQueryBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

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

👀 预览

成功的结果如下:

成功登录界面

失败的效果如下:

登录尝试失败结果

🎯 任务

在这个项目中,你将学习:

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

🏆 成果

完成这个项目后,你将能够:

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL jquery(("`jQuery`")) -.-> jquery/EventHandlingGroup(["`Event Handling`"]) jquery(("`jQuery`")) -.-> jquery/DOMManipulationGroup(["`DOM Manipulation`"]) jquery(("`jQuery`")) -.-> jquery/DataHandlingGroup(["`Data Handling`"]) jquery/EventHandlingGroup -.-> jquery/event_methods("`Event Methods`") jquery/EventHandlingGroup -.-> jquery/event_effects("`Event Effects`") jquery/DOMManipulationGroup -.-> jquery/dom_traversal("`DOM Traversal`") jquery/DOMManipulationGroup -.-> jquery/element_management("`Element Creation and Removal`") jquery/DataHandlingGroup -.-> jquery/ajax("`AJAX Calls`") subgraph Lab Skills jquery/event_methods -.-> lab-445664{{"`实现用户登录功能`"}} jquery/event_effects -.-> lab-445664{{"`实现用户登录功能`"}} jquery/dom_traversal -.-> lab-445664{{"`实现用户登录功能`"}} jquery/element_management -.-> lab-445664{{"`实现用户登录功能`"}} jquery/ajax -.-> lab-445664{{"`实现用户登录功能`"}} end

设置项目结构

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

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

├── 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文件中获取用户数据。

  1. 打开login.js文件并找到login函数。
  2. 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请求中获取的用户数据进行比较。

  1. 在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数组中的任何用户记录是否与输入的用户名和密码匹配。

  1. 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来操作页面上成功和失败消息元素的可见性。

集成登录功能

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

  1. $(document).ready()函数内部,找到“登录”按钮的点击事件处理程序:
$("#btnsubmit").click(function () {
  // TODO
});
  1. 在点击事件处理程序内部,添加以下代码以获取输入的用户名和密码值,并调用login函数:
$("#btnsubmit").click(function () {
  // TODO
  let username = $("#exampleInputUsername").val();
  let password = $("#exampleInputPassword").val();
  login(username, password);
});

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

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

成功结果如下:

成功登录消息显示

失败效果如下:

登录失败消息显示

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

✨ 查看解决方案并练习

总结

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

您可能感兴趣的其他 jQuery 教程