Mettre en œuvre la fonction de connexion d'utilisateur

Introduction

Dans ce projet, vous allez apprendre à implémenter une fonction de connexion d'utilisateur à l'aide de JavaScript et de jQuery. Ce projet est conçu pour vous aider à développer les compétences essentielles en développement front-end, en particulier dans le domaine de la dynamisation des données.

👀 Aperçu

Les résultats réussis sont les suivants :

Les effets de l'échec sont les suivants :

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment récupérer les données d'utilisateur à partir d'un fichier JSON à l'aide de la fonction AJAX de jQuery
• Comment valider le nom d'utilisateur et le mot de passe entrés par rapport aux données d'utilisateur
• Comment afficher des messages de succès ou d'échec appropriés en fonction de l'essai de connexion

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Utiliser les méthodes AJAX de jQuery pour effectuer des requêtes HTTP et gérer les réponses
• Manipuler le DOM à l'aide de jQuery pour mettre à jour l'interface utilisateur en fonction du résultat de la connexion
• Intégrer l'entrée de l'utilisateur à la fonction de connexion et gérer le processus de connexion

Configurer la structure du projet

Dans cette étape, vous allez configurer les fichiers et la structure du projet. Suivez les étapes ci-dessous pour terminer cette étape :

Ouvrez le dossier du projet. La structure de répertoire est la suivante :

├── bootstrap.min.css ## Fichier Bootstrap
├── index.html ## Page de connexion d'utilisateur
├── jQuery-3.6.0.min.js ## Fichier jQuery
├── userlist.json  ## Fichier JSON
├── login.js   ## Code JavaScript pour la connexion d'utilisateur
├── index.html ## Page de connexion d'utilisateur

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez-le manuellement et vous verrez la page.

Récupérer les données de l'utilisateur

Dans cette étape, vous allez apprendre à utiliser la fonction ajax de jQuery pour récupérer les données d'utilisateur à partir du fichier userlist.json.

1. Ouvrez le fichier login.js et localisez la fonction login.
2. Dans la fonction login, ajoutez le code suivant pour effectuer une requête AJAX au fichier userlist.json :

function login(username, password) {
  // TODO
  $.ajax({
    method: "GET",
    url: "userlist.json",
    success: function (data) {
      // Les données d'utilisateur sont désormais disponibles dans le paramètre 'data'
      console.log(data);
    }
  });
}

Ce code effectuera une requête GET au fichier userlist.json.

Valider la connexion de l'utilisateur

Dans cette étape, vous allez apprendre à comparer le nom d'utilisateur et le mot de passe entrés avec les données d'utilisateur obtenues à partir de la requête AJAX.

1. Dans la fonction de rappel success de la requête AJAX, ajoutez le code suivant pour vérifier si le nom d'utilisateur et le mot de passe entrés correspondent à l'un des enregistrements d'utilisateur :

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

Ce code utilise la méthode some pour vérifier si l'un des enregistrements d'utilisateur dans le tableau data.userlist correspond au nom d'utilisateur et au mot de passe entrés.

2. Après l'appel de la méthode some, ajoutez le code suivant pour afficher le message de succès ou d'échec approprié :

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

Ce code utilise jQuery pour manipuler la visibilité des éléments de message de succès et d'échec sur la page.

Intégrer la fonction de connexion

Dans cette étape finale, vous allez apprendre à intégrer la fonction de connexion avec les éléments d'entrée d'utilisateur sur la page.

1. Dans la fonction $(document).ready(), localisez le gestionnaire d'événement de clic pour le bouton "Connexion" :

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

2. Dans le gestionnaire d'événement de clic, ajoutez le code suivant pour obtenir les valeurs du nom d'utilisateur et du mot de passe entrés, et appelez la fonction login :

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

Ce code récupère les valeurs entrées par l'utilisateur dans les champs d'entrée de nom d'utilisateur et de mot de passe, puis appelle la fonction login avec ces valeurs.

3. Enregistrez le fichier login.js et rafraîchissez la page index.html dans votre navigateur. Essayez d'entrer différentes combinaisons de nom d'utilisateur et de mot de passe et cliquez sur le bouton "Connexion" pour voir les messages de succès et d'échec.

Les résultats réussis sont les suivants :

Les effets de l'échec sont les suivants :

Félicitations! Vous avez terminé l'implémentation de la fonction de connexion d'utilisateur.

Résumé

Félicitations! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires dans LabEx pour améliorer vos compétences.