ExpressJS - Création de modèles

Pug est un moteur de création de modèles pour Express. Les moteurs de création de modèles sont utilisés pour supprimer l'encombrement du code de notre serveur avec du HTML, concaténant les chaînes de manière extravagante avec des modèles HTML existants. Pug est un moteur de création de modèles très puissant doté de nombreuses fonctionnalités, notammentfilters, includes, inheritance, interpolation, etc. Il y a beaucoup de chemin à parcourir à ce sujet.

Pour utiliser Pug avec Express, nous devons l'installer,

npm install --save pug

Maintenant que Pug est installé, définissez-le comme moteur de création de modèles pour votre application. Tudon'tbesoin de «l'exiger». Ajoutez le code suivant à votreindex.js fichier.

app.set('view engine', 'pug');
app.set('views','./views');

Créez maintenant un nouveau répertoire appelé vues. À l'intérieur, créez un fichier appeléfirst_view.puget saisissez-y les données suivantes.

doctype html
html
   head
      title = "Hello Pug"
   body
      p.greetings#people Hello World!

Pour exécuter cette page, ajoutez l'itinéraire suivant à votre application -

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

Vous obtiendrez la sortie comme - Hello World!Pug convertit ce balisage très simple en html. Nous n'avons pas besoin de garder une trace de la fermeture de nos balises, pas besoin d'utiliser des mots-clés de classe et d'identifiant, utilisez plutôt "." et'#'pour les définir. Le code ci-dessus est d'abord converti en -

<!DOCTYPE html>
<html>
   <head>
      <title>Hello Pug</title>
   </head>
   
   <body>
      <p class = "greetings" id = "people">Hello World!</p>
   </body>
</html>

Pug est capable de faire bien plus que de simplifier le balisage HTML.

Caractéristiques importantes de Pug

Explorons maintenant quelques caractéristiques importantes de Pug.

Balises simples

Les balises sont imbriquées en fonction de leur indentation. Comme dans l'exemple ci-dessus,<title> était en retrait dans le <head>tag, donc c'était à l'intérieur. Mais le<body> la balise était sur la même indentation, donc c'était un frère du <head> marque.

Nous n'avons pas besoin de fermer les balises, dès que Pug rencontre la balise suivante au même niveau d'indentation ou à l'extérieur, il ferme la balise pour nous.

Pour mettre du texte à l'intérieur d'une balise, nous avons 3 méthodes -

Space seperated

h1 Welcome to Pug

Piped text

div
   | To insert multiline text, 
   | You can use the pipe operator.

Block of text

div.
   But that gets tedious if you have a lot of text.
   You can use "." at the end of tag to denote block of text.
   To put tags inside this block, simply enter tag in a new line and 
   indent it accordingly.

commentaires

Pug utilise la même syntaxe que JavaScript(//)pour créer des commentaires. Ces commentaires sont convertis en commentaires html (<! - comment ->). Par exemple,

//This is a Pug comment

Ce commentaire est converti en ce qui suit.

<!--This is a Pug comment-->

Les attributs

Pour définir les attributs, nous utilisons une liste d'attributs séparés par des virgules, entre parenthèses. Les attributs de classe et d'ID ont des représentations spéciales. La ligne de code suivante couvre la définition des attributs, des classes et des identifiants pour une balise html donnée.

div.container.column.main#division(width = "100", height = "100")

Cette ligne de code est convertie en ce qui suit. -

<div class = "container column main" id = "division" width = "100" height = "100"></div>

Passer des valeurs aux modèles

Lorsque nous rendons un modèle Pug, nous pouvons en fait lui transmettre une valeur de notre gestionnaire de route, que nous pouvons ensuite utiliser dans notre modèle. Créez un nouveau gestionnaire d'itinéraire avec les éléments suivants.

var express = require('express');
var app = express();

app.get('/dynamic_view', function(req, res){
   res.render('dynamic', {
      name: "TutorialsPoint", 
      url:"http://www.tutorialspoint.com"
   });
});

app.listen(3000);

Et créez un nouveau fichier de vue dans le répertoire de vues, appelé dynamic.pug, avec le code suivant -

html
   head
      title=name
   body
      h1=name
      a(href = url) URL

Ouvrez localhost: 3000 / dynamic_view dans votre navigateur; Vous devriez obtenir la sortie suivante -

Nous pouvons également utiliser ces variables passées dans le texte. Pour insérer des variables passées entre le texte d'une balise, nous utilisons#{variableName}syntaxe. Par exemple, dans l'exemple ci-dessus, si nous voulions mettre des salutations de TutorialsPoint, nous aurions pu faire ce qui suit.

html
   head
      title = name
   body
      h1 Greetings from #{name}
      a(href = url) URL

Cette méthode d'utilisation des valeurs est appelée interpolation. Le code ci-dessus affichera la sortie suivante. -

Conditionnels

Nous pouvons également utiliser des instructions conditionnelles et des constructions en boucle.

Considérez ce qui suit -

Si un utilisateur est connecté, la page doit s'afficher "Hi, User" et sinon, alors le "Login/Sign Up"lien. Pour y parvenir, nous pouvons définir un modèle simple comme -

html
   head
      title Simple template
   body
      if(user)
         h1 Hi, #{user.name}
      else
         a(href = "/sign_up") Sign Up

Lorsque nous rendons cela en utilisant nos routes, nous pouvons passer un objet comme dans le programme suivant -

res.render('/dynamic',{
   user: {name: "Ayush", age: "20"}
});

Vous recevrez un message - Hi, Ayush. Mais si nous ne transmettons aucun objet ou n'en transmettons aucun sans clé utilisateur, nous obtiendrons un lien d'inscription.

Inclure et composants

Pug fournit un moyen très intuitif de créer des composants pour une page Web. Par exemple, si vous voyez un site Web d'actualités, l'en-tête avec le logo et les catégories est toujours fixe. Au lieu de copier cela dans chaque vue que nous créons, nous pouvons utiliser leincludefonctionnalité. L'exemple suivant montre comment nous pouvons utiliser cette fonctionnalité -

Créez 3 vues avec le code suivant -

HEADER.PUG

div.header.
   I'm the header for this website.

CONTENT.PUG

html
   head
      title Simple template
   body
      include ./header.pug
      h3 I'm the main content
      include ./footer.pug

FOOTER.PUG

div.footer.
   I'm the footer for this website.

Créez un itinéraire pour cela comme suit -

var express = require('express');
var app = express();

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

app.listen(3000);

Accédez à localhost: 3000 / components, vous recevrez la sortie suivante -

include peut également être utilisé pour inclure du texte brut, css et JavaScript.

Il existe de nombreuses autres fonctionnalités de Pug. Mais ceux-ci sont hors de portée de ce didacticiel. Vous pouvez explorer davantage Pug à Pug .