Benutzerrechteverwaltung mit JavaScript implementieren

Einführung

In diesem Projekt lernst du, wie du ein Benutzerechtemanagementssystem mit JavaScript und jQuery implementierst. Das Projekt umfasst das asynchrone Abrufen von Benutzerdaten, das Rendern dieser Daten in einer Benutzerechtetabelle und die Bereitstellung von Funktionen, um Benutzer zwischen der Benutzer- und der Administratorliste zu verschieben und die Benutzerrechte entsprechend zu aktualisieren.

👀 Vorschau

Benutzerechtemanagement-Demo

🎯 Aufgaben

In diesem Projekt wirst du lernen:

Wie du Benutzerdaten asynchron aus einer JSON-Datei abrufst und in einer Benutzerechtetabelle rendern
Wie du die Funktionalität implementierst, um Benutzer einzeln oder alle auf einmal zwischen der Benutzer- und der Administratorliste zu verschieben
Wie du die Benutzerrechte in der Benutzerechtetabelle basierend auf den Benutzern in der linken und rechten Liste aktualisierst

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

AJAX verwenden, um Daten asynchron abzurufen
Die DOM mit jQuery manipulieren, um die Benutzeroberfläche zu aktualisieren
Die Berechtungsverwaltung-Funktionalität in einer Webanwendung zu implementieren

Projektstruktur einrichten

In diesem Schritt wirst du die Projektdateien und -struktur einrichten. Folge den Schritten unten, um diesen Schritt abzuschließen:

Öffne den Projektordner. Die Verzeichnisstruktur ist wie folgt:

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

Darin:

css ist der Styles-Ordner.
js/index.js ist die JS-Datei, in der der Code abzuschließen ist.
js/jquery-3.6.0.min.js ist die jQuery-Datei.
js/userList.json ist die zu requestende Daten-Datei.
index.html ist die Hauptseite.

Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.

Als Nächstes öffne "Web 8080" oben auf der VM und aktualisiere es manuell, um die Seite zu sehen.

Initialer Effekt

Asynchrone Datenabfrage und -rendern

In diesem Schritt wirst du lernen, wie du Benutzerdaten asynchron abrufst und in der Benutzerechtetabelle rendern.

Öffne die Datei js/index.js.

Implementiere die Funktion getData(), um die Benutzerdaten aus der Datei js/userList.json mithilfe von AJAX abzurufen.

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

Rufe die Funktion getData() am Anfang des Blocks $(function () {... }) auf, um die Benutzerechtetabelle zu initialisieren.
```
$(function () {
  getData();
  // Hinzufügen von Ereignissen zu Buttons
  //...
});
```

Nach Abschluss dieses Schritts wird die Benutzerechtetabelle beim Laden der Seite mit den Daten aus der Datei js/userList.json gefüllt. Der Effekt ist wie folgt:

Effekt nach dem Abrufen von Daten über AJAX

Verschieben von Benutzern zwischen Listen

In diesem Schritt wirst du die Funktionalität implementieren, um Benutzer zwischen der linken und rechten Liste zu verschieben und alle Benutzer auf die andere Seite zu verschieben.

Öffne die Datei js/index.js und füge Code innerhalb des Blocks $(function () {... }) hinzu.

Implementiere den Klickereignishandler für $("#add"), um die ausgewählten Benutzer von der linken Liste zur rechten Liste zu verschieben.

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

Implementiere den Klickereignishandler für $("#addAll"), um alle Benutzer von der linken Liste zur rechten Liste zu verschieben.

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

Implementiere den Klickereignishandler für $("#remove"), um die ausgewählten Benutzer von der rechten Liste zur linken Liste zu verschieben.

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

Implementiere den Klickereignishandler für $("#removeAll"), um alle Benutzer von der rechten Liste zur linken Liste zu verschieben.

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

Nach Abschluss dieses Schritts wirst du in der Lage sein, Benutzer zwischen der linken und rechten Liste zu verschieben und alle Benutzer auf die andere Seite zu verschieben.

Aktualisierung von Benutzerrechten

In diesem Schritt wirst du die Funktionalität implementieren, um die Benutzerrechte in der Benutzerechtetabelle basierend auf den Benutzern in der linken und rechten Liste zu aktualisieren.

Locate the changeAccess function in js/index.js.

Implementiere die changeAccess()-Funktion, um die Rechte in der Benutzerechtetabelle zu aktualisieren.

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

Die changeAccess()-Funktion wird am Ende des Ereignishandlers für den Klick auf einen Button aufgerufen, der den Benutzer zwischen den Listen verschiebt.

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

Nach Abschluss dieses Schritts werden die Benutzerrechte in der Benutzerechtetabelle automatisch aktualisiert, wenn Benutzer zwischen der linken und rechten Liste verschoben werden. Der Effekt ist wie folgt:

Benutzerrechteaktualisierungs-Demo

Zusammenfassung

Herzlichen Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Labs absolvieren, um deine Fähigkeiten zu verbessern.

Benutzerrechteverwaltungssystem mit JavaScript