Node.js - 5.7 Lire les données d'un formulaire avec body-parser

Quand un utilisateur envoie un formulaire, les données arrivent dans le corps de la requête. Par défaut, Express ne les lit pas. Cette leçon montre comment ajouter le paquet body-parser pour récupérer ces données dans req.body, puis comment rediriger l'utilisateur après l'envoi.

Créer un formulaire qui envoie en POST

Le formulaire a besoin d'un champ de saisie avec un nom, d'un bouton de type submit, ainsi que des attributs action et method. L'attribut action indique l'adresse qui reçoit les données, et method doit valoir POST.

<form action='/product' method='POST'>
  <input type='text' name='title'>
  <button type='submit'>Ajouter le produit</button>
</form>

Installer et enregistrer body-parser

Par défaut, req.body est indéfini. Il faut enregistrer un analyseur qui lit le corps de la requête. Le paquet body-parser remplit ce rôle, et il doit être enregistré avant les routes qui en ont besoin.

L'option extended: false suffit pour les données de formulaire simples utilisées dans ce cours.

const bodyParser = require('body-parser');

app.use(bodyParser.urlencoded({ extended: false }));

• Installer le paquet avec la commande npm install body-parser.
• Importer le paquet avec require, puis enregistrer l'analyseur avec app.use().
• Redémarrer le serveur, car Nodemon ne le fait pas après une nouvelle installation.

Lire les données puis rediriger

La route qui reçoit le formulaire affiche req.body dans la console, puis redirige l'utilisateur vers la page d'accueil avec res.redirect(). La redirection est plus simple à écrire que de définir manuellement le code d'état et l'en-tête de destination.

app.post('/product', (req, res, next) => {
  console.log(req.body);
  res.redirect('/');
});

En résumé

Un formulaire envoie ses données en POST vers une adresse. Express ne lit pas ces données seul : le paquet body-parser les place dans req.body. Après le traitement, res.redirect() renvoie l'utilisateur vers une autre page.

Points clés

• Un formulaire envoie ses données dans le corps de la requête avec la méthode POST.
• req.body reste indéfini tant que body-parser n'est pas enregistré.
• body-parser est un paquet à installer avec npm.
• L'option extended: false suffit pour les données de formulaire simples.
• res.redirect() envoie l'utilisateur vers une autre adresse.
• Redémarrez le serveur après l'installation d'un nouveau paquet.

Questions fréquentes

Pourquoi req.body est-il indéfini ?

Parce qu'aucun middleware n'a analysé le corps de la requête. Enregistrer body-parser règle ce problème.

Où placer body-parser ?

Avant les routes qui lisent req.body. Il est généralement déclaré avec les autres middleware, en haut du fichier.

Ce paquet lit-il tous les types de données ?

Non. Il lit les données de formulaire. Les fichiers et le JSON demandent d'autres analyseurs, présentés plus loin dans le cours.