Система управления правами доступа пользователей на JavaScript

Введение

В этом проекте вы научитесь реализовывать систему управления правами доступа пользователей с использованием JavaScript и jQuery. Проект включает в себя асинхронное получение данных о пользователях, отображение их в таблице прав доступа пользователей и предоставление функциональности для перемещения пользователей между списками пользователей и администраторов, а также соответствующего обновления прав доступа пользователей.

👀 Предварительный просмотр

🎯 Задачи

В этом проекте вы научитесь:

• Асинхронно получать данные о пользователях из JSON-файла и отображать их в таблице прав доступа пользователей
• Реализовывать функциональность для перемещения пользователей между списками пользователей и администраторов как отдельно, так и все сразу
• Обновлять права доступа пользователей в таблице прав доступа пользователей на основе пользователей в левом и правом списках

🏆 Достижения

После завершения этого проекта вы сможете:

• Использовать AJAX для асинхронного получения данных
• Управлять DOM с использованием jQuery для обновления пользовательского интерфейса
• Реализовывать функциональность управления правами доступа в веб-приложении

Настройка структуры проекта

В этом шаге вы настроите файлы и структуру проекта. Следуйте шагам ниже, чтобы выполнить этот шаг:

Откройте папку проекта. Структура каталогов следующая:

├── 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 - главная страница.

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

Далее откройте "Web 8080" в верхней части ВМ и обновите его вручную, чтобы увидеть страницу.

Асинхронное получение и отображение данных

В этом шаге вы научитесь асинхронно получать данные о пользователях и отображать их в таблице прав доступа пользователей.

1. Откройте файл js/index.js.

2. Реализуйте функцию getData(), чтобы получить данные о пользователях из файла js/userList.json с использованием AJAX.

   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. Вызовите функцию getData() в начале блока $(function () {... }), чтобы инициализировать таблицу прав доступа пользователей.

   $(function () {
     getData();
     // Adding events to buttons
     //...
   });
   

После завершения этого шага таблица прав доступа пользователей будет заполнена данными из файла js/userList.json при загрузке страницы. Эффект выглядит так:

Перемещение пользователей между списками

В этом шаге вы реализуете функциональность перемещения пользователей между левым и правым списками, а также перемещения всех пользователей на другую сторону.

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. Найдите функцию changeAccess в js/index.js.

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, чтобы улучшить свои навыки.