Express.js 是一个高度可定制的 Web 应用程序框架，Node.js 社区非常流行。它使用开放源代码的方式开发，可以帮助开发者快速构建 HTTP 服务器和 Web 应用程序。在 Express.js 中，视图是前端开发中十分重要的一部分。本文将详细介绍如何使用 Express.js 中的视图助手。
视图助手是什么？
视图助手是将处理 HTML、CSS 和 JavaScript 的代码组织成可复用的块的方法。这些块通常称为模板或视图。视图助手可以帮助开发者更轻松地管理视图代码，减少重复代码的存在，使视图更加简洁清晰，方便更改和维护。
使用 Express.js 中的视图助手
Express.js 提供了多种视图助手，例如 Handlebars、EJS、Pug 和 React 等。下面将以 Handlebars 为例介绍如何使用 Express.js 中的视图助手。
安装 Handlebars
在使用 Handlebars 之前，需要先安装 Handlebars。
npm install express-handlebars --save
设置 Handlebars
在你的 Express.js 应用程序的 app.js 或 index.js 文件中，你需要将 Handlebars 引入，并将其设置为默认视图引擎。可以使用以下代码实现：
const express = require('express');
const exphbs = require('express-handlebars');
const app = express();
app.engine('.hbs', exphbs({extname: '.hbs'}));
app.set('view engine', '.hbs');创建 Handlebars 模板
创建 Handlebars 视图，则需要一个 .hbs 文件。例如，创建一个 home 页面的模板，home.hbs 如下：
-- -------------------- ---- -------
--------- -----
------
------
-------------------
-------
------
------------------
------------------
-------
-------渲染 Handlebars 视图
在 Express.js 中渲染 Handlebars 视图时，需要传递一个数据对象，用于填充模板中使用的占位符。数据对象可以是一个简单的对象，也可以是从数据库中检索的复杂对象。可以使用以下代码实现渲染视图：
app.get('/', function (req, res) {
res.render('home', {
title: 'Home',
content: 'Hello, World!'
});
});使用部分视图
应用程序中可以使用一个部分视图多次，而每次都可以传递不同的数据。以下是一个示例，演示如何使用部分视图。
创建部分视图
例如，创建一个部分视图名为 header.hbs，其中包含一个标题和一个导航：
-- -------------------- ---- -------
--------- -----
------
------
------------------------
-------
------
-------------------
----
------ ----------------------
------ ----------------------------
------ --------------------------------
-----
-------
-------渲染部分视图
要在视图中使用部分视图，需要使用 Handlebars 的 {{>partial}} 语法。以下是一个示例，演示如何在视图中使用部分视图：
{{> header}}
<h2>{{title}}</h2>
<p>{{content}}</p>总结
Express.js 中的视图助手可以让视图的管理变得更加容易。您可以选择您喜欢的视图助手，并使用它为您的应用程序创建动态连续视图。Handlebars 是其中一种流行的视图助手，它提供了一种简单而强大的方式来组织和管理前端代码。希望本文可以帮助您更深入地了解如何在 Express.js 中使用视图助手，并且在您的下一个项目中寻找到视图助手的实际用例。
示例代码
完整示例代码如下：
-- -------------------- ---- -------
----- ------- - -------------------
----- ------ - ------------------------------
----- --- - ----------
------------------ ---------------- ----------
------------- -------- --------
-- --------
--------- -----
------
------
-------------------
-------
------
------------------
------------------
-------
-------
-- ----------
--------- -----
------
------
------------------------
-------
------
-------------------
----
------ ----------------------
------ ----------------------------
------ --------------------------------
-----
-------
-------
------------ -------- ----- ---- -
------------------ -
------ -------
-------- ------- -------
---
---
----------------- -------- ----- ---- -
------------------ -
------ --------
-------- ----- -- --- ----- ------
---
---
------------------- -------- ----- ---- -
------------------ -
------ ----------
-------- ----- -- --- ------- ------
---
---
---------------- -------- -- -
-------------------- --- --------- -- ---- --------
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645420ac968c7c53b082d45c