Gérer les formulaires avec Express

L'un des moyens les plus directs par lesquels nous pouvons obtenir des données utilisateur dans les applications Web est par le biais de formulaires, bien qu'il existe de nombreux mécanismes pour faire en sorte que ces données atteignent nos contrôleurs logiques et d'application, au fond, ils doivent suivre les mêmes règles que les formulaires. HTML, utilisez une méthode HTTP pour envoyer les informations.
Cela rend la capacité de traiter et de manipuler des formulaires indispensable si l'on veut faire des applications web complètes, avec des fonctionnalités qui peuvent être prises en compte et qui développent nos idées.
1- Afin de réaliser ce tutoriel, nous devons répondre à certaines exigences précédentes, nous devons d'abord avoir une installation de Node.js fonctionnel, alors nous devons avoir un projet avec ExpressPeu importe qu'il n'ait pas de structure de dossiers, mais nous avons besoin que le cadre soit disponible à l'emplacement.
2- Nous devons avoir des notions de base de npm, et de HTML, car bien que les concepts soient expliqués de manière très simple, il y a des fondamentaux qui ne sont pas expliqués, comme ce qu'est une balise, ou ce qu'est un attribut HTML.
3- Enfin nous avons besoin d'un navigateur, et d'un éditeur de texte pour pouvoir écrire et valider notre application.
Avant de voir le fonctionnement de Express Pour traiter les formulaires, nous devons connaître un peu plus en profondeur les aspects fondamentaux de ceux-ci, car ils sont une partie vitale de la construction de nos applications lorsque nous voulons ou avons besoin de capturer des données utilisateur.
Voyons le code suivant où nous avons créé une forme simple d'un champ qui capture notre fruit préféré.

Votre fruit préféré :Envoyer

Dans le premier cas, un formulaire doit être composé d'une étiquette à l'intérieur de laquelle il doit y avoir au moins un attribut méthode qui indiquera à notre navigateur la manière dont il nous enverra les informations, il peut être PUBLIER ou alors AVOIR, qui sont les méthodes HTTP de base, nous pouvons également placer un attribut appelé actionSi cela n'existe pas, le formulaire sera envoyé à la même route qui le dessert, s'il existe, il sera envoyé à la route qui est spécifiée comme dans le cas de l'exemple.
Aspects générauxDans notre formulaire, toutes les étiquettes fonctionnent HTML que nous voulons, cependant celles qui sont les plus importantes sont celles de saisie de données comme dans le cas des types puisque ces étiquettes et leur valeur sont celles qui seront envoyées au moment de faire nous faire parvenir qui est l'autre type d'entrée dont nous avons besoin, puisqu'il s'agit du bouton d'action. Nous recevrons les données avec le nom que nous avons donné aux propriétés patate douce de chacun des champs que nous avons créés, il est également important de placer un attribut id à chaque champ et qu'il soit unique afin de pouvoir en manipuler les éléments. SOLEIL d'une manière élégante.
Comment nous voyons la forme HTML Bien qu'il s'agisse d'un élément très simple, il comporte plusieurs détails qui méritent d'être soulignés, soulignés et expliqués pour éviter toute confusion à l'avenir.
Après avoir reçu un formulaire, nous avons de nombreuses options, quel que soit le cadre que nous utilisons, soit Express, Laravel, Django, etc. Il y a un processus qu'il est bon de suivre, car c'est celui qui dira à notre utilisateur si ses données ont été reçues, si elles ont été traitées ou s'il y a eu une erreur. Ce processus peut être divisé en deux groupes, la réponse et la redirection.
RéponseDans ce groupe d'action, une fois que l'utilisateur soumet le formulaire et que nous effectuons un traitement, nous pouvons envoyer une réponse HTML en même temps, c'est-à-dire que nous imprimons un message ou créons une nouvelle vue, nous pouvons ici vous dire si les données étaient correctes ou s'il y avait une erreur. Cette réponse peut être du type AJAX, afin qu'il soit généré sans charger complètement la page, ou lors du rechargement afficher la nouvelle vue, ou simplement générer un message animé avec JavaScript.
RedirectionDans cet autre groupe, une fois que nous avons traité les informations, nous redirigeons et envoyons l'utilisateur soit vers une autre vue, soit simplement vers un écran où nous le remercions d'avoir utilisé notre application, cela peut sembler la même chose que la réponse, cependant ce que nous faisons est envoyer l'utilisateur à un autre endroit dans notre application.
Pour préparer notre candidature Express Afin de traiter les formulaires, nous devons d'abord installer un plugin appelé analyseur de corps, c'est lui qui nous aidera à manipuler les données que le navigateur nous envoie. Pour le faire dans notre console Node.js nous devons utiliser l'instruction:

 npm install --save body-parser

