Fermer

avril 6, 2020

Créez de nouvelles applications Express.js en quelques minutes avec Express Generator –11 minutes de lecture

ES6 en action: let et const


Express.js est un framework web Node.js qui a acquis une immense popularité en raison de sa simplicité. Il a un routage facile à utiliser et une prise en charge simple des moteurs de vue, ce qui le place loin devant le serveur HTTP Node de base.

Cependant, le démarrage d'une nouvelle application Express nécessite une certaine quantité de code passe-partout: démarrage d'une nouvelle instance de serveur, configuration d'un moteur de vue et configuration de la gestion des erreurs.

Bien qu'il existe différents projets de démarrage et passe-partout disponibles, Express dispose de son propre outil en ligne de commande qui facilite le démarrage de nouvelles applications, appelé express-generator [

Qu'est-ce qu'Express?

Express a beaucoup de fonctionnalités intégrées et beaucoup plus de fonctionnalités que vous pouvez obtenir à partir d'autres packages qui s'intègrent de manière transparente, mais il y a trois choses principales qu'il fait pour vous en dehors de la boîte:

  1. Routage . C'est ainsi que / home / blog et / about vous donnent tous des pages différentes. Express vous permet de modulariser facilement ce code en vous permettant de placer différentes routes dans différents fichiers.
  2. Middleware . Si vous êtes nouveau dans le terme, le middleware est essentiellement de la «colle logicielle». Il accède aux demandes avant que vos itinéraires ne les obtiennent, ce qui leur permet de gérer des choses difficiles à faire comme l'analyse des cookies, les téléchargements de fichiers, les erreurs, etc.
  3. Vues . Les vues sont la façon dont les pages HTML sont rendues avec un contenu personnalisé. Vous transmettez les données que vous souhaitez rendre et Express les restituera avec votre moteur de vue donné.

Mise en route

La première chose dont vous aurez besoin est d’installer Node et npm sur votre machine. Pour ce faire, accédez à la page officielle de téléchargement des nœuds et récupérez les binaires appropriés pour votre système, ou utilisez un gestionnaire de versions tel que nvm. Nous couvrons l'installation de Node à l'aide d'un gestionnaire de versions dans notre astuce, " Installer plusieurs versions de Node.js à l'aide de nvm ".

Le démarrage d'un nouveau projet avec le générateur Express est aussi simple que l'exécution de quelques commandes :

 npm install express-generator -g

Ceci installe le générateur Express en tant que package global, vous permettant d'exécuter la commande express dans votre terminal:

 express myapp

Cela crée un nouveau projet Express appelé myapp qui est ensuite placé à l'intérieur du répertoire myapp :

 cd myapp

Si vous n'êtes pas familier avec les commandes de terminal, celle-ci vous place dans le répertoire myapp :

 npm install

Si vous n'êtes pas familier avec npm, c'est le gestionnaire de packages Node.js par défaut . L'exécution de npm install installe toutes les dépendances du projet. Par défaut, le express-generator comprend plusieurs packages couramment utilisés avec un serveur Express.

Options

La CLI du générateur prend une demi-douzaine arguments mais les deux les plus utiles sont les suivants:

  • -v . Cela vous permet de sélectionner un moteur de vue à installer. La valeur par défaut est jade . Bien que cela fonctionne toujours, il est obsolète et vous devez toujours spécifier un moteur alternatif.
  • -c . Par défaut, le générateur crée un fichier CSS très basique pour vous, mais la sélection d'un moteur CSS configurera votre nouvelle application avec le middleware pour compiler l'une des options ci-dessus.

Maintenant que nous avons notre configuration de projet et les dépendances installées , nous pouvons démarrer le nouveau serveur en exécutant ce qui suit:

 npm start

Ensuite, accédez à http: // localhost: 3000 dans votre navigateur.

Structure de l'application

L'application Express générée démarre avec quatre dossiers.

