Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel de Node.js

Récupérer les paramètres

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Avec Express.js, comme avec le module HTTP de Node.js, vous pouvez lire les paramètres de requête et travailler avec.
07:34

Transcription

Alors, vous vous souvenez ce qu’on avait mis en place pour récupérer de l’information à la soumission d’un formulaire. Eh bien ça, on va pouvoir le refaire ici. Alors, qu’est-ce qui se passe ? Je soumets mon formulaire et je fais un Formulaire envoyé. Mais moi, j’aimerais savoir ce qui se trouve dans la req.body, parce que concrètement, si j’envoie des informations, normalement dans body, je devrais retrouver de l’info. Donc on va quitter ça, on va relancer. Et normalement dans body, on devrait bien avoir les bonnes informations. Donc on va remplir ici les informations qu’on veut. On va faire Envoyer. On nous dit que le formulaire est envoyé. On va revenir ici, et on se retrouve avec ça. C’est un petit peu embêtant, pourquoi ? Parce que pour le coup, ça ne marche pas. Ça ne récupère pas les informations. Alors, on ne va pas s’amuser à faire comme tout à l’heure, à faire un pipe, etc. et puis récupérer les datas, non. On est sur un framework. Un framework c’est sensé nous fournir des méthodes. Alors si vous avez besoin de travailler sur de la réception json, de la réception de formulaire, pourquoi pas des paramètres dans l’url, il va falloir utiliser ce qu’on appelle un middleware. En fait, vous venez déjà de le faire. Ça, c’est l’utilisation d’un middleware, c'est-à-dire que concrètement vous venez câbler sur votre application Express, des fonctionnalités. Alors il y a une fonctionnalité qui existe, il y a un middleware qui est extrêmement important. C’est le body-parser. On fera attention parce que body-parser, les petits exemples que vous aurez à l’intérieur ne sont pas forcément ultravalides avec la dernière version de node et avec la dernière version d’Express. Donc, ce qui est évident, c’est qu’on va devoir l’installer. C’est un module à part d’Express. Ils l’ont sorti en fait, c’est un module à part. Si vous voulez le sauvegarder : --save. Vous installez ça. Et une fois que vous l’avez installé, vous allez pouvoir l’utiliser. Comment on va l’utiliser ? On va faire un var ici, bodyParser, qui va être égal à un require de body, attention, -parser, le même nom qu’on a utilisé pour l’installation, c'est-à-dire ça : body-parser. Et puis ensuite, on va devoir câbler un middleware. App.use, alors je vous le donne le middleware à utiliser. Ce sera « bodyParser. », et ici ça va être de l’encoding que l’on va utiliser, il y en a plein. Vous verrez qu’effectivement des Parsers différents, il y en a plein. On a notamment le Parser Json, le Parser Text, et le Parser UrlEncoded qui nous intéresse, parce que nous c’est celui-ci qu’on va vouloir utiliser. Pour l’utiliser, vous allez le démarrer comme ça. Vous allez dire à votre application d’utiliser le module bodyParser et d’utiliser l’urlencoded. C’est comme ça que vous allez référencer l’utilisation d’un module en plus dans Express. Concrètement maintenant, ça veut dire que si je fais ici un petit console.log de req.body, je devrais pouvoir me retrouver avec mes petites informations sympas, c'est-à-dire mes informations sous format en plus, vous allez voir json, donc alors là, tout est magnifique, sous format json. Et comme ça on va être tranquille, et on va pouvoir utiliser. Alors, voyons voir comment ça va fonctionner. On va recharger la page. On va remplir le formulaire. Et on va envoyer. On nous dit que le formulaire est envoyé. Et regardez, c’est magique, on récupère les paramètres de notre formulaire sous format objet. Ça veut dire qu’ici, on a la possibilité de travailler avec, et pourquoi pas, on pourrait mettre ici avec les données comme ça. Et on pourrait même aller plus loin que ça, c'est-à-dire qu’ici on pourrait carrément se faire un petit html sympa, bon, un mini formatage, on ne va pas faire un gros truc non plus. Mais là on pourrait formater quelque chose, voilà, comme ça. Avec ici un h1. Donc là on va se faire un petit formatage bien. Et puis ici on va mettre les données dans un paragraphe, vous savez déjà le faire. Donc là il faut mettre ici les var data = req.body. Et il va falloir récupérer ici data.username. Ensuite on va pouvoir faire la même chose avec data.password, qui n’est pas encodé comme vous pouvez le voir, ça c’est des choses, après, il faut les améliorer, évidemment. Et data.date, qu’on a ici. Et on va fermer le paragraphe à cet endroit-là. Vous pensez bien à faire ça proprement, ça ne sert à rien de faire des espaces inutiles. Et logiquement, la réponse qui va être envoyée ici, ce sera une réponse au format html. On va revenir ici sur notre formulaire, renvoyer des informations à l’intérieur, et envoyer. Et effectivement, il y avait. Vous pouvez travailler tout de suite avec les informations. Maintenant, qu’est-ce qui se passe dans le cas d’un formulaire au format GET ? Pour GET, est-ce qu’on peut récupérer aussi le req.body ? On n’a qu’à regarder, regardez ! On va faire un console.log ici de req.body, à cet endroit-là. On va tuer le serveur, le relancer. Et surtout sur l’index.html, on va enlever la méthode GET. Enfin, on va enlever la méthode POST ici, on va remettre le formulaire en mode GET. Vous allez recharger la page, et envoyer les informations. Au niveau de l’affichage, vous allez avoir la même page, pourquoi ? Parce qu’on est en GET, donc il va aller taper sur la même page avec les informations en GET. Mais du côté de notre serveur, qu’est-ce qui se passe ? Est-ce qu’on retrouve les bonnes informations ? Non, on ne retrouve absolument rien, comme vous pouvez le voir. Là, il est venu sur du GET. Il n’a pas fait de console.log sur le req.body. Alors, on va le relancer encore une fois pour voir ce que ça donne, mais vous voyez bien qu’ici il n’intercepte pas les informations, parce que pour lui, ce n’est pas du tout en fait des informations qu’on va pouvoir avoir sur le body. Il ne le trouve pas, et pour lui, ça ne lui parle pas. Et pourquoi ça ne lui parle pas ? Vous avez une idée de ça ou pas ? Parce que regardez sur quelle route on est en train de travailler. C’est impressionnant. Il faut faire super attention. Regardez, vous n’êtes pas sur le slash. Bah non, vous n’êtes absolument pas sur le slash, vous êtes en train de travailler sur hello. Ça c’est embêtant parce que du coup, regardez. Si je câble le slash, qu’est-ce qui va se passer ? Allez, à votre avis ? Bah on ne va plus pouvoir accéder au index.html, du coup ou pas ? Mais si, on continue quand même à accéder au index.html. Et on a câblé de la logique, ce qui veut dire que du coup, si je fais Envoyer, je vais me retrouver ici, eh bien, avec rien du tout. Vous voyez qu’il ne me le récupère pas. Il ne me le relance pas. Pour lui, en fait, c’est l'index.html qui va être plus important, et il ne peut pas récupérer la data. Alors, pour le tester quand même, parce que ça c’est bien, c’est des petits cas pratiques, c’est important de les voir. On peut quand même quoi qu’il arrive, s’amuser avec la route qui s’appelle hello. Parce qu’elle, pour le coup, elle fonctionne. Donc la route qui s’appelle Hello ici, elle est en capacité de récupérer de la data. Comment on va récupérer de la data avec ça ? On va simplement ici faire hello/ et passer de l’information. Et on vérifiera. Ici le req.body, il y a rien. Je vais vous dire pourquoi. Parce que c’est req.query, bah oui, c’est de la query ici. Si on veut récupérer les informations en fait qui proviennent de l’url juste au-dessus, on utilisera req.query. Et ça marchera de la même manière. Là vous avez vu les deux méthodes. Req.body : soumission de formulaire, req.query : c’est plutôt des filtres. Généralement ça va être utilisé pour faire du filtre ça. Et ce qui est génial, c’est qu’en plus de ça, vous pouvez passer les informations derrière, vous allez récupérer, vous, un objet json que vous allez pouvoir travailler. Et là on a quelque chose de génial. Bon, c’est une introduction un peu. Express évidemment, il faut pousser un petit peu plus. Mais là quelques lignes, on a déjà quelque chose de très très sympa à utiliser. Donc n’hésitez pas, poussez sur Express. Vraiment je vous encourage à le faire, ça fait partie de la stack. C’est vraiment super agréable à utiliser, très très simple.

L'essentiel de Node.js

Exploitez les possibilités de Node.js et créez des applications côté serveur entièrement en JavaScript. Travaillez avec des requêtes web, gérez le protocole WebSocket, etc.

4h00 (44 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Node.js Node.js 7.0
Spécial abonnés
Date de parution :26 déc. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !