Comprendre le moteur de modèles dans Node (Mise en route)

Tutoriel recommandé : Tutoriel node js

Dans cet article, nous présenterons comment utiliser Node.js et ExpressPour utiliser le moteur de modèles de guidon. Nous présenterons également ce qu'est un moteur de modèles et comment utiliser guidon pour créer des applications Web Server Side Rendering (SSR) .

Nous verrons également comment configurer guidons à l'aide du framework Express.js et comment créer des pages dynamiques à l'aide du helpers intégré. Enfin, nous verrons comment développer des personnalisations si besoin helper.

Qu'est-ce qu'un moteur de modèles ?

Dans les années 1990, lorsque Internet est apparu, il était principalement utilisé à des fins scientifiques, comme la publication d'articles de recherche, et comme canal de communication entre les universités et scientifiques . À cette époque, la plupart des pages Web étaient statiques. Les pages Web statiques sont les mêmes pour chaque utilisateur et ne changent pas pour chaque utilisateur. Si vous souhaitez modifier quoi que ce soit sur la page, vous devez le faire manuellement.

Dans le monde moderne, les choses sont plus interactives et personnalisées pour chaque utilisateur. Aujourd’hui, presque tout le monde a accès à Internet. Aujourd’hui, la plupart des applications Web sont dynamiques. Par exemple, sur certains sites Web commerciaux, les interfaces permettant aux différents utilisateurs de se connecter sont affichées différemment, ce qui signifie que des milliers de personnes ont des vues différentes. La page suivra le même modèle pour tout le monde (c'est-à-dire des publications consécutives avec le nom d'utilisateur dessus), mais le contenu sera différent.

Le contenu de travail du moteur de modèle : définissez le modèle de contenu d'affichage, puis remplissez le modèle avec le contenu reçu en fonction de l'utilisateur actuel et de la requête adressée à la base de données.

Nous pouvons utiliser des moteurs de modèles à la fois en backend et en frontend. Si nous utilisons un moteur de modèles sur le backend pour générer du HTML, cette méthode s'appelle 服务器端渲染(SSR). Les

Guidons

Les guidons sont populaires dans les modèles backend et frontend. Par exemple, le framework front-end populaire Ember utilise Handlebars comme moteur de modèles.

Handlebars est une extension du langage de modèles Moustache, qui se concentre sur la simplicité et les modèles minimaux.

Utilisation de guidons dans Node.js

Tout d'abord, créez un dossier vide, puis ouvrez un terminal, puis exécutez npm init -y pour créer un projet Node.js vide avec la configuration par défaut.

Avant de commencer, nous devons installer les bibliothèques Node.js requises. Installez les modules express et express-handlebars en exécutant :

npm install --save express express-handlebars

REMARQUE : est utilisé côté serveur avec Handlebars, vous pouvez utiliser un module d'assistance comme express-handlebars qui s'intègre Handlebars au framework Web. Dans cet article, nous nous concentrons principalement sur la syntaxe des modèles, c'est pourquoi nous utilisons express-handlebars, mais si vous gérez vous-même la compilation et le rendu des modèles, vous devez également lire la documentation correspondant à la référence de l'API de compilation.

Ensuite, recréez la structure de répertoires guidon par défaut. Le dossier views contient tous les modèles de mains de guidon : le dossier

├── app.js
└── views
    ├── home.hbs
    └── layouts
        └── main.hbs

views à l'intérieur du dossier layouts contiendra la mise en page ou le wrapper du modèle. Ces mises en page contiendront des structures HTML, des feuilles de style et des scripts partagés entre les modèles. Le fichier

main.hbs est la mise en page principale et le fichier home.hbs est l'exemple de modèle Handlebars que nous allons créer.

Dans notre exemple, nous utilisons un script pour rester simple. Tout d'abord, importez les bibliothèques requises dans le fichier app.js :

const express = require('express');
const exphbs = require('express-handlebars');

Ensuite, créez une application Express

const app = express();

Maintenant, nous pouvons configurer express-handlebars comme moteur d'affichage :

const express = require('express');
const exphbs = require('express-handlebars');


const app = express();

app.engine('hbs', exphbs({
  defaultLayout: 'main',
  extname: '.hbs'
}))

app.set('view engine', 'hbs');

Par défaut, l'extension du modèle Guidon est .handlebars. Mais dans les paramètres ici, nous l'avons changé en extname via le drapeau .hbs car il est plus court.

Ensuite, ajoutez main.hbs scripts et styles dans la mise en page Bootstrap :

Ajoutez le contenu suivant dans home.hb :

<h1>Hello World from Handlebars</h1>

Ajoutez le correspondant dans app.js Configuration du routage :

app.get('/', (req, res) => {
    res.render('home');
});

Ensuite, ajoutez le numéro de port si vous écoutez :

app.listen(3000, () => {
    console.log('The web server has started on port 3000');
});

Cela vous permettra de lancer l'application dans la console node app.js.

Mais on peut aussi choisir d'utiliser des outils comme nodemon. En utilisant nodemon, nous n'avons pas besoin de redémarrer le serveur à chaque fois que nous modifions le code nodemon actualisera automatiquement le serveur.

Disquez-le :

 npm i -g nodemon

Après l'installation, exécutez :

 nodemon app.js

Ouvrir dans le navigateur http://localhost:3000/:

Handlebars 更多功能

