Routage avec Express.js

Les routes dynamiques

On a vue qu'on pouvait ajouter des paramètres à l'url en utilisant le caractère ? suivi du nom du paramète et de sa valeur.

http://localhost:3000/professeurs?code=1

On peut aussi ajouter la valeur du paramètre directement dans l'url sans le nommer, c'est ce qu'on appelle une route dynamique.

http://localhost:3000/professeurs/1

Dans cet exemple on pourra récupérer la valeur 1 dans l'url comme étant un paramètre. Les deux méthodes se valent bien que je trouve celle-ci plus "propre" quand la situation le permet.

Dans le code, quand on déclare la route on va ajouter le nom du paramètre précédé du caractère :. Ensuite le paramètre sera stocké dans l'objet req.params et portera le nom défini dans la route.

index.js

app.get('/professeurs/:code', (req, res) => {
    const code = req.params.code;
    res.send(`Vous avez demandé le professeur avec le code ${code}`);
});

Si on veut utiliser deux paramètres de cette façon, on doit les séparer par un /.

http://localhost:3000/professeurs/1/mathieu

index.js

app.get('/professeurs/:code/:nom', (req, res) => {
    const params = req.params;
    res.send(`Vous avez demandé le professeur avec le code ${params.code} et le nom ${params.nom}`);
});

Danger

Faites attention à l'ordre des routes dynamiques si la syntaxe de plusieurs routes se ressemble.

Par exemple j'ai ces deux routes qui fonctionnent correctement

script.js

app.get('/professeurs/tous', (req, res) => {
    const code = req.params.code;
    res.send(`Vous avez demandé tous les professeurs.`);
});

app.get('/professeurs/:code', (req, res) => {
    const code = req.params.code;
    res.send(`Vous avez demandé le professeur avec le code ${code}`);
});

Par contre si j'inverse les routes et que la première est la route avec le paramètre code, on ne pourra jamais accéder à la route /professeurs/tous car "tous" sera considérer comme une valeur donnée au paramètre :code.

Le routage

Le module Router permet de regrouper plusieurs routes similaire. C'est une très bonne pratique pour maintenir un code clair et consistant qu'on pourra faire évoluer facilement.

Reprenons l'exemple de mes deux routes professeurs plus haut. On doit premièrement créer un fichier qui va contenir toutes ces routes similaires. Ensuite dans ce fichier on importe le module Express et crée un objet Router. Au lieu de définir les routes avec app on va utiliser l'objet Router qu'on vient de créer. Finalement à la fin du fichier on va exporter le module pour pouvoir l'utiliser dans notre fichier index.js

// Nous avons besoin d'importer le module express pour utiliser le Router
import express from 'express';
// Nous créons un objet router qui va nous permettre de gérer les routes
const router = express.Router();    

// On utilise router au lieu de app
router.get('/tous', (req, res) => {
    res.send(`Vous avez demandé tous les professeurs.`);
});

router.get('/:code', (req, res) => {
    const code = req.params.code;
    res.send(`Vous avez demandé le professeur avec le code ${code}`);
});

// On exporte le router pour pouvoir l'utiliser dans index.js
export default router;

Vous avez remarqué que j'ai enlevé /professeurs de mes routes? On va gérer cette partie de la route dans le fichier index.js. La seule modification qu'on va faire à ce fichier est d'ajouter ces deux lignes dans la section où l'on ajoute les intergiciels.

// Importer le module express
import express from 'express';
// Importer le fichier de router du fichier professeurs.route
import professeursRouter from './professeurs.route.js';

// Créer une application express
const app = express();
const PORT = process.env.PORT || 3000;

// On associe la route /api/professeurs au router importé
app.use('/api/professeurs', professeursRouter);

app.get('/', (req, res) => {
    res.send("<h1>Mon premier serveur web sur express !</h1>");
});

app.listen(PORT, () => {
    console.log(`Serveur démarré sur le port ${PORT}`);
});

Toutes les routes qui débute par /api/professeurs seront dirigées vers le fichier ./professeurs.route.js (L'ajout de api dans la route est purement esthétique). Donc maintenant quand le serveur recevra par exemple la route /api/professeurs/tous il va diriger la requète dans le fichier professeurs.route.js pour trouver quoi faire avec la route /tous.

Avec Router on peut organiser notre projet de plusieurs façon. Nous verrons plus tard des exemples de bonnes structures à adopter pour nos api.

Manuel

Router - ExpressJS