La méthode json parse analyse une chaîne JSON et construit la valeur ou l'objet JavaScript décrit par la chaîne.
Apprenez à gérer les données de formulaires avec ExpressJS dans ce tutoriel pas à pas pour débutants. Exemples clairs et exécutables inclus
Dans ce tutoriel, nous allons apprendre à récupérer et utiliser les données envoyées par un formulaire HTML avec ExpressJS. Ce guide est fait pour les débutants : nous irons lentement, étape par étape, avec des explications très détaillées et un exemple que vous pourrez exécuter vous-même.
Un formulaire est une partie d’une page web où les utilisateurs peuvent entrer des informations, comme leur nom ou leur email, et les envoyer à un serveur. ExpressJS est un outil pour créer des serveurs avec Node.js, il nous permet de recevoir ces informations et de les traiter. Par exemple, imaginez un formulaire où quelqu’un entre son nom, et le serveur répond "Bonjour, [nom] !". C’est ce que nous allons faire ici.
Avant de coder, assurons-nous que tout est prêt. Si vous n’avez jamais utilisé Node.js ou ExpressJS, suivez ces étapes :
node -v. Vous devriez voir une version (ex. : v16.13.0).cd chemin/vers/formulaire-express, puis tapez npm init -y. Cela crée un fichier package.json.npm install express. Cela ajoute ExpressJS à votre projet.Nous allons d’abord créer une page avec un formulaire où l’utilisateur peut entrer son nom. ExpressJS servira cette page.
Créez un fichier nommé index.js dans votre dossier "formulaire-express" et ajoutez ce code. Il affiche une page avec un formulaire.
var express = require('express');
var app = express();
app.get('/', function(req, res) {
res.send(`
<html>
<body>
<h1>Entrez votre nom</h1>
<form method="POST" action="/submit">
<label>Nom : </label>
<input type="text" name="nom">
<button type="submit">Envoyer</button>
</form>
</body>
</html>
`);
});
app.listen(3000, function() {
console.log("Serveur démarré sur http://localhost:3000");
});
Voici ce que fait chaque ligne, expliqué très simplement :
Pour exécuter : Dans le terminal, tapez node index.js. Ouvrez votre navigateur à http://localhost:3000. Vous verrez un formulaire ! Mais si vous cliquez sur "Envoyer", rien ne se passe encore. Passons à l’étape suivante.
Pour lire les données envoyées par le formulaire, ExpressJS a besoin d’un outil supplémentaire appelé "middleware". Installons-le et utilisons-le.
npm install body-parser.Mettez à jour le fichier : index.js avec le code qui suit. Il récupère le nom et répond avec un message.
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
// Middleware pour lire les données POST
app.use(bodyParser.urlencoded({ extended: false }));
// Afficher le formulaire
app.get('/', function(req, res) {
res.send(`
<html>
<body>
<h1>Entrez votre nom</h1>
<form method="POST" action="/submit">
<label>Nom : </label>
<input type="text" name="nom">
<button type="submit">Envoyer</button>
</form>
</body>
</html>
`);
});
// Recevoir les données du formulaire
app.post('/submit', function(req, res) {
var nom = req.body.nom;
res.send(`<html><body><h1>Bonjour, ${nom} !</h1></body></html>`);
});
app.listen(3000, function() {
console.log("Serveur démarré sur http://localhost:3000");
});
Voici chaque nouvelle partie expliquée très clairement :
body-parser, un outil qui aide Express à comprendre les données du formulaire.req.body contient toutes les données envoyées.${} insèrent le nom dans le texte.Pour exécuter : Sauvegardez index.js, tapez node index.js dans le terminal, allez à http://localhost:3000, entrez un nom dans le champ de saisie (ex. : "Marie"), et cliquez sur "Envoyer". Vous verrez "Bonjour, Marie !".
Félicitations ! Vous savez maintenant gérer un formulaire avec ExpressJS. Vous avez créé un serveur, affiché un formulaire, et traité les données envoyées. Pour aller plus loin, explorez notre prochain tutoriel sur Connecter ExpressJS à une Base de Données ou consultez la documentation ExpressJS.