Express.js est un framework Web Node.js qui a acquis une immense popularité en raison de sa simplicité. Il a un routage facile et une prise en charge simple du moteur de visualisation, ce qui le rend bien en avance sur le serveur HTTP de base Node.

Cependant, le démarrage d’une nouvelle application Express nécessite une certaine quantité de code standard: démarrage d’une nouvelle instance de serveur, configuration d’un moteur de visualisation et configuration de la gestion des erreurs.

Bien que divers projets de démarrage et passe-partout soient disponibles, Express dispose de son propre outil de ligne de commande qui facilite le lancement de nouvelles applications Générateur express.

Qu’est-ce que l’express?

Express possède de nombreuses fonctionnalités intégrées et de nombreuses autres fonctionnalités que vous pouvez obtenir à partir d’autres packages qui s’intègrent de manière transparente. Cependant, il y a trois choses importantes qui peuvent être faites tout de suite:

  1. Routage. C’est comme /home /blog et /about Tous vous donnent des côtés différents. Express facilite la modularisation de ce code en vous permettant de placer différentes routes dans différents fichiers.
  2. Intergiciel. Si vous êtes nouveau dans le terme, le middleware est essentiellement une «colle logicielle». Il accède aux demandes avant que vos itinéraires ne les obtiennent et leur permet d’effectuer des tâches délicates telles que l’analyse des cookies, le téléchargement de fichiers, les erreurs, etc.
  3. Vues. Les pages HTML avec un contenu personnalisé sont rendues dans les vues. Vous transmettez les données à rendre et Express les rend à l’aide du moteur de visualisation spécifié.

A débuté

La première chose à faire est d’installer Node et npm sur votre ordinateur. Pour ce faire, accédez soit à la page officielle de téléchargement du nœud et accédez aux binaires corrects pour votre système ou utilisez un gestionnaire de version comme nvm. Nous couvrons l’installation de Node à l’aide d’un gestionnaire de versions dans notre astuce rapide: « Installez plusieurs versions de Node.js avec NVM».

Démarrer un nouveau projet avec Express Builder est aussi simple que d’exécuter quelques commandes:

npm install express-generator -g

Cela installera Express Builder en tant que package global afin que vous puissiez l’exécuter express Commande dans votre terminal:

express myapp

Cela créera un nouveau projet express avec le nom myappqui est ensuite placé à l’intérieur du myapp Annuaire:

cd myapp

Si vous n’êtes pas familier avec les commandes de terminal, cette commande vous mènera dans le myapp Annuaire:

npm install

Si vous n’êtes pas familier avec npm, c’est ça Gestionnaire de packages Node.js standard. Courir npm install Installe toutes les dépendances du projet. La valeur par défaut est express-generator Contient plusieurs packages couramment utilisés avec un serveur Express.

Options

Le générateur CLI prend une demi-douzaine Arguments, mais les deux plus utiles sont les suivants:

  • -v . Cela vous permet de choisir un moteur de visualisation à 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éera un fichier CSS très simple pour vous. Cependant, si vous choisissez un moteur CSS, votre nouvelle application sera configurée avec un middleware pour compiler l’une des options ci-dessus.

Maintenant que nous avons configuré notre projet et installé les dépendances, nous pouvons démarrer le nouveau serveur en procédant comme suit:

npm start

Accédez ensuite à http: // localhost: 3000 dans votre navigateur.

Structure de l’application

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

bin

le bin Le dossier contient le fichier exécutable que votre application démarrera. Il démarre le serveur (sur le port 3000 si aucune alternative n’est donnée) et configure la gestion des erreurs de base. Vous n’avez pas vraiment à vous soucier de ce fichier car npm start le fera pour vous.

public

le public Le dossier est l’un des plus importants:tout Ce dossier est l’endroit où les personnes qui se connectent à votre application peuvent accéder. Ce dossier stocke JavaScript, CSS, images et autres éléments dont les utilisateurs auront besoin lors du chargement de votre site Web.

routes

le routes C’est le dossier dans lequel vous placez les fichiers de votre routeur. Le générateur crée deux fichiers, index.js et users.jsservant d’exemples sur la façon de séparer la configuration d’itinéraire de votre application.

Habituellement, vous aurez ici un fichier différent pour chaque itinéraire principal sur votre site Web. Vous avez peut-être consulté des fichiers blog.js, home.jset ou about.js dans ce dossier.

views

le views Ce dossier contient les fichiers utilisés par votre moteur de modèle. Le générateur configure Express de manière à ce qu’une vue appropriée soit recherchée ici lorsque vous l’appelez render Méthode.

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

app.js

le app.js Le fichier est spécial en ce qu’il configure votre application Express et colle toutes les différentes pièces ensemble. Passons en revue ce qu’il fait. Voici comment le fichier commence:

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 êtes nouveau sur Node, assurez-vous de lire « Comprendre les exportations de modules et les exportations vers Node.js».

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

Les deux prochaines lignes de code require les différents fichiers de route que le générateur express met en place par défaut: routes et users.

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 de votre application. Cet objet colle votre application ensemble.

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

Une fois l’instance d’application créée, le moteur de modèle est configuré pour rendre les vues. Si nécessaire, vous pouvez modifier le chemin d’accès à vos fichiers d’affichage ici.

