用 JavaScript 实现用户权限管理

介绍

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

👀 预览

用户权限管理演示

🎯 任务

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

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

🏆 成果

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

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

设置项目结构

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

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

├── 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”并手动刷新以查看页面。

初始效果

异步数据获取与渲染

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

打开 js/index.js 文件。

实现 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>`
      );
    });
  });
}

在 $(function () {... }) 代码块开头调用 getData() 函数，以初始化用户权限表。
```
$(function () {
  getData();
  // 为按钮添加事件
  //...
});
```

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

通过 AJAX 获取数据后的效果

在列表之间移动用户

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

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

实现 $("#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));
  });
});

实现 $("#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));
  });
});

实现 $("#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));
  });
});

实现 $("#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));
  });
});

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

更新用户权限

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

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

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

function changeAccess(right, changeList) {
  changeList.each((index, item) => {
    $(`#userList tr[name=${item.value}] td:last`).html(right);
  });
}

在用于在列表间移动用户的按钮点击事件处理程序末尾调用 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);
});

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

用户权限更新演示