ノードのテンプレートエンジンを理解する (入門)-jsチュートリアル-php.cn

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

推奨チュートリアル: 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}}

ログイン後にコピー

期待你们的留言

这里我们的 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}}

ログイン後にコピー

{{this}}

期待你们的留言

在#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}}

ログイン後にコピー

{{this}}

期待你们的留言

总结

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