ノードのテンプレート エンジンを理解する (入門)

推奨チュートリアル: node js チュートリアル

この記事では、Node の使い方を紹介します。 Handlebars テンプレート エンジンを使用するには、.js および Express を使用します。また、テンプレート エンジンとは何か、およびハンドルバーを使用してサーバーサイド レンダリング (SSR) Web アプリケーションを構築する方法についても紹介します。

また、

Express.js フレームワークを使用してハンドルバーを構成する方法と、組み込みの helpers を使用して動的ページを作成する方法についても説明します。最後に、必要に応じてカスタム helper を開発する方法を見ていきます。

テンプレート エンジンとは

インターネットが登場した 1990 年代、インターネットは主に研究論文の出版などの科学目的、および大学と科学者の間のコミュニケーション チャネルとして使用されていました。 。当時のほとんどの Web ページは静的でした。静的 Web ページはすべてのユーザーに対して同じであり、すべてのユーザーに対して変更されません。ページ上の何かを変更したい場合は、手動で行う必要があります。

現代の世界では、物事はよりインタラクティブになり、ユーザーごとにカスタマイズされています。今日、ほぼ誰もがインターネットにアクセスできます。現在のほとんどの Web アプリケーションは動的です。たとえば、一部のショッピング Web サイトでは、ユーザーごとにログインするためのインターフェイスが異なって表示され、いわゆる何千人ものユーザーが異なるビューを持っています。ページは全員に対して同じテンプレートに従います (つまり、ユーザー名を含む連続投稿) が、コンテンツは異なります。

テンプレート エンジンの作業内容: 表示コンテンツ テンプレートを定義し、現在のユーザーとデータベースへのクエリに基づいて受信したコンテンツをテンプレートに入力します。

テンプレート エンジンはバックエンドとフロントエンドの両方で使用できます。バックエンドでテンプレート エンジンを使用して HTML を生成する場合、このメソッドは

サーバー サイド レンダリング (SSR) と呼ばれます。

ハンドルバー

ハンドルバーは、バックエンド テンプレートとフロントエンド テンプレートの両方で人気があります。たとえば、人気のあるフロントエンド フレームワーク Ember は、テンプレート エンジンとして Handlebars を使用します。

Handlebars は Mustache テンプレート言語の拡張機能であり、シンプルさと最小限のテンプレートに重点を置いています。

Node.js でのハンドルバーの使用

まず、空のフォルダーを作成し、次にターミナルを開いて、

npm init -y を実行します。デフォルトのフォルダーを使用して空のフォルダーを作成します。構成 Node.js プロジェクト。

始める前に、必要な Node.js ライブラリをインストールする必要があります。次のコマンドを実行して、

express モジュールと express-handlebars モジュールをインストールします:

npm install --saveexpressexpress-handlebars

注: サーバー側で Handlebars を使用する場合は、Handlebars を Web フレームワークと統合する express-handlebars のようなヘルパー モジュールを使用できます。この記事では、主にテンプレート構文に焦点を当てます。そのため、express-handlebars を使用します。ただし、テンプレートのコンパイルとレンダリングを自分で処理する場合は、コンパイル API リファレンスに対応するドキュメントも読む必要があります。

次に、デフォルトの Handlebars ディレクトリ構造を再作成します。

views フォルダーには、すべての Handlebars ハンド テンプレートが含まれています。

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

views フォルダー内の layouts フォルダーには、レイアウトまたはテンプレート ラッパーが含まれます。これらのレイアウトには、テンプレート間で共有される HTML 構造、スタイルシート、およびスクリプトが含まれます。

main.hbs ファイルはメイン レイアウトで、home.hbs ファイルは構築するサンプルの Handlebars テンプレートです。

この例では、シンプルにするためにスクリプトを使用します。まず、必要なライブラリを

app.js ファイルにインポートします。

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

次に、Express アプリを作成します

const app = express();

これで、

express ハンドルバーを構成できます。 ビュー エンジンとして:

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');

デフォルトでは、Handlebars テンプレートの拡張子は

.handlebars です。ただし、ここの設定では、extname フラグを介して .hbs に変更します。これは、短いためです。

次に、

Bootstrap スクリプトとスタイルを main.hbs レイアウトに追加します。

次のコンテンツを

home.hb に追加します。 :

<h1>Hello World from Handlebars</h1>

対応するルーティング構成を

app.js に追加します:

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

次に、リスニング ポート番号を追加します:

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

This方法 コンソールで

node app.js を実行すると、アプリケーションを起動できます。

ただし、nodemon などのツールを使用することもできます。

nodemon を使用すると、コードを変更するたびにサーバーを再起動する必要がなく、nodemon がサーバーを自動的に更新します。

ディスクに入れます:

 npm i -g nodemon

インストール後、実行します:

 nodemon app.js

ブラウザで開く

http://localhost:3000/:

#

Handlebars 更多功能

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

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

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

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

                <img  alt="ノードのテンプレート エンジンを理解する (入門)" >
                </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="ノードのテンプレート エンジンを理解する (入門)" >
                </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="ノードのテンプレート エンジンを理解する (入門)" >
                </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="ノードのテンプレート エンジンを理解する (入門)" >
                </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="ノードのテンプレート エンジンを理解する (入門)" >
                </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

译者：前端小智

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

以上がノードのテンプレート エンジンを理解する (入門)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。