前端开发是一个快速发展的领域，随着技术的进步，越来越多的开发者开始使用 Express.js 和 Handlebars 来创建动态 HTML 页面。本文将介绍如何使用这两个工具来构建一个完整的动态 HTML 页面。
Express.js 简介
Express.js 是 Node.js 的一个 Web 应用程序框架，它提供了一系列功能强大的工具和插件，使得开发者可以快速构建 Web 应用程序。Express.js 提供了许多中间件，开发者可以使用这些中间件来实现各种功能。
Handlebars 简介
Handlebars 是一个模板引擎，它可以将数据和模板合并生成 HTML 页面。它使用简单，语法清晰，支持条件语句、循环语句、模板继承等功能。Handlebars 可以与 Express.js 配合使用，快速构建动态 HTML 页面。
创建一个 Express.js 应用程序
首先，需要安装 Node.js 和 Express.js。可以使用 npm 包管理器来安装这两个工具。
npm install express
接下来，创建一个名为 app.js 的文件，并添加以下代码：
// javascriptcn.com 代码示例
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send('Hello World!');
});
app.listen(3000, () => {
console.log('Example app listening on port 3000!');
});以上代码创建了一个 Express.js 应用程序，并在根路径下设置了一个路由，当用户访问根路径时，会返回一个字符串 "Hello World!"。
启动应用程序，打开浏览器访问 http://localhost:3000，可以看到 "Hello World!" 字符串。
使用 Handlebars 创建动态 HTML 页面
接下来，需要安装 Handlebars。使用 npm 包管理器来安装。
npm install handlebars
创建一个名为 views 目录，并在其中创建一个名为 index.hbs 的文件。在 index.hbs 文件中添加以下代码：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<title>{{title}}</title>
</head>
<body>
<h1>{{title}}</h1>
<p>{{message}}</p>
</body>
</html>以上代码定义了一个 HTML 页面模板，使用了 Handlebars 的语法。{{title}} 和 {{message}} 是模板中的变量，可以在后面的代码中传入值。
接下来，在 app.js 中添加以下代码：
// javascriptcn.com 代码示例
const express = require('express');
const app = express();
const handlebars = require('handlebars');
app.engine('hbs', handlebars({defaultLayout: 'main', extname: '.hbs'}));
app.set('view engine', 'hbs');
app.get('/', (req, res) => {
res.render('index', {title: 'Express.js and Handlebars', message: 'Welcome to the world of Express.js and Handlebars!'});
});
app.listen(3000, () => {
console.log('Example app listening on port 3000!');
});以上代码使用了 app.engine() 方法来设置 Handlebars 模板引擎，使用 app.set() 方法来设置模板引擎的名称为 'hbs'。在路由中，使用 res.render() 方法来渲染模板，并传入模板中的变量值。
启动应用程序，打开浏览器访问 http://localhost:3000，可以看到一个包含标题和消息的 HTML 页面。
总结
本文介绍了如何使用 Express.js 和 Handlebars 来创建动态 HTML 页面。通过使用这两个工具，开发者可以快速构建动态 Web 应用程序，提高开发效率。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656d999fd2f5e1655d5d7aaf