Récupération de paramètres d'objet à partir de la requête

Introduction

Dans ce projet, vous allez apprendre à corriger un bogue dans la bibliothèque vue-router qui cause des problèmes lorsqu'on pousse un objet dans le paramètre de requête. Ce projet vous guidera tout au long des étapes nécessaires pour localiser le fichier problématique, identifier le problème et mettre en œuvre une solution pour résoudre le bogue.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment configurer l'environnement de développement et installer les dépendances nécessaires
• Comment localiser le fichier contenant le bogue et préparer sa correction
• Comment corriger le bogue dans la fonction resolveQuery
• Comment reconstruire et tester la correction pour vous assurer qu'elle résout le problème

🏆 Réalisations

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

• Identifier et corriger les bugs dans une bibliothèque tiers
• Gérer les valeurs d'objets dans les paramètres de requête
• Vérifier les corrections pour vous assurer qu'elles fonctionnent comme prévu
• Contribuer à des projets open-source et améliorer vos compétences de résolution de problèmes et de débogage

Corrigez le bogue

Pour commencer, regardez la structure de répertoire des fichiers sur la gauche comme suit :

├── vue-router-3.4.1
├── vue.js
└── index.html

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.

Ouvrez la console du navigateur et observez l'affichage. Tout d'abord, cliquez sur le bouton "test", puis cliquez sur le bouton "pushQuery". La page d'aperçu dans le navigateur devrait ressembler à ceci :

Il y a un bogue dans le code de vue-router v3.4.1 qui, lorsqu'on utilise this.$router.push, lorsque la valeur correspondant à la clé dans query est un objet, sera lu comme une chaîne de caractères "[object object]", ce qui empêche de récupérer correctement la valeur de l'objet. Veuillez corriger ce problème.

Dans cette étape, vous allez corriger le bogue dans la fonction resolveQuery.

1. Localisez le fichier vue-router-3.4.1/src/util/query.js et allez à la ligne 41 pour résoudre le problème en se basant sur la reproduction du problème.

2. La fonction castQueryParamValue devrait gérer le cas où la valeur est un objet. Modifiez la fonction comme suit :

   const castQueryParamValue = (value) =>
     typeof value == "number" ? "" + value : value;
   

Rebâtissez et testez la correction

Dans cette étape, vous allez reconstruire le package vue-router-3.4.1 et tester la correction.

1. Dans le terminal, accédez au répertoire vue-router-3.4.1.
2. Exécutez la commande npm install pour installer les dépendances. Ce processus peut prendre un certain temps, veuillez être patient. (Si cela reste bloqué longtemps, appuyez sur Ctrl+C pour terminer le processus puis exécutez cette commande à nouveau.)
3. Une fois toutes les dépendances installées avec succès, exécutez la commande npm run build pour reconstruire et publier le projet.
4. Redémarrez la page et cliquez sur "Web 8080" pour afficher la page.
5. Ouvrez à nouveau la console du navigateur et observez l'affichage. Tout d'abord, cliquez sur le bouton "Test", puis cliquez sur le bouton "pushQuery" pour voir et tester l'effet de la correction.

La correction devrait maintenant gérer correctement le cas où la valeur correspondant à la clé dans query est un objet, et vous devriez voir l'objet s'afficher correctement dans la console.

Résumé

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