使用JavaScript的用户权限管理系统

JavaScriptJavaScriptBeginner
立即练习

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

简介

在这个项目中,你将学习如何使用JavaScript和jQuery实现一个用户权限管理系统。该项目涉及异步获取用户数据,在用户权限表中呈现数据,并提供将用户在普通用户和管理员列表之间移动的功能,以及相应地更新用户权限。

👀 预览

用户权限管理演示

🎯 任务

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

  • 如何从JSON文件中异步获取用户数据并在用户权限表中呈现
  • 如何实现将用户单独或一次性在普通用户和管理员列表之间移动的功能
  • 如何根据左右列表中的用户更新用户权限表中的用户权限

🏆 成果

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

  • 使用AJAX异步获取数据
  • 使用jQuery操作DOM来更新用户界面
  • 在Web应用程序中实现权限管理功能

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/AdvancedConceptsGroup(["`Advanced Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/DOMManipulationGroup(["`DOM Manipulation`"]) javascript(("`JavaScript`")) -.-> javascript/NetworkingGroup(["`Networking`"]) javascript/BasicConceptsGroup -.-> javascript/functions("`Functions`") javascript/AdvancedConceptsGroup -.-> javascript/async_prog("`Asynchronous Programming`") javascript/DOMManipulationGroup -.-> javascript/dom_select("`DOM Selection`") javascript/DOMManipulationGroup -.-> javascript/dom_manip("`DOM Manipulation`") javascript/DOMManipulationGroup -.-> javascript/event_handle("`Event Handling`") javascript/NetworkingGroup -.-> javascript/http_req("`HTTP Requests`") javascript/NetworkingGroup -.-> javascript/json("`JSON`") subgraph Lab Skills javascript/functions -.-> lab-445668{{"`使用JavaScript的用户权限管理系统`"}} javascript/async_prog -.-> lab-445668{{"`使用JavaScript的用户权限管理系统`"}} javascript/dom_select -.-> lab-445668{{"`使用JavaScript的用户权限管理系统`"}} javascript/dom_manip -.-> lab-445668{{"`使用JavaScript的用户权限管理系统`"}} javascript/event_handle -.-> lab-445668{{"`使用JavaScript的用户权限管理系统`"}} javascript/http_req -.-> lab-445668{{"`使用JavaScript的用户权限管理系统`"}} javascript/json -.-> lab-445668{{"`使用JavaScript的用户权限管理系统`"}} end

设置项目结构

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

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

├── css
├── js
│    ├── index.js
│    ├── jquery-3.6.0.min.js
│    └── userList.json
└── index.html

其中:

  • css 是样式文件夹。
  • js/index.js 是需要编写代码的JS文件。
  • js/jquery-3.6.0.min.js 是jQuery文件。
  • js/userList.json 是要请求的数据文件。
  • index.html 是主页。

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

接下来,在VM顶部打开 “Web 8080” 并手动刷新以查看页面。

初始效果

异步数据获取与渲染

在这一步中,你将学习如何异步获取用户数据并在用户权限表中呈现。

  1. 打开 js/index.js 文件。

  2. 实现 getData() 函数,使用AJAX从 js/userList.json 文件中获取用户数据。

    function getData() {
      // TODO
      $.ajax("./js/userList.json").then((res) => {
        res.forEach((item) => {
          $("#userList tbody").html(
            $("#userList tbody").html() +
              ` <tr name=${item.name}>
                   <td>${item.name}</td>
                   <td>${item.right ? "Administrator" : "User"}</td> 
               </tr>`
          );
        });
      });
    }
  3. $(function () {... }) 代码块开头调用 getData() 函数,以初始化用户权限表。

    $(function () {
      getData();
      // 为按钮添加事件
      //...
    });

完成此步骤后,页面加载时用户权限表将填充来自 js/userList.json 文件的数据。效果如下:

通过AJAX获取数据后的效果

在列表间移动用户

在这一步中,你将实现把用户在左右列表之间移动,以及将所有用户移动到另一侧的功能。

  1. 打开 js/index.js 文件,并在 $(function () {... }) 代码块内添加代码。

  2. 实现 $("#add") 的点击事件处理函数,将选中的用户从左列表移动到右列表。

    $("#add").click(function () {
      // TODO
      let option = $("#leftSelect option:selected");
      option.each((index, item) => {
        $(`#leftSelect option[value=${item.value}]`).remove();
        $("#rightSelect")[0].add(new Option(item.value, item.value));
      });
    });
  3. 实现 $("#addAll") 的点击事件处理函数,将所有用户从左列表移动到右列表。

    $("#addAll").click(function () {
      // TODO
      let option = $("#leftSelect option");
      option.each((index, item) => {
        $(`#leftSelect option[value=${item.value}]`).remove();
        $("#rightSelect")[0].add(new Option(item.value, item.value));
      });
    });
  4. 实现 $("#remove") 的点击事件处理函数,将选中的用户从右列表移动到左列表。

    $("#remove").click(function () {
      // TODO
      let option = $("#rightSelect option:selected");
      option.each((index, item) => {
        $(`#rightSelect option[value=${item.value}]`).remove();
        $("#leftSelect")[0].add(new Option(item.value, item.value));
      });
    });
  5. 实现 $("#removeAll") 的点击事件处理函数,将所有用户从右列表移动到左列表。

    $("#removeAll").click(function () {
      // TODO
      let option = $("#rightSelect option");
      option.each((index, item) => {
        $(`#rightSelect option[value=${item.value}]`).remove();
        $("#leftSelect")[0].add(new Option(item.value, item.value));
      });
    });

完成此步骤后,你将能够在左右列表之间移动用户,以及将所有用户移动到另一侧。

更新用户权限

在这一步中,你将实现根据左右列表中的用户来更新用户权限表中用户权限的功能。

  1. js/index.js 中找到 changeAccess 函数。

  2. 实现 changeAccess() 函数以更新用户权限表中的权限。

    function changeAccess(right, changeList) {
      changeList.each((index, item) => {
        $(`#userList tr[name=${item.value}] td:last`).html(right);
      });
    }
  3. 在用于在列表间移动用户的按钮点击事件处理程序末尾调用 changeAccess() 函数。

    $("#add").click(function () {
      // TODO
      //...
      changeAccess("Administrator", option);
    });
    
    $("#addAll").click(function () {
      // TODO
      //...
      changeAccess("Administrator", option);
    });
    
    $("#remove").click(function () {
      // TODO
      //...
      changeAccess("User", option);
    });
    
    $("#removeAll").click(function () {
      // TODO
      //...
      changeAccess("User", option);
    });

完成此步骤后,当用户在左右列表之间移动时,用户权限表中的用户权限将自动更新。效果如下:

用户权限更新演示
✨ 查看解决方案并练习

总结

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

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