Retour
2/ Expres.js: Les Routes

Avec ExpressJS, les routes sont une des ses principales fonctionnalités, car elle permettent de prépondre aux clients différament suivant l'URL, la méthode de la raquête HTTP.
Dans ce chapitre, nous allons **explorer les différentes manières de créer des routes** avec ExpressJS, allant des routes les plus simples aux plus avancées.
Déscription
ExpressJS est une librairie Node.js très populaire pour créer des applications web. L'une de ses principales fonctionnalités est la création de routes, qui permettent de définir des URL pour lesquelles l'application répondra avec une certaine logique.
Dans ce chapitre, nous allons explorer les différentes manières de créer des routes avec ExpressJS, allant des routes les plus simples aux plus avancées.
Prérequis
Pour suivre ce chapitre, vous devez avoir une bonne compréhension du langage JavaScript et des connaissances de base en développement web, y compris la création de sites web statiques et dynamiques:
1. Initiation au language Javascript.
2. Initiation à la programmation serveur avec NodeJS.
3. Introduction a ExpressJS.
Structure du projet
Vous pouvez récuperer le projet le départ sur GitHub.
git clone https://github.com/Djemai-Samy/expressjs-initiation
Ou récupérer le projet de départ sur GitLab.
git clone https://gitlab.com/tutoriels-dev/expressjs/expressjs-initiation/1.expressjs-initiation/-/tree/main
📦expressjs-initiation
┣ 📂node_modules
┣ 📜package.json
┗ 📜app.js
Puis déplacez vous sur le répoertoire:
cd ./express-initiation
Installer toutes les dépendances:
npm install
Lancez l'application en mode developpement:
npm run dev
Rappel sur le HTTP
Une requête HTTP
(Hypertext Transfer Protocol) est une demande envoyée par un client à un serveur web pour récupérer ou envoyer des informations.
Cela peut inclure des demandes de pages web, des demandes de données, des envois de formulaires, des mises à jour de données, etc.
Une requête HTTP
est composée de plusieurs parties :
1. Les URLs
Une URL (Uniform Resource Locator) est une chaîne de caractères utilisée pour identifier une ressource sur le Web.
Dans une application Web basée sur Node.js avec Express.js, les URLs sont souvent utilisées pour identifier les différentes routes de l'application.
Une route est un point d'entrée dans l'application qui peut être invoqué en envoyant une requête HTTP
à un endpoint spécifique.
Il est important de noter que l'URL peut également contenir des paramètres de requête.
Les paramètres de requête sont des données qui sont ajoutées à la fin de l'URL après un point d'interrogation ?
, et sont utilisées pour fournir des informations supplémentaires sur la ressource demandée.
Par exemple, si vous envoyez une requête à la route /articles?id=2
, l'URL dans la requête serait /articles
et le paramètre de requête id
aurait la valeur 2
.
2. Les méthodes
Les méthodes de requête HTTP
sont utilisées pour indiquer l'action à effectuer sur une ressource identifiée par une URL.
Il existe plusieurs méthodes de requête HTTP
, mais les plus courantes sont les suivantes :
GET
: utilisée pour récupérer une ressource.POST
: utilisée pour créer une nouvelle ressource.PUT
: utilisée pour mettre à jour une ressource existante.DELETE
: utilisée pour supprimer une ressource existante.
Ces méthodes de requête sont souvent utilisées dans le contexte du CRUD (Create, Read, Update, Delete), qui est un ensemble d'opérations de base pour la gestion des données.
- Create : la méthode
POST
est utilisée pour créer une nouvelle ressource. Par exemple, vous pouvez utiliser une requête POST pour créer un nouvel utilisateur dans une base de données. - Read : la méthode
GET
est utilisée pour récupérer une ressource existante. Par exemple, vous pouvez utiliser une requête GET pour récupérer les informations d'un utilisateur spécifique à partir d'une base de données. - Update : la méthode
PUT
est utilisée pour mettre à jour une ressource existante. Par exemple, vous pouvez utiliser une requête PUT pour mettre à jour les informations d'un utilisateur spécifique dans une base de données. - Delete : la méthode
DELETE
est utilisée pour supprimer une ressource existante. Par exemple, vous pouvez utiliser une requête DELETE pour supprimer un utilisateur spécifique d'une base de données.
En utilisant ces méthodes de requête HTTP et le CRUD, les développeurs peuvent créer des applications Web robustes et sécurisées qui permettent aux utilisateurs de créer, lire, mettre à jour et supprimer des données de manière facile et sécurisée.
3. Les entêtes (headers)
Les entêtes sont utilisés pour transmettre des informations supplémentaires sur la requête.
Il existe de nombreux types d'entêtes, qui peuvent inclure des informations sur le client, le serveur, le contenu de la requête et les préférences de l'utilisateur.
Voici un exemple d'entêtes :
GET /articles?id=2 HTTP/1.1
Host: www.exemple.com
Cookie: session_id=1234567890; user_prefs=dark_mode
Content-Type: applicaiton/json
4. Le corps (body)
Cela peut être vide ou contenir des données, comme des données de formulaire ou des fichiers à télécharger.
Voici un exemple :
POST /articles HTTP/1.1
Host: www.exemple.com
{
"title": "Un titre",
"content":"Du contenu"
}
Les Routes
Les routes sont des points de terminaison (endpoints) qui permettent aux clients de communiquer avec le serveur.
Lorsqu'un client envoie une requête HTTP
à un serveur, il inclut généralement une URL qui indique au serveur quelle ressource il souhaite récupérer ou quelle action il souhaite effectuer.
Les routes sont utilisées pour définir les correspondances entre les URLs, et les fonctions qui traitent ces requêtes.
1. Déclaration de route simple
Pour déclarer une route simple, nous utilisons une des méthodes de l'instance d'express app.METHOD(route, controleur)
où METHOD
est une méthode HTTP telle que GET
, POST
, PUT
, DELETE
, etc.,
Cette méthode prend deux paramètres :
- route: L'URL pour accéder à la logique.
- controleur: Une fonction callback qui prend deux paramètres,
req
etres
. La fonction s'execute quand une requête correspond a l'URL et à la méthodeHTTP
.
Dans cet exemple, la route /example
est déclarée.
Lorsque l'utilisateur accède à cette URL, la fonction est exécutée et du texte est affiché dans la console.
import express from "express";
const app = express();
// Route GET sur l'url /exemple
app.get('/example', function(req, res) {
// Afficher un méssage dans la console quand une raquête est interceptée
console.log('Une requête GET est reçue sur /exemple');
//Envoyer un message dans la réponse
res.send('Hello world!');
});
// Lancer le serveur sur le port 3000
app.listen(3000, function () {
console.log('Example app listening on port 3001!');
})
Vous pouvez tester votre serveur de plusieurs manières par exemple en utilisant des logiciels graphiques comme Postman, qui permet de tester vos API facilement.

