Share
Express est un framework Web populaire Node.js. Parmi ses fonctionnalités, il fournit un wrapper pour le routage. Le routeur express facilite la création de gestionnaires d’itinéraires. Dans ce tutoriel, vous apprendrez à utiliser Express Router..
Commençons.
Créez un nouveau répertoire pour votre application. Exécutez la commande pour initialiser npm dans le répertoire que vous venez de créer..
npm init -y
La seule dépendance dont vous aurez besoin est exprès, alors installez-la.
npm install --save express
A la fin, votre fichier package.json devrait ressembler à ceci.
# package.json "nom": "routeur express", "version": "1.0.0", "description": "", "main": "index.js", "scripts": "test" : "echo \" Erreur: aucun test spécifié \ "&& exit 1", "keywords": [], "author": "", "licence": "ISC", "dépendances": "express": " ^ 4.16.2 "
Créez maintenant un nouveau fichier appelé index.js, qui sera votre fichier d’entrée comme indiqué dans votre package.json.
Pour l'instant, vous avez juste besoin d'une configuration de base comme celle-ci:
Accentsconagua
# index.js const express = require ('express') const app = express () app.listen (3000, () => console.log ('Le serveur fonctionne sur le port 3000'))Commencez par créer quelques itinéraires de base comme ci-dessous.
# index.js… const router = express.Router () // 1 router.get ('/', (req, res) => // 2 res.send ('Ceci est la page d'accueil!')) routeur .post ('/ contact', (req, res) => // 3 res.send ('Ceci est la page de contact avec une demande POST')) app.use ('/', routeur) // 4 … '/'. Si vous ne parvenez pas à monter un chemin sur ce middleware, il sera exécuté pour chaque requête adressée à l'application..Disons que vous aviez le code ci-dessous à la place.
app.use ('/ user', routeur)Cela correspondra à tout ce qui suit: /profil de l'utilisateur, utilisateur / profil / modifier, utilisateur / tableau de bord / article / vue, etc.
Dans le code ci-dessus, vous avez associé une méthode de routage à une instance d'Express Router. La méthode route est dérivée d'une des méthodes HTTP et est attachée à l'instance de l'Express Router comme vous l'avez fait..
Express prend en charge les méthodes de routage suivantes correspondant aux méthodes HTTP: obtenir, poster, mettre, tête, effacer, options, trace, copie, fermer à clé, mkcol, bouge toi, purge, ouvrir, rapport, activité, check-out, fusionner, m-recherche, notifier, souscrire, Se désabonner, pièce, et chercher.
Il y a une méthode de routage épouvanter() qui n'est dérivé d'aucune méthode HTTP. Cette méthode de routage est chargée pour les fonctions sur un chemin spécifié pour toutes les méthodes de requête.
Disons que vous avez le code ci-dessous dans votre application.
app.all ('/ books', (req, res) => res.send ('Ceci accède à la section du livre'))Ceci sera exécuté pour les requêtes sur "/ books" lorsque vous utilisez GET, POST, PUT ou toute autre méthode de requête HTTP.
Un chemin de route est utilisé pour définir un point de terminaison où des demandes peuvent être effectuées. C'est le cas avec la combinaison d'une méthode de requête. Dans Express, les chemins de routage peuvent être des modèles de chaîne ou des expressions régulières..
Voici des exemples que vous pouvez ajouter à votre index.js fichier.
# index.js router.get ('/ about', (req, res) => res.send ('Ce chemin d'itinéraire correspond à / about')) router.get ('/ profile.txt', ( req, res) => res.send ('Cette route correspondra à /profile.txt'))Voyons un chemin de route en utilisant des modèles de chaîne.
router.get ('/ ab + xy', (req, res) => // 1 res.send ('ab + xy')) router.get ('/ ab (xy)? z', (req , res) => // 2 res.send ('/ ab (xy)? z'))Ceux-ci sont utilisés pour capturer les valeurs spécifiées à une certaine position dans l'URL. Ils s'appellent des segments d'URL. Les valeurs saisies sont mises à disposition dans le req.params objet, en utilisant le nom du paramètre de route spécifié dans le chemin comme clé des valeurs.
Voici un exemple.
Si vous avez un chemin similaire à celui-ci dans votre application: / users /: userId / articles /:articleId
L’URL demandée se présentera ainsi: http: // localhost: 3000 / users / 19 / articles / 104
Dans les req.params, les éléments suivants seront disponibles: "userId": "19", "bookId": "104"
Allez-y et créez un nouvel itinéraire dans votre application, en utilisant le chemin ci-dessus..
router.get ('/ users /: userId / articles /: articleId', (req, res) => res.send (req.params))Démarrez votre serveur et pointez votre navigateur sur http: // localhost: 3000 / users / 19 / articles / 104. Vous verrez le req.params objet affiché dans votre navigateur.
Le nom des paramètres de route doit être composé de mots. ([A-Za-z0-9_]).
Allons plus loin!
Disons que vous voulez avoir un chemin de route appelé / utilisateurs /: nom, où le nom de l'utilisateur est passé dans l'URL et l'application affiche le nom avec une chaîne. Comment pensez-vous que cela peut être réalisé?
Allez-y et essayez par vous-même d'abord.
Voici à quoi devrait ressembler la route.
router.get ('/ utilisateurs /: nom', (req, res) => res.send ('Bienvenue, $ req.params.name!'))Lorsque vous visitez http: // localhost: 3000 / users / vivian, vous devriez voir Bienvenue, vivian! affiché dans le navigateur.
Voyons comment créer un itinéraire de connexion dans Express. Vos routes de connexion nécessitent deux actions sur un seul chemin. Les actions seront différenciées par la méthode de route utilisée. Voici à quoi ça va ressembler.
router.get ('/ login', (req, res) => res.send ('Ceci devrait conduire au formulaire de connexion')) router.post ('/ login', (req, res) => res.send ('Ceci est utilisé dans le traitement du formulaire'))Cela fait, votre fiche de magasin devrait avoir une action dont la valeur est la route définie avec la méthode HTTP POST. Voici à quoi cela devrait ressembler.
Lorsque le bouton d'envoi du formulaire est cliqué, le routeur spécifié est appelé. Comme indiqué ci-dessus, la différence entre les deux chemins de route est le HTTP POST. C’est ainsi que l’application détermine qui est responsable de la gestion des données transmises via le formulaire..
Un autre aspect où cela peut être expérimenté concerne la modification et la mise à jour des ressources..
app.route () peut être utilisé pour créer une chaîne de gestionnaires de route pour un chemin de route spécifique.
En utilisant l'exemple de la route de connexion, voici comment vous allez utiliser app.route ().
app.route ('/ login') .get ((res, req) => res.send ('Ceci devrait conduire au formulaire de connexion')) .post ((res, req) => res. send ('Ceci est utilisé dans le traitement du formulaire'))Vous pouvez ajouter plus de gestionnaires de routes que nous avons ci-dessus.
À ce stade, vous devez savoir comment fonctionne le routage dans Express. Vous avez appris comment configurer un routage de base et comment utiliser des méthodes et des chemins de route. Vous avez vu comment utiliser les paramètres de route et récupérer les valeurs envoyées via l'URL.
Si vous recherchez des ressources JavaScript supplémentaires à étudier ou à utiliser dans votre travail, consultez ce que nous avons à votre disposition sur Envato Market..
Avec cette connaissance, vous pouvez aller plus loin pour créer une application Express avec un routage complexe..