Ensuite, Express est configuré pour utiliser un middleware. Le générateur installe plusieurs composants middleware courants que vous utiliserez probablement 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 pouvez constater 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 constaterez peut-être qu’il existe deux lignes pour analyser le corps des requêtes HTTP entrantes. La première ligne couvre quand envoyer JSON via une requête POST et que les données sont saisies request.body.
  • express.urlencoded. La deuxième ligne analyse les données de la chaîne de requête dans l’URL (ex /profile?id=5) et l’utilise request.query.
  • cookieParser. Cela prend et définit tous les cookies que le client envoie request.cookies. Vous pouvez également le modifier avant de le modifier pour le client response.cookies.
  • express.statique. Ce middleware sert les actifs statiques de votre public Dossier. Si vous souhaitez renommer ou déplacer le dossier public, vous pouvez modifier le chemin ici.

Vient ensuite le routage:

app.use("https://www.sitepoint.com/", indexRouter);
app.use('/users', usersRouter);

Ici, les exemples de fichiers d’itinéraire requis sont joints à notre application. Si vous devez ajouter des itinéraires supplémentaires, faites-le ici.

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

Démarrer un nouveau projet

Appliquons ce que nous avons appris jusqu’à présent pour lancer une application Express.js de base.

En supposant que vous ayez 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é précédemment, opter pour autre chose que la bibliothèque de modèles par défaut (Jade) est une bonne idée. Ici je suis allé avec toi Handlebar.jscar je trouve que la syntaxe de type moustache est facile à lire et à modifier.

Après avoir exécuté le générateur, passez au dossier nouvellement créé et installez les dépendances:

cd signup-form
npm i

À ce stade, vous pouvez voir plusieurs avertissements de vulnérabilité de package. Mettons à jour la version de Handlebars.js pour résoudre ce problème:

npm install [email protected]

Une fois les dépendances du projet installées et mises à jour, nous ajusterons certains des modèles pour la vue standard.

Le générateur crée un modèle de mise en page qui est utilisé pour rendre tout balisage partagé entre les vues. Ouvert views/layout.hbs et remplacez le contenu par ce qui suit:

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>{{title}}</title>

  
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
    integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

  
  <link href="/stylesheets/style.css" rel="stylesheet">
</head>

<body>
  {{{body}}}
</body>

</html>

Le balisage ici est personnalisé par un Exemple montré sur le Site Web Bootstrap. Nous devons également ajouter des styles personnalisés, alors ouvrez public/stylesheets/style.css et collez ce qui suit:

html,
body {
  height: 100%;
}

body {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}

.full-width {
  width: 100%;
  padding: 15px;
  margin: auto;
}

.form-signin {
  max-width: 330px;
}
.form-signin .checkbox {
  font-weight: 400;
}
.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input {
  border-radius: 0;
  margin-bottom: -1px;
}
.form-signin input:first-of-type {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.form-signin input:last-of-type {
  border-bottom-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  margin-bottom: 10px;
}

Maintenant que nous avons ajusté la mise en page, ajoutons le balisage pour la page d’accueil. ouvrir views/index.hbs et remplacez le contenu par ce qui suit:

<form action="/subscribe" method="POST" class="form-signin full-width text-center">
  <h1 class="h3 mb-3 font-weight-normal">Join the mailing list</h1>
  <label for="name" class="sr-only">First name</label>
  <input type="text" name="name" class="form-control" placeholder="First name" required autofocus>
  <label for="email" class="sr-only">Email</label>
  <input type="email" name="email" class="form-control" placeholder="Your email" required>
  <label for="emailConfirmation" class="sr-only">Email (confirm)</label>
  <input type="email" name="emailConfirmation" class="form-control" placeholder="Your email (confirm)" required>
  <button class="btn btn-lg btn-primary btn-block" type="submit">Subscribe</button>
  <p class="mt-5 mb-3 text-muted">&copy; 2020</p>
</form>

Un formulaire d’inscription à la newsletter sera alors affiché sur notre page d’accueil.

Ajoutons une route à laquelle notre formulaire peut être soumis, où nous pouvons accéder et faire quelque chose avec les données du formulaire. Ouvrez le fichier routes/index.js et ajoutez l’itinéraire suivant sous l’itinéraire de la page d’accueil:

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

  
  
  

  res.render("subscribed", {
    title: "You are subscribed",
    name,
    email
  });
});

Dans le gestionnaire d’itinéraire, nous avons extrait les données du formulaire de l’objet de requête. Après traitement de l’enregistrement (affiché sous forme de pseudocode), nous transmettons les données aux nôtres subscribed Vue.

Remarque: si vous souhaitez en savoir plus sur l’utilisation des formulaires dans Node, reportez-vous à la section « Formulaires, téléchargements de fichiers et sécurité avec Node.js et Express».

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

<div class="full-width text-center">
  <h1 class="display-3">Thank You, {{name}}!</h1>
  <p class="lead"><strong>Please check your email</strong> to confirm your subscription to our newsletter.</p>
  <hr>
  <p>
      Having trouble? <a href="">Contact us</a>
  </p>
  <p class="lead">
      <a class="btn btn-primary btn-sm" href="/" role="button">Continue to homepage</a>
  </p>
</div>

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

Et voici la démo fonctionnant sur CodeSandbox.

J’espère que vous avez maintenant une idée claire de la façon dont l’outil Express Generator peut vous faire gagner du temps en écrivant des passe-partout répétitifs lors du démarrage de nouveaux projets basés sur Express.

En fournissant une structure de fichiers standard significative et en installant et en câblant les intergiciels fréquemment requis, le générateur crée une base solide pour de nouvelles applications avec seulement quelques commandes.



Source link

Recent Posts