2. La Requête
Le paramètre req
est un objet représentant la requête HTTP
entrante.
Cet objet contient des informations sur la requête, telles que les en-têtes, le corps de la requête, les paramètres de requête, les paramètres de chemin, etc:
req.app
: l'instance de l'application Express utilisée par cette requête.req.baseUrl
: l'URL de base sur laquelle la route actuelle a été montée.req.ip
: l'adresseIP
de l'hôte qui a initié la requête.req.query
: un objet contenant les paramètres de requête. Les paramètres de requête sont des paires de clé-valeur ajoutées à l'URL après un?
.
Ce paramètre est généralement utilisé dans la fonction de gestionnaire de requêtes pour accéder aux données de la requête entrante et pour prendre des décisions en fonction de ces données.
Dans cet exemple, nous avons déclaré une route avec l'URL /hello
qui contient un query name
.
Lorsqu'un client effectue une requête GET
à cette URL, nous récupérons la valeur du query name
en utilisant la propriété req.query
de l'objet req
.
Nous utilisons ensuite cette valeur pour afficher le nom réçues dans la console
// Déclaration de la route avec un query name 'name'
app.get('/hello', function(req, res) {
// Récupération de la valeur du query name 'name' avec la méthode req.query
var name = req.query.name;
// Utilisation de la valeur récupérée pour la réponse
console.log('Hello ' + name + '!');
// Envoyer la réponse avec le nom réçu dans le query
res.send("Hello " + name + "!");
});
Par exemple, si un client effectue une requête GET
à l'URL /hello?name=John
, la valeur de name
sera récupérée et utilisée pour afficher dans la console le message Hello John!
.

