Comment définir les routes et les méthodes de requête HTTP dans Express

Introduction

Cet article examinera comment gérer les routes et les méthodes de requête HTTP dans un projet Express. Les itinéraires gèrent la navigation des utilisateurs vers diverses URL dans votre application. HTTP, abréviation de Hyper Text Transfer Protocol, communique et facilite les données de votre serveur Express au navigateur web.

Vous apprendrez à définir des routes et à utiliser les méthodes de requête HTTP GETPOSTPUT et DELETE pour manipuler les données.

Prérequis

Pour compléter ce tutoriel, une compréhension de Node.js est utile mais pas obligatoire. Si vous souhaitez en savoir plus sur Node.js, consultez la série How To Code in Node.js.

Configuration de votre projet

Comme Express est un framework Node.js, assurez-vous d’avoir installé Node.js depuis Node.js avant de suivre les étapes suivantes. Exécutez ce qui suit dans votre terminal :

Créer un nouveau répertoire nommé node-express-routing pour votre projet :

mkdir node-express-routing

S’installer dans le nouveau répertoire :

cd node-express-routing

Initialiser un nouveau projet Node avec les valeurs par défaut. Celui-ci inclura votre package.json fichier pour accéder à vos dépendances :

npm init -y

Créer votre fichier d’entrée, index.js. C’est là que vous gérerez vos routes et vos méthodes de requête HTTP:

touch index.js

Installer à la fois Express et nodemon comme dépendances. Vous utiliserez nodemon pour redémarrer continuellement votre projet Express chaque fois que le fichier index.js est modifié.

 
npm install express --save
 
npm install -D nodemon
 

Ouvrez votre fichier package.json avec votre éditeur de texte préféré et mettez à jour votre start script pour inclure nodemon et votre index.js fichier :

Ceci vous permettra d’utiliser la commande npm start dans votre terminal pour lancer votre serveur Express et mettre à jour les changements.

Maintenant que vous avez mis en place votre projet et configuré nodemon pour qu’il s’actualise lorsqu’il détecte des changements dans votre index.js fichier, vous êtes prêt à lancer votre serveur Express.

Démarrer votre serveur Express

Votre serveur Express est l’endroit où vous allez gérer la logique pour intégrer vos routes et vos méthodes de requête HTTP. Vous allez configurer et exécuter votre serveur pour visualiser votre projet dans le navigateur.

Pour démarrer votre serveur Express, exigez Express dans votre fichier index.js et stockez une instance dans la variable app. Ensuite, déclarez une variable PORT et spécifiez l’adresse :3000.

Puis, ajoutez .listen()app et insérez PORT comme premier argument, puis une fonction de rappel. Le middleware Express .listen() crée un navigateur local à partir de l’adresse de votre PORT variable pour visualiser vos modifications.

Aussi, incluez express.json() comme argument de app.use(). Cela permet d’analyser les données entrantes par le biais de vos requêtes HTTP. Une version antérieure s’appuyait sur la dépendance body-parser, mais depuis, Express a inclus un middleware intégré pour l’analyse des données.

Exécutez la commande suivante dans votre terminal pour démarrer le projet :

npm start

Votre projet est chargé sur . Naviguez dans votre navigateur, et remarquez ce qui suit :

C’est le début d’une instance Express en cours d’exécution. Travaillons à la définition des méthodes HTTP pour peupler votre navigateur.

Définir votre méthode de requête HTTP GET

Afin de visualiser votre projet, vous pouvez envoyer des informations depuis votre serveur Express par le biais d’une GET requête, une méthode HTTP.

Dans index.js, ajoutez .get() à votre variable app, spécifiez une route anonyme, et incluez un callback qui accède aux arguments request et response :

 app.get('/', (request, response) => { response.send('Hello');});

L’argument request contient des informations sur la requête GET, tandis que response.send() dispatche les données vers le navigateur. Les données au sein de response.send() peuvent être une chaîne, un objet ou un tableau.

Maintenant que vous avez mis en œuvre une requête GET, examinons les routes et les autres méthodes HTTP.

Comprendre les routes

Si vous naviguez vers , vous recevrez tous les comptes dans votre tableau:

Output

Vous êtes également en mesure de filtrer les ID de compte en utilisant le point de terminaison /:id. Express considère l’ID dans le point de terminaison /:id comme un espace réservé pour un paramètre utilisateur, et correspond à cette valeur.

Une fois que vous naviguez vers , vous obtenez un compte qui correspond au paramètre /:id :

Output
{ "id": 3, "username": "sarahjane", "role": "guest"}

Conception des méthodes de requête HTTP POST, PUT et DELETE

Les méthodes HTTP fournissent des fonctionnalités supplémentaires à vos données en utilisant les requêtes POSTPUT et DELETE. La méthode de requête POST crée de nouvelles données dans votre serveur, tandis que PUT met à jour les informations existantes. La méthode de requête DELETE supprime les données spécifiées.

POST

Pour créer de nouvelles données dans le tableau accounts, vous pouvez intégrer une méthode de requête POST.

Dans index.js, ajoutez .post() à votre variable app, et incluez la route'/accounts' comme premier argument:

Vous pousserez toute donnée entrante de votre requête POST dans le tableau accounts et enverrez la réponse sous forme d’objet JSON.

Votre tableau accounts contient maintenant un nouvel utilisateur :

PUT

Vous pouvez modifier et mettre à jour un compte particulier par le biais d’une requête PUT.

Dans index.js, ajoutez .put() à votre variable app et incluez la route '/accounts/:id' comme premier argument. Vous trouverez l’ID du compte saisi, et définirez une conditionnelle pour mettre à jour avec les nouvelles données :

Vous êtes maintenant capable de mettre à jour les données dans le tableau accounts. Si un utilisateur modifie son "role" :

{ "role": "guest"}

Vous remarquerez que "role" se met à jour en guest depuis admin. dans

Output
{ "id": 1, "username": "paulhal", "role": "guest"}

DELETE

Vous pouvez supprimer des utilisateurs et des données en utilisant la méthode de requête DELETE.

Dans index.js, ajoutez .delete() à votre variable app, et incluez '/accounts/:id' comme premier argument. Vous allez filtrer le tableau accounts et renvoyer le compte à supprimer.

Si vous envoyez une requête DELETE, cela supprimera le compte avec la /:id de 1 du tableau accounts.

Conclusion

La spécification des routes et l’utilisation des méthodes de requête HTTP aident à générer des performances supplémentaires lors de la création, la mise à jour et la suppression d’utilisateurs et de données dans votre serveur Express.