Реализация функции входа пользователя

Введение

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

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

Успешные результаты выглядят следующим образом:

Эффекты неудачи выглядят следующим образом:

🎯 Задачи

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

• Как получать данные пользователя из JSON-файла с использованием функциональности AJAX jQuery
• Как валидировать введенное имя пользователя и пароль по данным пользователя
• Как отображать соответствующие сообщения об успехе или неудаче в зависимости от попытки входа

🏆 Достижения

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

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

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

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

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

├── bootstrap.min.css ## Bootstrap-файл
├── index.html ## Страница входа пользователя
├── jQuery-3.6.0.min.js ## jQuery-файл
├── userlist.json  ## JSON-файл
├── login.js   ## JavaScript-код для входа пользователя
├── index.html ## Страница входа пользователя

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

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

Получить данные пользователя

В этом шаге вы научитесь использовать функцию ajax jQuery для получения данных пользователя из файла userlist.json.

1. Откройте файл login.js и найдите функцию login.
2. Внутри функции login добавьте следующий код, чтобы отправить AJAX-запрос к файлу userlist.json:

function login(username, password) {
  // TODO
  $.ajax({
    method: "GET",
    url: "userlist.json",
    success: function (data) {
      // Теперь данные пользователя доступны в параметре 'data'
      console.log(data);
    }
  });
}

Этот код отправит GET-запрос к файлу userlist.json.

Проверить вход пользователя

В этом шаге вы научитесь сравнивать введенное имя пользователя и пароль с данными пользователя, полученными из AJAX-запроса.

1. Внутри функции обратного вызова success AJAX-запроса добавьте следующий код, чтобы проверить, совпадают ли введенное имя пользователя и пароль с какими-либо записями пользователя:

$.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 с введенным именем пользователя и паролем.

2. После вызова метода 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() найдите обработчик события клика для кнопки "login":

$("#btnsubmit").click(function () {
  // TODO
});

2. Внутри обработчика события клика добавьте следующий код, чтобы получить введенные значения имени пользователя и пароля, и вызвать функцию login:

$("#btnsubmit").click(function () {
  // TODO
  let username = $("#exampleInputUsername").val();
  let password = $("#exampleInputPassword").val();
  login(username, password);
});

Этот код получает значения, введенные пользователем в поля ввода имени пользователя и пароля, а затем вызывает функцию login с этими значениями.

3. Сохраните файл login.js и обновите страницу index.html в вашем браузере. Попробуйте ввести разные комбинации имени пользователя и пароля и нажать кнопку login, чтобы увидеть сообщения об успехе и неудаче.

Успешные результаты выглядят следующим образом:

Эффекты неудачи выглядят следующим образом:

Поздравляем! Вы завершили реализацию функции входа пользователя.

Резюме

Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.