3. La Réponse
Le paramètre res
représente l'objet de réponse HTTP
renvoyé par le serveur à un client HTTP
(comme un navigateur Web).
Il est utilisé pour envoyer une réponse à la requête HTTP
correspondante reçue par le serveur.
L'objet res
contient des méthodes et des propriétés qui permettent de personnaliser la réponse HTTP
, comme le code de statut HTTP
, les en-têtes HTTP
et le corps de la réponse.
res.append(field [, value])
: ajoute une valeur à l'en-têteHTTP
spécifié parfield
.res.cookie(name, value [, options]
: définit un cookie sur le navigateur de l'utilisateur.res.download(path [, filename] [, options] [, fn])
: télécharge un fichier du serveur.res.send([body])
: envoie une réponseHTTP
.res.json([objet])
: envoie une réponseJSON
.res.sendFile(path [, options] [, fn])
: définit le code de statutHTTP
de la réponse.res.status(code)
: envoie un fichier comme réponse.res.redirect([status,] path)
: redirige la requête vers une URL spécifiée.
Dans cet exemple, nous avons défini une route GET
pour l'URL /hello
.
Lorsqu'un client effectue une requête GET
à cette URL, la fonction de rappel de la route est exécutée avec les objets req
et res
.
Nous récupérons la valeur du query name
en utilisant la propriété req.query
de l'objet req
.
Puis nous utilisons l'objet res
pour définir le code de statut HTTP
à 200
et envoyer une réponse avec le message Hello World!
en utilisant la méthode send()
.
app.get('/hello', function(req, res) {
// Récupération de la valeur 'name' ave req.query
const name = req.query.name;
// Envoyer la réponse avec le nom réçu dans le query
res.status(200).send(`Hello ${name}!`);
});
Par exemple, si un client effectue une requête GET
à l'URL /hello?name=John
, la valeur de name
sera récupérée et utilisée pour répondre avec le message Hello John!
.
4. Routes avec paramètres
Les routes avec paramètres sont utilisées pour capturer des valeurs dynamiques dans l'URL.
Par exemple, /users/1
peut être utilisé pour récupérer les informations sur l'utilisateur avec l'ID 1
.
Pour déclarer des paramètres dans une route, nous utilisons le caractère :
.
Par exemple, si nous voulons capturer l'ID de l'ustilisateur, nous pouvons déclarer la route /users/:id
.
Le paramètre est utilisé dans la fonction de routage en utilisant req.params.id
.
Dans cet exemple, la route /articles/:id
est déclarée.
Lorsque l'utilisateur accède à cette URL, la fonction est exécutée et la réponse envoyée est Article ID est : [id]
où [id]
est la valeur de l'ID.
app.get('/articles/:id', function(req, res) {
//Récuperer le paramètre dans l'url
const id = req.params.id
res.send('Article ID est : ' + id);
});

Exemple d'une route qui utilise deux paramètres
app.get('/users/:id/books/:bookId', function(req, res) {
res.send('User ID is ' + req.params.id + ' and Book ID is ' + req.params.bookID);
});

Exemple: API CRUD Simple
Pour l'exemple, nous allons implémenter un API CRUD Simple permettant d'ajouter, de récuperer, de modifier et de supprimer des tâches depuis une liste stocker dans un variable:
const tasks = ["Aller manger.", "Aller étudier.", "Aller dormir"]
1. Ajouter une taches
Pour ajouter une tâche le client doit envoyer une requête POST
sur la route /tasks
en fournissant les données dans le query.
// Ajouter une tache à la liste
app.post("/tasks", (req, res) => {
// Aficher les informations de la requête dans la console
console.log(`[${new Date().toISOString()}] ${req.method} ${req.url}`);
// Recupérer la tache dans le query de la requête
const newTask = req.query.task;
// Vérifier que le query task a été fournit
if (!newTask) return res.status(400).json({ message: "query task required" });
// Ajouter la tache dans la liste
tasks.push(newTask);
//Repondre en JSON avec un objet contenant la liste de taches
return res.status(200).json({ tasks });
});
Par exemple, vous pouvez envoyer une requête sur l'url:
/tasks?task=Une nouvelle tache
, pour ajouter une nouvelle tâche à la liste:

Si vous envoyer une requête sur l'url /tasks?task=
ou /tasks
, vous recevez un message d'erreur:

2. Récuperer toutes taches
Pour récuperer toutes les tâches, le client doit envoyer une requête GET
sur la route /tasks
:
// Récuperer toutes les tâches
app.get('/tasks', (req, res)=>{
// Aficher les informations de la requête dans la console
console.log(`[${new Date().toISOString()}] ${req.method} ${req.url}`);
// Envoyer une reponse en JSON contenant la liste de taches
return res.status(200).json({ tasks });
})
Par exemple, vous pouvez envoyer une requête GET
sur l'url: /tasks
pour récuperer toutes les tâches:

3. Mettre à jour une tache
Pour mettre à jour une tâche, le client doit envoyer une requête PUT
sur la route /tasks/:id
:
// Modifier une tache
app.put("/tasks/:id", (req, res) => {
// Aficher les informations de la requête dans la console
console.log(`[${new Date().toISOString()}] ${req.method} ${req.url}`);
// Récuperer et convertir l'id dans les paramètre de la requête
const id = Number(req.params.id);
// Vérifier que l'id fournit est bien un nombre sinon reponse 400
if (isNaN(id)) return res.status(400).json({ message: "Identifiant invalide" });
// Vérifier que l'id est trouvable sinon reponse 404
if (!tasks[id]) return res.status(404).json({ message: "Tache introuvable" });
// Récuperer la nouvelle tache
const updatedTask = req.query.task;
// Vérifier que l'id fournit est bien un nombre sinon reponse 400
if (!updatedTask) return res.status(400).json({ message: "query task required" });
// Mettre a jour la tache dans la liste
tasks[id] = updatedTask;
//Envoyé une réponse en JSON avec la liste de tâche mise à jour
return res.status(200).json({ tasks });
});
Par exemple, vous pouvez envoyer une requête sur l'url:
/tasks/3?task=La tâche est modifiée
pour mettre à jour la tâche a la position 3
.

Si vous envoyer une requête sur l'url: /tasks/invalide?task=La tâche est modifiée
, vous receverez un message d'erreur dans la réponse:

Si vous envoyer une reuqête sur l'url: /tasks/111111?task=La tâche est modifiée
, vous receverez un message d'erreur dans la réponse:

Et enfin, si vous envoyer une reuqête sur l'url: /tasks/3
, sans fournir le query task
, vous receverez un message d'erreur dans la réponse:

4. Supprimer une tache
Pour supprimer une tâche, le client doit envoyer une requête DELETE
sur la route /tasks/:id
:
// Supprimer une tache
app.delete('/tasks/:id', (req, res)=>{
// Aficher les informations de la requête dans la console
console.log(`[${new Date().toISOString()}] ${req.method} ${req.url}`);
// Récuperer et convertir l'id dans les paramètre de la requête
const id = Number(req.params.id);
// Vérifier que l'id fournit est bien un nombre sinon reponse 400
if(isNaN(id)) return res.status(400).json({message: "Identifiant invalide"});
// Vérifier que l'id est trouvable sinon reponse 404
if(!tasks[id]) return res.status(404).json({message: "Tache introuvable"})
// Mettre a jour la tache dans la liste
tasks.splice(id, 1);
//Envoyé une réponse en JSON avec la nouvelle tache
return res.status(200).json({ tasks })
})
Par exemple, vous pouvez envoyer une requête DELETE
sur l'url: /tasks/2
pour supprimer la tâche à la position 2
:

Si vous envoyer une requête DELETE
sur l'url: /tasks/invalide
, vous receverez un message d'erreur dans la réponse:

Si vous envoyer une requête DELETE
sur l'url: /tasks/111111
, vous receverez un message d'erreur dans la réponse:

Conclusion
Dans ce chapitre, nous avons appris à créer des routes avec ExpressJS.
La création de routes est une partie essentielle de toute application web, et ExpressJS fournit une manière simple et efficace de les créer des routes et de gérer les données des requêtes et réponses.
Avec ces connaissances, vous êtes prêt à créer des applications web plus avancées avec ExpressJS.
Dans le prochain chapitre nous allons nous interesser aux middlewares. Une des fonctionnalités les plus importantes de la libraire.
Aller plus loin
Commentaires

Express.js: Initiation
Au cours de ce programme, vous allez apprendre les concepts clés d'ExpressJS.
Vous allez découvrir comment installer et configurer une application ExpressJS, créer des routes, gérer les templates, et assurer la sécurité de votre application avec l'authentification.
Javascript
NodeJS
ExpressJS
Serveurs
HTTP
Back-End

1/ Expres.js: Introduction
Dans ce chapitre, nous allons découvrir ce qu'est ExpressJS, explorer les fonctionnalités clés d'ExpressJS et comprendre pourquoi il est si largement utilisé dans le développement web.
Nous allons aussi installer et configurer un projet basique avec ExpressJS.
Javascript
NodeJS
ExpressJS
Serveurs
HTTP
Back-End