‫Instructeur : Dans cette
‫vidéo, nous allons donc apprendre à analyser certaines variables
‫de l'URL afin de pouvoir créer la page du produit.
‫Alors rappelez-vous comment dès le
‫début j'ai importé le module URL, donc
‫celui-ci ici, afin
‫de pouvoir analyser les variables directement à partir de l'URL.
‫D'accord. Donc, dans un premier temps,
‫enregistrons une
‫fois de plus "req. url" à la console, puis
‫une autre chose que je souhaite enregistrer est en fait ...
‫le résultat de l'utilisation de "url. parse" sur cette URL.
‫Donc, encore une fois, l'analyse consiste essentiellement à analyser les
‫variables hors de l'URL.
‫Donc, quelque chose comme ça.
‫Donc, ce que nous voulons, c'est "id = 0", c'est vrai, car
‫pour le moment, le "req. url" est tout cela, donc
‫toute cette
‫URL, et bien sûr, nous n'avons
‫aucune route pour cela.
‫Donc rien ici dans ce genre de routeurs que nous avons ici, ne
‫correspond en fait à cette URL entière.
‫C'est pourquoi nous obtenons « Page non trouvée ! " Et
‫c'est aussi pour ça qu'on doit changer quelques trucs ici.
‫D'accord, laissez-moi analyser l'URL ici, afin que vous puissiez jeter
‫un œil au résultat
‫pour voir ce que nous devons faire ensuite.
‫Je dois également passer "true" ici dans cette fonction d'analyse
‫afin d'analyser réellement la requête dans un objet.
‫Donc, avec requête, je veux dire cette partie ici.
‫D'accord, c'est ce qu'on appelle la chaîne
‫de requête, d'accord, et c'est donc ce que nous analysons efficacement,
‫cette partie de l'URL.
‫Alors redémarrez-le
‫et examinons simplement les journaux que nous obtenons.
‫Donc, le premier est le "req. url" et c'est ce
‫à quoi nous nous attendions, n'est-ce pas, et voici
‫le résultat de faire "url. parse" Donc nous
‫obtenons l'objet de requête ici, et donc
‫ici, nous avons un bel objet
‫qui nous dit que l'identifiant est 0, c'est
‫ça, donc c'est beau.
‫Et puis, juste en dessous, nous avons
‫en fait la deuxième pièce dont
‫nous avons besoin, qui est juste le nom de chemin, d'accord.
‫Ainsi, notre itinéraire utilise ce chemin
‫d'accès, donc juste "/produit", puis nous devons connaître la requête
‫afin de répondre en conséquence à l'ID de 0.
‫Donc dans ce cas, par
‫exemple, le chargement du produit avocat, qui est le premier.
‫Mais si c'était le
‫numéro deux, par exemple, alors charger ce brocoli, c'est bien.
‫Et donc cette requête et ce chemin d'accès sont ce
‫que nous allons utiliser pour faire cela.
‫Donc, celui-ci nous n'avons plus besoin.
‫Nous ne voulons pas non plus enregistrer quoi que ce soit
‫dans la console maintenant car ce que nous
‫voulons faire à la place est de créer deux variables, appelées
‫query et ...
‫nom de chemin.
‫Et nous pouvons le faire en utilisant les piles, la structuration.
‫Donc, encore une fois, j'espère
‫que vous connaissez cette syntaxe ici, et c'est ainsi que cela fonctionne réellement.
‫Donc, cet objet ici, il a une requête et un nom de chemin.
‫Donc, en utilisant cette structuration
‫comme celle-ci, avec ces noms de propriétés exacts,
‫en fait, cela doit être comme ça.
‫Ainsi, avec ces deux
‫noms de propriété exacts, il créera
‫ces deux variables, l'une appelée query et l'autre
‫appelée pathname, avec exactement les valeurs que nous avons ici.
‫La requête sera donc
‫celle-ci et le chemin sera "/product", dans ce cas.
‫Super. Maintenant, tout ce que j'ai
‫à faire est d'aller de l'avant et de remplacer celui-ci ici par celui-ci.
‫D'accord.
‫Supprimons celui-ci, et pour
‫nous assurer que nous enregistrons réellement la requête dans la console au
‫cas où nous serions sur la page du produit.
‫"console. log" l'objet de requête.
‫Et maintenant, nous revenons à la recherche de
‫la page et nous devons également interroger avec cet identifiant 0.
‫Tellement parfait. Alors maintenant, nous
‫sommes prêts à créer cette page en utilisant notre modèle.
‫Et cela devrait être
‫très simple, en fait beaucoup plus simple que la page de présentation,
‫car ici nous n'avons pas
‫à faire ces boucles folles ici car il
‫y a un modèle simple, tout ce
‫que nous avons à faire est de tout remplacer.
‫Donc, dans la première étape, déterminons en fait quel
‫est le produit que nous voulons afficher.
‫Je crée donc une variable appelée product, et
‫qui sera égale à l'objet de données à la
‫position "query. identifiant. « D'accord,
‫c'est logique ?
‫L'objet de données est donc un tableau,
‫et nous allons ensuite récupérer l'élément à la position qui
‫provient de la requête. identifiant.
‫Donc, si c'est zéro, alors c'est
‫l'élément zéro, si c'est deux, c'est l'élément numéro deux.
‫D'accord, et c'est donc le
‫moyen le plus simple de récupérer un élément basé sur une chaîne de requête.
‫Maintenant, une autre chose
‫que nous devons faire est d'obtenir exactement la même tête ici,
‫d'accord, et enfin nous créons simplement notre sortie.
‫Ainsi, la sortie est simplement replaceTemplate, et le
‫code HTML que nous devons
‫transmettre est le tempOverview, ou en fait le tempProduct, et
‫ce que nous transmettons est le produit.
‫Et c'est tout!
‫Maintenant, nous envoyons simplement la sortie comme résultat, ou
‫comme réponse en fait, et c'est tout.
‫Donc, cette partie ici a du sens, n'est-ce pas ?
‫Donc, encore une fois, replaceTemplate s'attend à ce que
‫nous mettions un modèle et un produit.
‫Un produit est donc un objet avec toutes ces propriétés.
‫Et donc ce produit vient ici directement de
‫cet objet de données.
‫Ainsi, dans replaceTemplate, nous passons le modèle product,
‫donc celui-ci, que nous avons chargé à
‫partir du fichier dès le début, puis product.
‫Comme je l'ai mentionné, bien sûr, celui venant du tableau.
‫Et donc ça devrait être ça.
‫Donc, si le modèle est correct,
‫cela devrait fonctionner maintenant.
‫Alors, redémarrons le serveur,
‫rechargeons-le,
‫et effectivement, c'est parti.
‫Alors, c'est super, ça me fait
‫vraiment plaisir, quand ce genre
‫de trucs marche comme ça, magnifique, tout est parfait.
‫Aussi ce bouton de retour, oh ça ne marche pas.
‫D'accord. Nous devons donc changer le modèle HTML ici.
‫Alors où est-ce ? C'est dans le
‫produit, et ce lien ici, où est-ce, ah.
‫Oui, cela ne pointe nulle part en gros, et
‫ce que nous voulons, c'est revenir à la vue d'ensemble, n'est-ce pas.
‫Redémarrez le serveur, rechargez cette page,
‫et maintenant, cela fonctionne.
‫Essayons sans le patch bio, et effectivement,
‫ce n'est pas là.
‫Avant c'était, et maintenant c'est parti.
‫Et tous ces éléments ici sont
‫bien sûr dynamiques et proviennent de ce fichier JSON. Oui.
‫Donc tout cela fonctionne. Beau.
‫C'est vraiment très bien.
‫Et notre projet, on peut le dire maintenant, est en fait terminé.
‫Juste une autre petite chose que je veux faire, qui
‫est juste de vous montrer quelque chose de gentil que nous pouvons faire.
‫Mais à part ça, notre projet fonctionne.
‫Alors félicitations, vous venez de terminer votre tout
‫premier nœud vraiment cool. projet js.
‫Et ce n'était pas si difficile, non ?
‫Je veux dire, certaines
‫des choses que nous avons faites sont plus liées à la programmation JavaScript en
‫général, et pas tellement à node. js lui-même, non?
‫Donc des trucs comme ça ici, ce qui était peut-être un peu déroutant, mais encore
‫une fois à la fin de la journée,
‫ce n'est vraiment que du JavaScript normal, n'est-ce pas ?
‫Donc, encore une fois, la fonctionnalité est
‫là, il y a juste une autre petite chose que
‫je veux faire dans la prochaine vidéo, et quand vous l'atteindrez, je
‫vous dirai ce que c'est.