在前端开发中，构建动态网页是必不可少的一项技能。而使用 Express.js 和 Handlebars 可以轻松地构建出具有页面渲染和数据处理能力的动态网页。在本文中，我们将详细介绍如何使用 Express.js 和 Handlebars 构建动态网页，并提供示例代码以供参考。
什么是 Express.js 和 Handlebars？
Express.js 是一个基于 Node.js 平台的 Web 开发框架，提供了简单、灵活的 API，使得开发 Web 应用变得更加容易。它可以用于构建各种类型的 Web 应用，比如单页面应用、多页面应用等，而且还支持静态文件服务、请求路由和中间件等功能。
Handlebars 是一种流行的模板引擎，它可以通过简单的语法来生成 HTML 字符串，而且还支持数据绑定、逻辑处理等功能。使用 Handlebars 可以使我们更加方便地生成动态内容，并将这些内容渲染到网页上。
安装 Express.js 和 Handlebars
在开始构建动态网页之前，我们需要先安装 Express.js 和 Handlebars。在 Node.js 环境中，我们可以通过 npm 包管理器来进行安装。具体操作如下：
- 安装 Express.js
--- ------- ------- ------
- 安装 Handlebars
--- ------- ---------- ------
创建 Express.js 应用
安装完 Express.js 和 Handlebars 之后，我们可以开始创建一个简单的 Express.js 应用，用于演示如何使用 Handlebars 来构建动态网页。具体操作如下：
- 创建项目目录和文件
在命令行中输入以下命令来创建项目目录和文件：
----- ----------------------- -- ----------------------- ----- ------ ----- ----------------------
其中，app.js 是我们的应用入口文件，views/index.handlebars 是我们的网页模板文件。
- 编辑 app.js 文件
在 app.js 文件中输入以下代码：
----- ------- - ------------------- ----- ------ - ------------------------------ ----- --- - ---------- -- ------ ------------------------ ---------- ------------- -------- -------------- -- ---- ------------ ----- ---- -- - -------------------- --- -- ---- ---------------- -- -- - ---------------- --------- -- ---- -------- ---
在代码中，我们首先引入了 Express.js 和 Handlebars，然后创建了一个 Express.js 应用。接着，我们使用 app.engine 方法来注册 Handlebars 作为我们的模板引擎，并设置默认的模板后缀名为 .handlebars。然后，我们定义了一个路由，当用户访问根路径时，会渲染 views/index.handlebars 文件并返回给用户。最后，我们使用 app.listen 方法来启动服务，监听 3000 端口。
- 编辑 index.handlebars 文件
在 views/index.handlebars 文件中输入以下代码：
--------- -----
------
------
----- ----------------
-------------- ---------- ------------
-------
------
------ ----- -------
----- ---- ------
-------
-------在代码中，我们使用了 Handlebars 提供的模板语法，{{ title }} 和 {{ body }} 分别表示渲染时要替换的内容。
- 启动应用
在命令行中输入以下命令来启动应用：
---- ------
然后，在浏览器中访问 http://localhost:3000，就可以看到我们刚刚创建的动态网页了。
向模板中传递数据
在上面的示例中，我们已经演示了如何使用 Handlebars 渲染简单的静态网页。但是，真正有用的网页肯定需要展示动态的数据。在 Express.js 中，我们可以使用 res.render 方法来将数据传递给模板，从而生成动态内容。具体操作如下：
- 在路由中传递数据
在 app.js 文件中，修改路由的处理逻辑，向模板中传递一些数据：
-- ----
------------ ----- ---- -- -
----- ---- - -
------ -------- ---------- ------
----- ----- -- - ---- -- ----- ---------- ---- ------------
--
------------------- ------
---在代码中，我们首先定义了一个 data 对象，里面包含了 title 和 body 两个属性，分别表示网页标题和正文内容。然后，在路由处理逻辑中，我们将 data 对象作为第二个参数传递给 res.render 方法。这里的第一个参数是模板文件名，可以省略后缀名。
- 在模板中使用数据
在 views/index.handlebars 文件中，修改模板文件以使用传递进来的数据：
--------- -----
------
------
----- ----------------
--------- ----- ----------
-------
------
------ ----- -------
----- ---- ------
-------
-------在代码中，我们将 title 属性用于网页的标题，同时也渲染到了网页正文中。
- 重新启动应用
在命令行中输入以下命令来重新启动应用：
---- ------
然后，在浏览器中访问 http://localhost:3000，可以看到我们刚刚传递进去的数据已经被渲染在网页上了。
总结
使用 Express.js 和 Handlebars 构建动态网页是一项基本的前端开发技能。在本文中，我们详细介绍了如何安装 Express.js 和 Handlebars，并通过一个简单的示例演示了如何使用它们来构建动态网页。希望本文能够对你有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/653108fa7d4982a6eb2a1b24