Routage vraiment basique dans Node.js avec Express

Le but de cette histoire est d'expliquer brièvement le fonctionnement du routage dans Express tout en créant une application Node simple - très simple.

Nous utiliserons également EJS, un moteur de modèle qui «vous permet de générer du balisage HTML avec du JavaScript brut», selon leur site Web. Fondamentalement, cela nous permettra de créer des pages HTML qui peuvent varier en fonction de la demande du client. Nous n'utiliserons pas cette dernière fonctionnalité, mais c'est une excellente. À la fin de cet article, vous trouverez des ressources pour en savoir plus.

Qu'est-ce que le routage? (En lignes 2-ish)

Tout d'abord, jetons un coup d'œil rapide (très rapide) à ce qu'est le routage:

somewebsite.com/someroute

Il s'agit essentiellement de transporter l'utilisateur (ou certaines données) d'un endroit à un autre. Cet endroit est la route. Je vous ai dit que j'allais faire vite.

Création du projet

Nous allons créer un site Web sophistiqué pour apprendre comment fonctionne le routage dans Express. Vérifiez-le:

Cool, non? Mais c'est tout ce dont nous avons besoin pour le moment.

Commençons par créer le projet et installer les packages. Exécutez simplement ce qui suit dans la ligne de commande:

npm installer expressnpm installer ejs

Vous pouvez en plus ajouter le dash dash save (j'écris - comme " dash" car Medium le formate automatiquement, et cela n'a pas l'air bien dans ce but) pour l'enregistrer dans votre fichier package.json . Mais comment cela fonctionne est une histoire pour un autre jour.

Ensuite, nous aurons besoin d'Express et définirons le moteur de vue sur EJS dans notre fichier app.js comme suit:

var express = require('express');var app = express();app.set('view engine', 'ejs');

Nous inclurons également la ligne suivante afin que notre application écoute les demandes:

app.listen(3000);

Gérer les requêtes GET

Félicitations, tout est prêt pour traiter les demandes! Il existe plusieurs types de requêtes dans HTTP, mais nous ne traiterons que les requêtes GET, qui sont utilisées pour récupérer les données du serveur. Pour gérer ce type de demande dans Express, nous utilisons la méthode suivante:

app.get('/about', function(req, res) { res.render('about');});

Jetons un coup d'œil à ce qui se passe ici. Nous disons à notre serveur que, chaque fois que quelqu'un tape dans somewebsite.com/about , nous voulons déclencher une fonction. Cette fonction prend deux paramètres, req (demande) et res (réponse). En utilisant l'objet de réponse, nous rendons la page à propos .

Pour que cela fonctionne, nous devrons créer une page nommée about.ejs en HTML. Nous le placerons également dans un dossier appelé views à l' intérieur de notre dossier de projet. Il s'agit du dossier dans lequel Express recherchera le rendu de la vue. Voici la page à propos du méga-complexe que nous utiliserons pour cet exemple:

Agréable! Mais que se passe-t-il si l'utilisateur ne saisit aucune route? Tout comme nous le faisons la plupart du temps, somewebsite.com ? Eh bien, vraiment facile. Changez / about en juste /, et affichez la page que vous aimez:

app.get('/', function(req, res) { res.render('home');});

Gestion des routes inexistantes

Mais que se passe-t-il si quelqu'un tape un itinéraire qui n'existe pas? Nous ne voulons probablement pas qu'une page d'erreur par défaut s'affiche. Au lieu de cela, nous voulons une page d'erreur personnalisée et cool.

Eh bien, la bonne nouvelle est qu'il est extrêmement facile d'en créer un avec Express. Remplacez simplement le paramètre route dans la méthode get par un astérisque et affichez votre propre page d'erreur comme ceci:

app.get('*', function(req, res) { res.render('error');});

Essayer ça!

Enfin, exécutons notre serveur à partir de la ligne de commande (en supposant que le serveur s'appelle app.js )

application de nœud

et voyez si ça marche! Tapons le nom de notre serveur ( localhost , car c'est un serveur local fonctionnant sur notre ordinateur) et le port ( 3000 dans ce cas) dans notre navigateur:

localhost: 3000

Incroyable!

Lectures complémentaires

Vous pouvez apprendre tout ce que vous devez savoir sur le routage dans le guide Express, et il y a aussi beaucoup de choses pratiques sur le site Web d'EJS!

J'espère que cet article vous a été utile. Si c'était le cas, laissez un commentaire et applaudissez!

Bon codage… Ou bon routage, je suppose!