使用 Express.js 和 Handlebars 构建动态网页的完整教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，构建动态网页是必不可少的一项技能。而使用 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

npm install express --save

安装 Handlebars

npm install handlebars --save

创建 Express.js 应用

安装完 Express.js 和 Handlebars 之后，我们可以开始创建一个简单的 Express.js 应用，用于演示如何使用 Handlebars 来构建动态网页。具体操作如下：

在命令行中输入以下命令来创建项目目录和文件：

mkdir express-handlebars-demo
cd express-handlebars-demo
touch app.js
touch views/index.handlebars

其中，app.js 是我们的应用入口文件，views/index.handlebars 是我们的网页模板文件。

编辑 app.js 文件

在 app.js 文件中输入以下代码：

// javascriptcn.com 代码示例
const express = require('express');
const exphbs = require('express-handlebars');

const app = express();

// 设置模板引擎
app.engine('handlebars', exphbs());
app.set('view engine', 'handlebars');

// 定义路由
app.get('/', (req, res) => {
  res.render('index');
});

// 启动服务
app.listen(3000, () => {
  console.log('App listening on port 3000!');
});

在代码中，我们首先引入了 Express.js 和 Handlebars，然后创建了一个 Express.js 应用。接着，我们使用 app.engine 方法来注册 Handlebars 作为我们的模板引擎，并设置默认的模板后缀名为 .handlebars。然后，我们定义了一个路由，当用户访问根路径时，会渲染 views/index.handlebars 文件并返回给用户。最后，我们使用 app.listen 方法来启动服务，监听 3000 端口。

编辑 index.handlebars 文件

在 views/index.handlebars 文件中输入以下代码：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Express handlebars demo</title>
  </head>
  <body>
    <h1>{{ title }}</h1>
    <p>{{ body }}</p>
  </body>
</html>

在代码中，我们使用了 Handlebars 提供的模板语法，{{ title }} 和 {{ body }} 分别表示渲染时要替换的内容。

启动应用

在命令行中输入以下命令来启动应用：

node app.js

然后，在浏览器中访问 http://localhost:3000，就可以看到我们刚刚创建的动态网页了。

向模板中传递数据

在上面的示例中，我们已经演示了如何使用 Handlebars 渲染简单的静态网页。但是，真正有用的网页肯定需要展示动态的数据。在 Express.js 中，我们可以使用 res.render 方法来将数据传递给模板，从而生成动态内容。具体操作如下：

在路由中传递数据

在 app.js 文件中，修改路由的处理逻辑，向模板中传递一些数据：

// 定义路由
app.get('/', (req, res) => {
  const data = {
    title: 'Express handlebars demo',
    body: 'This is a demo of using Handlebars with Express.js.'
  };
  res.render('index', data);
});

在代码中，我们首先定义了一个 data 对象，里面包含了 title 和 body 两个属性，分别表示网页标题和正文内容。然后，在路由处理逻辑中，我们将 data 对象作为第二个参数传递给 res.render 方法。这里的第一个参数是模板文件名，可以省略后缀名。

在模板中使用数据

在 views/index.handlebars 文件中，修改模板文件以使用传递进来的数据：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ title }}</title>
  </head>
  <body>
    <h1>{{ title }}</h1>
    <p>{{ body }}</p>
  </body>
</html>

在代码中，我们将 title 属性用于网页的标题，同时也渲染到了网页正文中。

重新启动应用

在命令行中输入以下命令来重新启动应用：

node app.js

然后，在浏览器中访问 http://localhost:3000，可以看到我们刚刚传递进去的数据已经被渲染在网页上了。

总结

使用 Express.js 和 Handlebars 构建动态网页是一项基本的前端开发技能。在本文中，我们详细介绍了如何安装 Express.js 和 Handlebars，并通过一个简单的示例演示了如何使用它们来构建动态网页。希望本文能够对你有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653108fa7d4982a6eb2a1b24