bin [19659022] Le dossier bin contient le fichier exécutable qui démarre votre application. Il démarre le serveur (sur le port 3000, si aucune alternative n'est fournie) et configure une gestion des erreurs de base. Vous n'avez pas vraiment à vous soucier de ce fichier, car npm start l'exécutera pour vous.

public

Le dossier public est l'un des les plus importants: tout dans ce dossier est accessible aux personnes se connectant à votre application. Dans ce dossier, vous placerez JavaScript, CSS, des images et d'autres ressources dont les utilisateurs auront besoin lorsqu'ils chargeront votre site Web.

routes

Le dossier routes est l'endroit où vous allez mettez vos fichiers de routeur. Le générateur crée deux fichiers, index.js et users.js qui servent d'exemples sur la façon de séparer la configuration de l'itinéraire de votre application.

Habituellement, vous aurez un fichier différent ici pour chaque itinéraire principal sur votre site Web. Vous pouvez donc avoir des fichiers appelés blog.js home.js et / ou about.js dans ce dossier.

vues [19659022] Le dossier vues est l'endroit où vous avez les fichiers utilisés par votre moteur de création de modèles. Le générateur configurera Express pour rechercher ici une vue correspondante lorsque vous appelez la méthode de rendu .

En dehors de ces dossiers, il y a un fichier que vous devez bien connaître.

app.js

Le fichier app.js est spécial, car il configure votre application Express et colle toutes les différentes parties ensemble. Voyons ce qu'il fait. Voici comment le fichier démarre:

 var createError = require ('http-errors');
var express = require ('express');
var path = require ('path');
var cookieParser = require ('cookie-parser');
var logger = require ('morgan');

Ces six premières lignes du fichier sont obligatoires. Si vous débutez avec Node, assurez-vous de lire « Comprendre module.exports et exports dans Node.js ».

 var indexRouter = require ('./ routes / index');
var usersRouter = require ('./ routes / users');

Les deux lignes de code suivantes nécessitent les différents fichiers de route que le générateur Express configure par défaut: routes et utilisateurs .

 var app = express ();

Après cela, nous créons une nouvelle application en appelant express () . La variable d'application contient tous les paramètres et itinéraires pour votre application. Cet objet colle votre application.

 app.set ('views', path.join (__ dirname, 'views'));
app.set («moteur de vue», «jade»);

Une fois l'instance d'application créée, le moteur de modèle est configuré pour le rendu des vues. C'est ici que vous modifierez le chemin d'accès à vos fichiers de vue si nécessaire.

Après cela, vous verrez Express être configuré pour utiliser le middleware. Le générateur installe plusieurs middleware courants que vous êtes susceptible d’utiliser dans une application Web:

 app.use (logger ('dev'));
app.use (express.json ());
app.use (express.urlencoded ({extended: false}));
app.use (cookieParser ());
app.use (express.static (path.join (__ dirname, 'public')));
  • enregistreur . Lorsque vous exécutez votre application, vous remarquerez peut-être que tous les itinéraires demandés sont enregistrés dans la console. Si vous souhaitez désactiver cela, vous pouvez simplement commenter ce middleware.
  • express.json . Vous remarquerez peut-être qu'il existe deux lignes pour analyser le corps des requêtes HTTP entrantes. La première ligne gère l'envoi de JSON via une requête POST et place ces données dans request.body .
  • express.urlencoded . La deuxième ligne analyse les données de la chaîne de requête dans l'URL (par exemple / profile? Id = 5 ) et les place dans request.query .
  • cookieParser . Cela prend tous les cookies que le client envoie et les place dans request.cookies . Il vous permet également de les modifier avant de les renvoyer au client, en changeant response.cookies .
  • express.static . Ce middleware sert les ressources statiques de votre dossier public . Si vous souhaitez renommer ou déplacer le dossier public, vous pouvez modifier le chemin ici.

Ensuite, le routage:

 app.use ('/', indexRouter);
app.use ('/ users', usersRouter);

Ici, les exemples de fichiers de route requis étaient joints à notre application. Si vous devez ajouter des itinéraires supplémentaires, vous devez le faire ici.

Tout le code suivant est utilisé pour la gestion des erreurs. En règle générale, vous n'aurez pas à modifier ce code, sauf si vous souhaitez modifier la façon dont Express traite les erreurs. Par défaut, il est configuré pour afficher l'erreur qui s'est produite sur l'itinéraire lorsque vous êtes en mode développement.

Démarrage d'un nouveau projet

Appliquons ce que nous avons appris jusqu'à présent pour démarrer un Express de base. Application js.

En supposant que vous avez déjà installé express-generator en tant que module global, exécutez la commande suivante pour créer un nouveau projet squelette:

 express -v hbs signup-form

Comme je l'ai mentionné plus tôt, c'est une bonne idée d'opter pour autre chose que la bibliothèque de modèles par défaut (Jade). Ici, je suis allé avec Handlebars.js car je trouve la syntaxe semblable à la moustache facile à lire et à travailler.

Une fois le générateur exécuté, basculez dans le dossier nouvellement créé et installez les dépendances :

 formulaire d'inscription au cd
npm i

À ce stade, vous pouvez remarquer plusieurs avertissements concernant les vulnérabilités des packages. Mettons à jour la version de Handlebars.js pour y remédier:

 npm install hbs@4.1.0

Maintenant que les dépendances du projet sont installées et mises à jour, personnalisons certains des modèles de vues standard.

Le générateur crée un modèle de présentation qui est utilisé pour restituer tout le balisage partagé entre les vues. Ouvrez views / layout.hbs et remplacez le contenu par ce qui suit:





  
  
  
  

   {{title}} 

  
  

  
  



   {{{body}}}%MINIFYHTML7fa7479045f0158046fb0313af533b9b14%


Le balisage ici est adapté d'un exemple montré sur le site Web Bootstrap . Nous devons également ajouter des styles personnalisés. Ouvrez donc public / stylesheets / style.css et collez ce qui suit:

 html,
corps {
  hauteur: 100%;
}

corps {
  affichage: -ms-flexbox;
  affichage: flex;
  -ms-flex-align: centre;
  align-items: centre;
  rembourrage-dessus: 40px;
  rembourrage-bas: 40px;
  couleur de fond: # f5f5f5;
}

.pleine largeur {
  largeur: 100%;
  rembourrage: 15px;
  marge: auto;
}

.form-signin {
  largeur max: 330px;
}
.form-signin .checkbox {
  poids de la police: 400;
}
.form-signin .form-control {
  position: relative;
  dimensionnement de la boîte: border-box;
  hauteur: auto;
  rembourrage: 10px;
  taille de police: 16px;
}
.form-signin .form-control: focus {
  indice z: 2;
}
entrée .form-signin {
  border-radius: 0;
  marge en bas: -1px;
}
Entrée .form-signin: première du type {
  border-top-left-radius: 0,25rem;
  border-top-right-radius: 0,25rem;
}
Entrée .form-signin: dernier de type {
  frontière-bas-gauche-rayon: 0,25rem;
  rayon en bas à droite: 0,25rem;
  marge en bas: 10 px;
}

Maintenant que nous avons personnalisé la mise en page, ajoutons le balisage de la page d'accueil. Ouvrez views / index.hbs et remplacez le contenu par ce qui suit:


Cela affichera un formulaire d'inscription à la newsletter sur notre page d'accueil.

Ajoutons un itinéraire vers lequel notre formulaire peut être soumis, où nous pouvons accéder aux données du formulaire et faire quelque chose avec. Ouvrez le fichier routes / index.js et ajoutez la route suivante sous la route de la page d'accueil:

 router.post ("/ subscribe", fonction (req, res, next) {
  const {nom, email} = req.body;

  // 1. Validez les données utilisateur
  // 2. Inscrire l'utilisateur à la liste de diffusion
  // 3. Envoyez un e-mail de confirmation

  res.render ("souscrit", {
    titre: "Vous êtes abonné",
    Nom,
    email
  });
});

Dans le gestionnaire d'itinéraire, nous avons extrait les données de formulaire de l'objet de demande. Après avoir traité l'inscription (affichée sous forme de pseudo-code), nous transmettons les données à notre vue abonnée .

Remarque: si vous souhaitez en savoir plus sur l'utilisation des formulaires dans Node, lisez " Formulaires, téléchargements de fichiers et sécurité avec Node.js et Express ".

Créons cela maintenant, en ouvrant un nouveau fichier, views / subscribed.hbs et en ajoutant le balisage suivant:

Merci, {{name}}!

Veuillez vérifier votre courriel pour confirmer votre abonnement à notre newsletter.


Vous rencontrez des problèmes? Contactez-nous

Continuez vers la page d'accueil   

Pour essayer notre nouveau site, lancez-le en exécutant npm run start dans le dossier du projet et visitez http: // localhost: 3000 .

Et voici la démo exécutée sur CodeSandbox.

J'espère que vous avez maintenant une idée claire de la façon dont l'outil générateur express peut vous faire gagner du temps lors de l'écriture de passe-partout répétitifs lors du démarrage de nouveaux projets basés sur Express. middleware, le générateur crée une base solide pour de nouvelles applications avec seulement quelques commandes.



Source link

0 Partages