Voyons la réponse générée par l'exécution de cette instruction :

Alors déjà dans notre fichier app.js ou le nom que nous avons placé, nous devons simplement inclure ce middleware pour nous aider dans l'interaction :

 app.use (require ('body-parser') ());

Avec cela, nous sommes prêts à traiter le contenu de nos formulaires, directement dans notre application Express, Cela peut sembler un peu complexe car d'autres frameworks ne nécessitent pas ce type d'installation, cependant Express le fait pour nous donner la liberté de traiter les informations comme nous le souhaitons, ce n'est qu'un chemin parmi les nombreux qui existent.
Nous allons créer un formulaire qui a pour fonction de capturer le fruit préféré de l'utilisateur. Nous allons utiliser celui que nous avons créé dans la section précédente du tutoriel pour plus de facilité, dans notre dossier où nous avons installé Express, créons un fichier appelé serveur.js, app.js ou quel que soit le nom que nous voulons mettre, cependant le contenu est la chose importante. A l'intérieur, nous commencerons par exiger l'utilisation de Express, alors nous devons générer un objet d'application et cela doit utiliser le middleware analyseur de corps.
Définir les itinérairesProchain acte, nous devons définir les routes, dans notre cas, nous allons utiliser la route racine pour afficher le formulaire, donc en accédant directement à notre application, nous aurons directement le résultat, puis nous allons créer une route appelée processus qui reçoit le méthode PUBLIER, ce qu'il va faire est de recevoir les données du formulaire pour enfin imprimer un HTML indiquant les données reçues.
Cela nous permettra de comprendre le déroulement de notre programme, et ainsi de pouvoir traiter des formulaires plus complexes à l'avenir. Voyons le code expliqué ci-dessous :

 var express = require ('express'); var bodyParser = require ('body-parser'); var app = express (); app.use (bodyParser ()); app.set ('port', process.env.PORT || 3001); app.get ('/', fonction (req, res) {var html = '' + '' + ''+' Votre fruit préféré : '+' '+''+''+' Envoyer '+''+' '; res.send (html); }); app.post ('/ process', function (req, res) {var fruit = req.body.fruit; var html =' Votre fruit préféré est : '+ fruit +'.
'+' Essayez à nouveau. '; res.send (html); }); app.listen (app.get ('port'), function () {console.log ('Express a démarré à http: // localhost:' + app.get ('port') + '; appuyez sur Ctrl-C pour fermer le serveur. ');});

Avec cela, nous avons terminé la création de notre application, nous allons maintenant revoir comment l'afficher, pour cela nous devons simplement écrire l'instruction:

 serveur de nœud.js

Où serveur.js C'est le nom que nous avons placé dans notre application, et selon le port que nous avons placé, alors nous pouvons voir notre formulaire dans le navigateur :

Bien sûr, cela peut être plus esthétique, en utilisant Amorcer, ou des styles CSSCependant, pour les objectifs et la portée de ce didacticiel, il est parfait pour comprendre la gestion des formulaires. Si nous interagissons avec lui en écrivant quelque chose dans le champ et en cliquant sur envoyer, nous verrons comment nous arrivons à notre URL traiter:

Dans ce cas, nous avons laissé un lien pour revenir au début, ce traitement appartient au type de redirection, puisque nous avons envoyé l'utilisateur vers un autre itinéraire et y avons reçu le résultat de sa requête, bien sûr il nous manque de nombreuses validations dans cet exemple, comme si le champ vide est envoyé, comment nous validons si un envoi est effectué depuis une autre origine, etc. Ce sont des choses valables mais elles échappent à l'objectif du tutoriel, nous ne les mentionnons que pour que vous sachiez que d'autres étapes suivent dans leur développement en tant que programmeurs dans Express.
Avec cela, nous avons terminé ce tutoriel, comme nous le voyons Express Cela nous facilite beaucoup les choses lorsque nous transférons les informations du Front-End vers notre logique, la gestion simplifiée des routes et l'utilisation de middleware pour nous aider à décoder les informations le rendent parfait pour nous faire gagner du temps de développement.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif