Implementar la función de inicio de sesión de usuario

Introducción

En este proyecto, aprenderás cómo implementar una función de inicio de sesión de usuario utilizando JavaScript y jQuery. Este proyecto está diseñado para ayudarte a desarrollar habilidades esenciales de desarrollo front-end, particularmente en el área de la dinamización de datos.

👀 Vista previa

Los resultados exitosos son los siguientes:

Los efectos de error son los siguientes:

🎯 Tareas

En este proyecto, aprenderás:

• Cómo obtener datos de usuario de un archivo JSON utilizando la funcionalidad AJAX de jQuery
• Cómo validar el nombre de usuario y la contraseña ingresados ​​con respecto a los datos de usuario
• Cómo mostrar mensajes de éxito o error adecuados basados ​​en el intento de inicio de sesión

🏆 Logros

Después de completar este proyecto, podrás:

• Utilizar los métodos AJAX de jQuery para realizar solicitudes HTTP y manejar respuestas
• Manipular el DOM utilizando jQuery para actualizar la interfaz de usuario basada en el resultado del inicio de sesión
• Integrar la entrada del usuario con la función de inicio de sesión y manejar el proceso de inicio de sesión

Configurar la estructura del proyecto

En este paso, configurarás los archivos y la estructura del proyecto. Sigue los pasos siguientes para completar este paso:

Abre la carpeta del proyecto. La estructura de directorios es la siguiente:

├── bootstrap.min.css ## Archivo de Bootstrap
├── index.html ## Página de inicio de sesión de usuario
├── jQuery-3.6.0.min.js ## Archivo de jQuery
├── userlist.json  ## Archivo JSON
├── login.js   ## Código JavaScript para el inicio de sesión de usuario
├── index.html ## Página de inicio de sesión de usuario

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE, para ejecutar el proyecto.

Luego, abre "Web 8080" en la parte superior de la VM y actualízala manualmente y verás la página.

Obtener datos de usuario

En este paso, aprenderás cómo utilizar la función ajax de jQuery para obtener datos de usuario del archivo userlist.json.

1. Abre el archivo login.js y localiza la función login.
2. Dentro de la función login, agrega el siguiente código para realizar una solicitud AJAX al archivo userlist.json:

function login(username, password) {
  // TODO
  $.ajax({
    method: "GET",
    url: "userlist.json",
    success: function (data) {
      // Los datos de usuario ahora están disponibles en el parámetro 'data'
      console.log(data);
    }
  });
}

Este código realizará una solicitud GET al archivo userlist.json.

Validar el inicio de sesión de usuario

En este paso, aprenderás cómo comparar el nombre de usuario y la contraseña ingresados ​​con los datos de usuario obtenidos de la solicitud AJAX.

1. Dentro de la función de devolución de llamada success de la solicitud AJAX, agrega el siguiente código para comprobar si el nombre de usuario y la contraseña ingresados ​​coinciden con cualquiera de los registros de usuario:

$.ajax({
  method: "GET",
  url: "userlist.json",
  success: function (data) {
    let judge = data.userlist.some((item) => {
      return item.username == username && item.password == password;
    });
    //...
  }
});

Este código utiliza el método some para comprobar si cualquiera de los registros de usuario en el array data.userlist coincide con el nombre de usuario y la contraseña ingresados.

2. Después de la llamada al método some, agrega el siguiente código para mostrar el mensaje de éxito o error adecuado:

$.ajax({
  method: "GET",
  url: "userlist.json",
  success: function (data) {
    //...
    if (judge) {
      $("#tip1").removeClass("fade");
      $("#tip2").addClass("fade");
    } else {
      $("#tip2").removeClass("fade");
      $("#tip1").addClass("fade");
    }
  }
});

Este código utiliza jQuery para manipular la visibilidad de los elementos de mensaje de éxito y error en la página.

Integrar la función de inicio de sesión

En este último paso, aprenderás cómo integrar la función de inicio de sesión con los elementos de entrada de usuario en la página.

1. Dentro de la función $(document).ready(), localiza el controlador de eventos de clic para el botón "login":

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

2. Dentro del controlador de eventos de clic, agrega el siguiente código para obtener los valores del nombre de usuario y la contraseña ingresados, y llamar a la función login:

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

Este código recupera los valores ingresados por el usuario en los campos de entrada de nombre de usuario y contraseña, y luego llama a la función login con estos valores.

3. Guarda el archivo login.js y actualiza la página index.html en tu navegador. Intenta ingresar diferentes combinaciones de nombre de usuario y contraseña y haz clic en el botón login para ver los mensajes de éxito y error.

Los resultados exitosos son los siguientes:

Los efectos de error son los siguientes:

¡Felicitaciones! Has completado la implementación de la función de inicio de sesión de usuario.

Resumen

¡Felicitaciones! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.