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 données en POST

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Les différents verbes HTTP sont disponibles, ainsi que le verbe POST. Apprenez à récupérer les informations envoyées et les exploiter dans votre logique.
07:14

Transcription

Alors on va terminer ce chapitre sur un premier serveur avec node.js, en parlant des requêtes. Actuellement qu’est-ce qui se passe ? On n’a pas encore parlé de la récupération de requêtes, et on ne travaille que sur le verbe get. Vous allez mettre à jour un petit peu votre serveur comme ça, de façon très simple. Vous allez simplement intercepter la méthode de la requête. Là, en l’occurrence c’est du get, et donc on va faire simplement un rendu de ce qu’on a déjà fait, public, index.html. Attention par contre, index.html, j’aime le faire évoluer un petit peu. Je vais fermer ce qu’on a sur le côté. Et je vais vous montrer index.html. Toujours il se trouve dans le dossier Public. Et on va simplement ici, dans le body, créer une balise form avec une méthode POST. Faites attention à ça, j’y reviendrai tout à l’heure, je vous expliquerai pourquoi il faut faire attention avec les formulaires. Et puis ensuite on va créer trois inputs. Alors, un type text avec un name username, un type password avec un name password, un type date avec un name date. Vous ferez bien attention à ça quand vous travaillez sur des formulaires, pensez bien à mettre un nom à chacun de vos champs pour pouvoir récupérer les données derrière. Une fois que vous aurez fait ça, vous penserez bien à mettre un petit bouton Envoyer. Simplement un bouton, ce sera suffisant. Et puis vous allez servir cette page au travers de http sur la méthode GET. Quand il va intercepter la méthode GET, vous servez la page. Qu’est-ce qui va se passer ? Bah, alors concrètement on va relancer notre serveur. On va retourner sur notre page, comme ça. Et puis ici, quand on va le servir, voilà ce qu’on va avoir. On va récupérer ici localhost:3000, un petit formulaire tout basique dans lequel on n’a pas d’informations plus que ça. On va quand même pouvoir remplir les trois champs. Donc on en a un, c’est un type text, un, un type password, du coup on voit un password, et puis un autre, c’est un type date. Si vous êtes sur Chrome comme moi, vous allez avoir un petit comme ça, date picker, qui est très sympa à utiliser, dans lequel on peut choisir une date. Quand je soumets un formulaire, qu’est-ce qui se passe ? Concrètement ici, si je ne mets pas la méthode POST ? Je vais recharger ma page, et bien sûr je penserai également à relancer mon serveur parce que là je viens de le modifier. Donc dès que vous modifiez le corps de votre serveur, pensez bien à relancer le serveur. Je vais ajouter des infos et ici je vais choisir une date et faire Envoyer. Vous remarquerez que ça, c’est de la méthode GET. C'est-à-dire que les paramètres de votre formulaire sont envoyés directement dans l’url. Nous, ce qu’on voudrait, c’est avoir du POST. Le problème de POST, c’est que pour le moment on va avoir un souci, c’est qu’il n’est pas du tout intercepté. On n’intercepte que GET. C’est pour ça que du coup le formulaire fonctionnait. On va remettre du POST ici. Et ce qu’on va faire c’est qu’on va le travailler ce POST. C'est-à-dire on va récupérer les données de POST et on va venir les afficher. Donc Else if rec.method est ===, triple égal àPOST, dans ce cas-là qu’est-ce qu’on va faire ? Eh bien, on va intercepter les données, et les afficher à l’utilisateur. Pour intercepter les données, bah tout simplement ce qu’il va falloir faire, c’est se câbler, vous allez voir, sur la Request. On va se faire une var Body qui va être égale à rien du tout, comme ça. Et on va se câbler sur « req. » et on va faire un on, on data. Ici ce qui est intéressant, c’est que quand vous avez une méthode POST qui passe, forcément la Request, elle contient de l’information puisqu’elle contient les données de votre formulaire. Ce qui veut donc dire que ces données-là, elle va pouvoir les afficher. Ici on va câbler une fonction avec, toujours pareil, des chunks, et ces chunks-là, bah, on n’a qu’à simplement faire un console.log ici, de chunk, pour voir déjà ce que ça donne avant de constituer quoi que ce soit. Et on n’a plus qu’à enregistrer, relancer le serveur, et soumettre le formulaire. Donc là, on va soumettre le formulaire avec des données à l’intérieur. Alors bien sûr, ce qui se passe ici, c’est qu’il est en train de soumettre les informations, mais il est toujours en GET, il n’est pas en POST, pourquoi ? Parce qu’on n’avait pas rechargé la page. Donc, il faut bien penser aussi à recharger ici. Ah oui je sais, ça fait beaucoup de rechargement, mais bon bah c’est obligatoire parce que du coup la page ne se recharge pas automatiquement. Alors, voilà ce qui se passe quand on soumet un POST sans avoir encore de réponse. Il est en train de partir. Il y a un buffer qui vient de se créer. Donc, on a bien la formation ici, des datas, mais on ne les affiche pas. Alors là, c’est un peu embêtant parce que moi, j’aimerais bien afficher ces petites données-là, et puis pouvoir les récupérer. On se rend compte déjà qu’il y a déjà de la data qui arrive sur le serveur. Donc c’est déjà une première étape intéressante pour nous. Ça veut dire que concrètement, il y a bien de la donnée. Maintenant il va falloir l’afficher. Pour l’afficher déjà, ce qu’on va faire, c’est qu’on va faire un += du chunk. Comme ça on va ajouter l’information directement dans notre body. Et puis quand ce sera terminé, quand ce sera terminé, ça veut dire que, du coup req.on, et c’est terminé, end. Attention, à ce moment-là uniquement on va pouvoir travailler avec une fonction d’appel, et puis lui dire de nous faire la réponse. Pourquoi on le fait ici ? Pourquoi on le fait sur le end ? Parce que pendant que ce processus est en train de tourner, on ne peut pas faire quelque chose avec body, il n’est pas terminé. Là, quand la request sera terminée, on peut envoyer une response. Donc ne le faites pas avant ou après, ça ne marchera pas. Il faut le faire à l’intérieur de l’évènement end. Il faut attendre que la requête soit terminée pour pouvoir envoyer une réponse. On va faire ça très simplement. On va récupérer ces deux lignes-là qui sont largement suffisantes. Et puis ici on va simplement travailler le contenu qui sera renvoyé. Et le contenu qui sera renvoyé, on n’a pas besoin de s’embêter plus que ça. On va simplement récupérer le body, et l’afficher au format html. Alors, souvenez-vous, si je ne décode pas, forcément je n’ai pas d’informations, j’ai rien. Ici, c’est bien parce qu’une fois que c’est terminé, on envoie une response, et donc ça va arrêter de tourner dans le vide. On relance le serveur. On revient en arrière, on rafraîchit la page. On met des données ici. Et on envoie. Effectivement, vous voyez qu’après donc, une fois que c’est de la méthode POST, ça récupère les données, ça les insère dans le body, notre variable qu’on avait mis de côté. Et ensuite, ça vient faire une réponse. Et là vous vous rendez compte de ce qu'est body. Body actuellement, c’est devenu une string que l’on peut afficher facilement. Ce n’est pas super utile pour travailler, ça vous allez me dire. Mais malheureusement si vous utilisez juste le serveur comme ça, node.js, il faudra travailler sur une méthode qui est capable de décoder, qui est capable de vous découper la chaîne de caractère, et puis de vous faire un objet, pourquoi pas avec les méthodes, et à chaque fois, les valeurs, paramètres, valeur, il faudra découper tout ça. Pas d’autres choix malheureusement. Il n’y a pas un outil particulier intégré directement en node.js, qui vous permettra, pourquoi pas, de récupérer un objet directement formaté pour travailler avec. Mais vous verrez qu’il y a des possibilités de le faire. Dans notre prochain chapitre, nous allons parler d’Express. Express, c’est une solution qui vient se placer au dessus de node.js. Et bien sûr, ça permet vraiment de travailler sur des serveur http un petit peu plus féroces. Là c’est vrai qu’on est sur quelque chose de très basique. Quand on a des choses simples à faire, et rapides, on peut utilisera ça. Vous voyez qu’on peut récupérer très facilement les données qui sont soumises en POST. Si on veut aller un peu plus loin, on utilisera Express.

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 !