‫Instructeur :
‫Dans cette vidéo, nous allons parler et
‫mettre en œuvre un concept appelé routage.
‫Donc pour le moment, le code
‫que nous avons écrit ne réagit pas du tout à l'URL que nous demandons.
‫Alors disons que nous avons cette URL et que nous
‫obtenons cette réponse, mais si nous avons par exemple
‫un produit, eh bien, nous obtenons exactement la même réponse, n'est-ce pas ?
‫Si on regarde l'exemple, le
‫projet final, eh bien ici, par exemple,
‫on voit Overview.
‫Donc maintenant, nous avons l'hôte, puis le port, et /overview, et
‫donc la route ici est /overview, puis nous voyons cette
‫page.
‫Mais maintenant, regardez ce qui se passe.
‫Alors maintenant, nous avons un produit.
‫Et c'est pourquoi nous obtenons cette page produit.
‫Et puis on revient en arrière, on revient à la
‫vue d'ensemble, et donc on revoit la page qu'on avait au début.
‫De plus, si nous n'avons rien
‫du tout, eh bien, nous voyons toujours cette même page.
‫Et donc c'est essentiellement du routage.
‫Ainsi, le routage signifie essentiellement la mise en œuvre de
‫différentes actions pour différentes URL.
‫D'accord, et pour le moment, nous n'avons rien de tel.
‫Donc, comme je l'ai dit, quelle que soit l'URL que
‫nous avons, nous obtenons toujours la même réponse.
‫Et donc nous devons maintenant mettre en œuvre
‫une logique qui change cela.
‫D'accord, et encore une fois, ce sera le routage.
‫Maintenant, le routage peut en fait devenir très très compliqué
‫dans une grande application du monde réel, et donc dans
‫ce cas, nous utilisons un outil pour cela comme Express, nous allons
‫donc le faire dans le prochain grand projet
‫de ce cours où nous utilisons Express pour faire tout ça.
‫Mais pour l'instant, puisque nous commençons tout juste à
‫apprendre Node, nous voulons apprendre à tout faire
‫à partir de zéro sans aucune de ces dépendances, n'est-ce pas ?
‫Implémentons donc un routage très simple
‫ici dans ce serveur.
‫Maintenant, la première étape
‫est d'être réellement capable d'analyser l'URL.
‫Et pour cela, nous utilisons encore un autre module Node intégré,
‫qui s'appelle URL.
‫Et je ne fais
‫que dupliquer ceci ici, puis l'URL.
‫Et juste comme note latérale, j'ai donc sélectionné l'URL, puis
‫pour sélectionner la suivante,
‫j'ai juste appuyé sur Commande + D sur mon clavier.
‫D'accord, je sais que quelqu'un va probablement demander dans les questions-réponses comment j'ai
‫fait cette astuce,
‫et c'est pourquoi je réponds à cela en gros tout de suite, et je
‫dis comment cela fonctionne.
‫Quoi qu'il en soit, tout d'abord, examinons en
‫fait la demande. URL.
‫Et bien sûr, je veux une console. journal de cela.
‫Arrêtez donc le serveur et relancez-le.
‫Et il existe un outil pour que nous le fassions automatiquement.
‫Je suis sûr que certains d'entre vous le savent.
‫Et bien sûr, nous allons l'utiliser un
‫peu plus tard, mais pour l'instant je veux continuer comme ça.
‫Bon, alors rechargeons ça.
‫Fonctionne de la même manière, et nous obtenons ici l'URL.
‫D'accord, et nous en avons en fait deux.
‫Et ce que cela signifie, c'est qu'en fait nous avons deux requêtes
‫et donc en fait, cette fonction de rappel ici
‫est exécutée deux fois.
‫Donc une console. log a juste la
‫barre oblique, et le second a /favicon.
‫Ainsi, lorsque nous utilisons
‫un navigateur, le navigateur effectue automatiquement une
‫demande de favicon du site Web.
‫D'accord, donc dans ce cas, nous n'avons pas
‫de favicon, et nous l'ignorons, d'accord ?
‫Donc cela n'a pas vraiment d'importance.
‫Disons maintenant que nous écrivons /vue d'ensemble ici.
‫Voyons donc ce que nous obtenons alors.
‫Nous obtenons donc /overview et /favicon, d'accord.
‫Encore une fois, celui qui compte est le /overview.
‫Donc, pour des URL simples comme
‫celle-ci, nous n'avons même pas besoin du module URL,
‫mais nous en aurons besoin pour des choses plus complexes.
‫Supposons donc que nous
‫ayons, par exemple, spécifié l'ID 23
‫et un autre paramètre ici.
‫Disons que c'est quelque chose comme ça.
‫Et je suis sûr que vous avez vu ce genre de modèle dans
‫une URL où nous pouvons spécifier des paramètres.
‫Donc, si nous avons quelque chose
‫comme ça, alors vous voyez que l'URL est celle-ci.
‫Et ce que le module URL nous
‫aidera à faire, c'est essentiellement analyser ces paramètres et
‫leurs valeurs dans un objet joliment formaté, d'accord ?
‫Donc, pour l'instant, nous
‫n'allons pas encore utiliser le module URL.
‫On va en avoir besoin un peu plus tard.
‫Donc, implémentons maintenant réellement le routage, et c'est
‫très très simple.
‫Donc, fondamentalement, tout ce dont nous avons besoin est une grande déclaration if else ici.
‫D'accord, donc tout d'abord, je vais enregistrer req. URL dans une variable,
‫oh, désolé,
‫dans une variable appelée pathName.
‫D'accord, et maintenant, sur la base de ce nom
‫de chemin, nous prendrons des décisions.
‫Donc, en gros, renvoyez différentes réponses.
‫Donc, si pathName est égal à Overview, ou /overview,
‫eh bien, envoyons quelque chose au client.
‫Et disons simplement, c'est l'APERÇU.
‫Sinon, si le pathName est égal à product, /product, alors tout
‫ce que nous voulons faire est d'envoyer
‫ceci est le PRODUIT.
‫Bon, maintenant au cas où nous serions à la racine du site.
‫Donc en gros, comme ça, eh bien, alors nous voulons
‫aussi montrer la vue d'ensemble.
‫Et ajoutons donc cela ici aussi.
‫Donc pathName est égal à et slash.
‫Et puis le ou.
‫Donc, si le pathName est soit la racine, soit /overview, alors renvoyez-le
‫en tant que OVERVIEW, ou
‫s'il s'agit d'un produit, eh bien, renvoyez PRODUCT.
‫Donc des trucs très simples, et testons-les maintenant.
‫En fait, nous pouvons simplement recharger, ou à la
‫place, en fait, nous devons d'abord terminer cela à nouveau et tout recommencer.
‫Donc ça marche déjà, c'est l'APERÇU.
‫Si je dis
‫maintenant produit, alors c'est un PRODUIT, parfait.
‫Maintenant, juste pour vérifier le dernier, l'aperçu nous
‫donne à nouveau APERÇU.
‫Bon, disons maintenant que nous demandons en fait quelque chose que nous
‫n'avons pas traité.
‫Donc quelque chose comme ça.
‫Alors, que se passe-t-il ?
‫Eh bien, comme vous le voyez, cette roue ici
‫ne s'arrête pas vraiment de tourner.
‫Il essaie donc de renvoyer une réponse, mais il n'y parvient vraiment pas.
‫Le serveur ne sait donc pas quoi faire dans cette situation, car
‫nous n'avons pas ajouté de solution de secours.
‫Alors arrêtons ce pauvre
‫gars ici, et ajoutons simplement une autre déclaration ici.
‫Donc, si ce n'est pas la racine, ni la vue d'ensemble, ni le
‫produit, eh bien, nous voulons dire que cette page est introuvable.
‫Page non trouvée.
‫Maintenant, souvent, lorsque vous essayez d'ouvrir une
‫page introuvable sur le site
‫Web, vous voyez cette erreur 404, n'est-ce pas ?
‫Et c'est en fait ce qu'on appelle un code d'état HTTP.
‫Et donc puisque nous renvoyons une réponse, nous
‫pouvons également ajouter le code d'état à la réponse.
‫Et donc pour cela, nous pouvons utiliser plusieurs façons de le faire, mais je
‫vais en utiliser une qui peut faire
‫plus que du simple code d'état,
‫et je vais vous montrer pourquoi dans une seconde.
‫Mais pour l'instant, je dis
‫juste ici, res. écris la tête, puis 404, d'accord ?
‫Testons cela maintenant.
‫Et alors, que se passe-t-il ici ?
‫Ah, là il ne se
‫passe rien, car je n'ai pas redémarré le serveur.
‫Donc, page introuvable.
‫Très bien, maintenant qu'en est-il du code d'état 404 ?
‫Eh bien, nous pouvons appuyer sur Inspecter ici pour ouvrir les outils de développement, ou
‫à la place, ce que j'aime faire, c'est appuyer sur Commande +
‫J, ce qui ouvrira également les outils de développement.
‫Sous Windows, c'est probablement Alt +
‫Control + J, ou vous pouvez simplement accéder à View,
‫puis Developer, et Developer Tools comme celui-ci, d'accord ?
‫Ensuite, rendez-vous sur l'onglet Réseau, mais en
‫fait, vous pouvez déjà le voir comme ici.
‫Le serveur a donc répondu avec un code d'état 404 non trouvé.
‫Mais vous pouvez aussi le voir sur le réseau, et simplement le
‫recharger, puis vous voyez 404 ici,
‫et le texte rouge pour montrer qu'il y a eu une erreur.
‫Bon, maintenant quelque chose de plus que ce writeHead peut faire ici
‫est d'envoyer également des en-têtes.
‫Et pour envoyer des en-têtes, nous devons spécifier un objet ici,
‫puis nous y mettons les en-têtes que nous voulons envoyer.
‫Maintenant, qu'est-ce qu'un en-tête ?
‫Eh bien, un en-tête HTTP est essentiellement une information
‫sur la réponse que nous renvoyons.
‫Et encore une fois, vous en apprendrez beaucoup plus
‫à ce sujet dans une section ultérieure du cours, d'accord ?
‫Pour l'instant, sachez simplement qu'il
‫existe de nombreux en-têtes standard différents que
‫nous pouvons spécifier pour informer le navigateur
‫ou tout autre client recevant une réponse de la réponse elle-même.
‫Par exemple, l'un des en-têtes standard
‫est d'informer le navigateur du type de contenu.
‫Nous pouvons donc
‫dire Content-Type et le définir sur text/html.
‫Et donc
‫juste comme ça, le navigateur attend maintenant du HTML.
‫Et donc ce que nous
‫pouvons faire maintenant, par exemple ici, est
‫de faire un élément h1 afin de renvoyer du HTML.
‫Alors, juste comme ça.
‫Et à cause de
‫cet en-tête ici, le navigateur s'attend maintenant à ce que du HTML entre.
‫Nous pouvons également spécifier nos propres en-têtes composés.
‫Alors disons mon propre en-tête, bonjour le monde, donc
‫quelque chose comme ça, d'accord ?
‫Ce qui compte ici, c'est que
‫ces en-têtes ainsi que le code d'état
‫doivent toujours être définis avant d'envoyer la réponse.
‫D'accord, nous ne pouvons donc jamais envoyer d'en-têtes après
‫le contenu de la réponse lui-même.
‫Essayons donc à nouveau,
‫ou en fait, je devrais redémarrer le serveur.
‫Et alors essayons à nouveau maintenant.
‫Et en effet, nous obtenons toujours notre erreur,
‫mais maintenant cela semble différent.
‫Nous avons donc maintenant un élément h1 ici.
‫Et si nous cliquons également sur l'onglet Réseau sur cette
‫demande, augmentons-la un peu ici.
‫Je ne sais donc pas
‫si vous pouvez vraiment voir cela, mais lorsque nous cliquons sur cette
‫demande ici, nous pouvons également voir les en-têtes de réponse.
‫Et donc ici, nous avons le
‫type de contenu que nous avons spécifié comme text/html,
‫puis l'autre
‫en-tête, donc mon propre en-tête est défini sur hello-world.
‫Et encore une fois, nous pouvons l'utiliser pour envoyer des
‫métadonnées sur la réponse elle-même, d'accord ?
‫Maintenant, il y a aussi des en-têtes de requête, et
‫ceux-ci ont été définis automatiquement par le navigateur, mais pour
‫l'instant, ne vous en souciez pas.
‫Ce qui compte, c'est que nous ayons spécifié que le
‫contenu que nous envoyons est en HTML, et
‫aussi, par exemple, le code
‫d'état que nous avons renvoyé est 404 introuvable, d'accord ?
‫Maintenant, débarrassons-nous simplement de cela.
‫Ouvrez-le, et maintenant vous voyez, nous avons
‫un statut de 200, ce qui signifie OK, et
‫ces autres en-têtes, ils ont en fait disparu.
‫D'accord, maintenant cette réponse
‫n'a pas ces deux autres en-têtes, n'est-ce pas ?
‫Et nous voyons le 200
‫OK maintenant, et donc oui, tout fonctionne bien en ce moment.
‫Nous avons implémenté le routage de
‫base, donc pour différents noms
‫de chemin, nous avons maintenant différentes actions.
‫Juste une dernière chose que je voulais dire à propos du routage,
‫c'est que ces routes que nous avons définies ici dans notre
‫code et les routes que nous mettons dans les URL du navigateur
‫n'ont rien à voir avec les fichiers et
‫dossiers du système de fichiers de notre projet, d'accord ?
‫Donc, en tant que débutant, vous
‫pourriez penser que si nous ouvrons /templates par exemple, cela
‫ouvrira alors le dossier Templates que nous avons
‫dans notre système de fichiers.
‫Mais bien sûr, ce n'est pas le cas.
‫Donc, si nous voulions avoir une route de
‫modèles, eh bien, nous
‫devions la définir dans notre routeur, en
‫gros, puis envoyer une réponse spéciale uniquement pour cette route.
‫Quoi qu'il en soit, je pense que cela suffit pour une vidéo.
‫Rendez-vous dans le prochain.