为了展示一些Handlebars功能，我们将构建一个社交媒体类的网站。 这里我们用一个简单的数组来模拟数据库。

将home.hbs内容更新成如下：

<nav>
    <a>Book Face</a>
</nav>

<p>
    </p><p>
        </p><p>
            </p><p>

                <img  alt="Comprendre le moteur de modèles dans Node (Mise en route)" >
                </p><p>
                    </p><h5>此文章由 前端小智 发布</h5>

                    

                        
• 期待你们的留言/li>                         
• 期待你们的留言
                    

                                           

上面我们添加了一个 navbar 和一个帖子的展示内容 card，运行效果如下：

向模板传递参数

现在，让我们从页面本身中删除这些硬编码的值，这些值由路由传递进来， 在 app.js 中修改如下内容 ：

app.get('/', function (req, res) {
    res.render('home', {
        post: {
            author: '小智',
            image: 'https://picsum.photos/500/500',
            comments: []
        }
    });
});

post 对象包含author,image和comments等字段。 我们可以在 Handlebars模板使用{{post}}来引用这些值：

<nav>
    <a>Book Face</a>
</nav>

<p>
    </p><p>
        </p><p>
            </p><p>

                <img  alt="Comprendre le moteur de modèles dans Node (Mise en route)" >
                </p><p>
                    </p><h5>此文章由 {{post.author}} 发布</h5>

                    

                        
• 期待你们的留言/li>                         
• 期待你们的留言
                    

                                           

效果如下：

使用条件

由于这里需要一些逻辑判断，即 comments 没数据不显示，我们看看如何在Handlebars 模板中使用条件：

<nav>
    <a>Book Face</a>
</nav>

<p>
    </p><p>
        </p><p>
            </p><p>

                <img  alt="Comprendre le moteur de modèles dans Node (Mise en route)" >
                </p><p>
                    </p><h5>此文章由 {{post.author}} 发布</h5>
                    {{#if post.comments}}
                    

                    

                    {{else}}                     

                        
• 期待你们的留言
                    

                    {{/if}}                                            

这里我们的 comments 为空，所以显示了 期待你们的留言。

#if是把 Handlebars 的内置帮助器。 如果if语句返回true，则将渲染#if块内部的块。 如果返回false，undefined，null，""，0或[]，则不会渲染该块。

#if仅接受一个条件，并且不能使用 JS 比较语法（===）。 如果需要使用多个条件或其他语法，则可以在代码中创建一个变量，然后将其传递给模板。 另外，你可以定义自己的 helper ，我们将在上一节中进行操作。

使用循环

由于帖子可以包含多个评论，因此我们需要一个循环渲染它们。 首先，我们先添加一些数据：

app.get('/', function (req, res) {
  res.render('home', {
      post: {
          author: '小智',
          image: 'https://picsum.photos/500/500',
          comments: [
            '前端小智终身学习者',
            '前端小智持续分享者',
            '虽然没啥流量，但也希望你也能坚持分享下去，帮助更多的初学者'
          ]
      }
  });
});

现在，在我们的模板中，使用#each循环遍历它们：

<nav>
    <a>Book Face</a>
</nav>

<p>
    </p><p>
        </p><p>
            </p><p>

                <img  alt="Comprendre le moteur de modèles dans Node (Mise en route)" >
                </p><p>
                    </p><h5>此文章由 {{post.author}} 发布</h5>
                    {{#if post.comments}}
                    

                      {{#each post.comments}}                       
• {{this}}
                      {{/each}}                     

                    {{else}}                     

                        
• 期待你们的留言
                    

                    {{/if}}                                            

在#each循环中，可以使用this来引用当前迭代中的元素。在我们的示例中，它引用了一个随后被渲染的字符串

如果posts是一个对象数组，你也可以访问该对象的任何属性。例如，如果有一个人员数组，你可以简单地使用this.name来访问name字段。

现在，为我们的 posts 添加多个数据:

app.get('/', function (req, res) {
  res.render('home', {
      posts: [
        {
          author: '小智',
          image: 'https://picsum.photos/500/500',
          comments: [
            '前端小智终身学习者',
            '前端小智持续分享者',
            '虽然没啥流量，但也希望你也能坚持分享下去，帮助更多的初学者'
          ]
        },
        {
          author: '前端大智',
          image: 'https://picsum.photos/500/500?2',
          comments: []
        }
      ]
  });
});

然后，使用#each来遍历 posts：

<p>
    </p><p>
      {{#each posts}}
        </p><p>
            </p><p>
                <img  alt="Comprendre le moteur de modèles dans Node (Mise en route)" >
                </p><p>
                    </p><h5>此文章由 {{post.author}} 发布</h5>
                    {{#if this.comments}}
                    

                      {{#each this.comments}}                       
• {{this}}
                      {{/each}}                     

                    {{else}}                     

                        
• 期待你们的留言
                    

                    {{/if}}                                              {{/each}}     

总结

在本文中，我们介绍了Handlebars的基础知识，Handlebars 是Node.js 和前端JavaScript 的模板引擎。 使用 Handlebars，我们可以创建在服务器端或客户端渲染的动态网页。 使用 Handlebars 的条件，循环，局部和自定义帮助器功能，我们的网页将不仅仅是静态HTML。

原文地址：https://stackabuse.com/guide-to-handlebars-engine-for-node/

作者：Janith Kasun

译者：前端小智

更多编程相关知识，请访问：编程入门！！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!