前言
Express.js 是一款开源的、高效的 Web 应用框架，非常适合构建 Web 应用程序和 API。而 Handlebars.js 是一款简单易用的模板引擎，能够让你轻松地创建可复用的模板文件，进而实现快速构建动态 Web 页面的目的。本文将介绍如何使用 Express.js 和 Handlebars.js 构建一个完整的 Web 应用程序，并通过实例代码进行深入学习和指导。
准备工作
安装 Node.js 和 npm 后，我们可以使用以下命令来安装 Express.js 和 Handlebars.js：
npm install express handlebars --save
同时，为了保证代码的规范性和可读性，我们还需要安装以下依赖库：
npm install nodemon cross-env eslint babel-eslint eslint-config-airbnb-base eslint-plugin-import --save-dev
创建 Express.js 应用
接下来，我们就可以开始创建一个基于 Express.js 的 Web 应用程序了。首先，我们需要创建一个 app.js 文件，作为应用程序的入口文件。在文件中，我们需要引入 Express.js 和 Handlebars.js，以及相关中间件和路由。
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ------ - ------------------------------ ----- --- - ---------- -- -- ---------- ---- ----------------- -------- -------------- ------- -------- ------ ---- -- --------- ------------- -------- ------- -- ---- ------------ ----- ---- -- - ------------------ - ------ ----- ----- --- --- ----------------- ----- ---- -- - ------------------- - ------ ------ ----- --- --- -- ------ ---------------- -- -- - ------------------- -- ------- -- ---- ---------- ---
在上述代码中，我们首先引入了 Express.js 和 Handlebars.js。接着，我们通过 express() 函数创建了一个 Express.js 应用程序实例，并配置了 Handlebars.js 模板引擎。其中，我们指定了主模板文件 main.hbs 作为默认模板，并将模板文件后缀名设置为 .hbs。接下来，我们定义了两个路由，分别对应应用程序的首页和关于页面。通过 res.render 方法，我们可以轻松地将模板文件和数据进行绑定，实现页面内容的动态渲染。最后，我们通过 app.listen 方法，指定应用程序运行的端口号，并在控制台中输出启动成功的信息。
创建 Handlebars 模板文件
在本例中，我们将使用 Handlebars.js 模板引擎来创建可复用的动态页面。因此，我们需要在应用程序中创建相关的模板文件。
首先，我们需要创建一个主模板文件 main.hbs，作为所有页面的共同部分。在该文件中，我们可以引入一些公共的 CSS 样式和 JavaScript 脚本，以及实现页面布局和导航等功能。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------
-------
------
-----
----
------ ----------------------
------ ----------------------------
-----
------
------
----------
-------
-------
-------接下来，我们可以根据需要创建其他页面的模板文件。例如，我们可以创建一个 home.hbs 文件，用于渲染应用程序的首页内容。在该文件中，我们可以使用 Handlebars.js 的语法来输出动态数据，例如网站名称、欢迎语等。
<h1>{{title}}</h1>
<p>Welcome to my web app!</p>同理，我们也可以创建一个 about.hbs 文件，用于渲染应用程序的关于页面内容。在该文件中，我们可以输出一些简介性的信息，例如网站的作者、创建时间等。
<h1>{{title}}</h1>
<p>My web app was created by Mr. X in 2022.</p>配置并运行应用程序
最后，我们需要在命令行中进入项目根目录，并执行以下命令，以启动应用程序：
npm start
该命令会通过 nodemon 监听文件变化，并在代码保存后自动重启应用程序。之后，我们就可以在浏览器中访问 http://localhost:3000，并查看应用程序的效果了。
总结
本文介绍了如何使用 Express.js 和 Handlebars.js 构建一个完整的 Web 应用程序。通过对代码的详细解析和实例的演示，我们可以更好地掌握相关技术和应用。希望能给大家带来一些有意义的启示和帮助。完整的源代码请参考以下链接：
https://github.com/example/express-handlebars-demo
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645cb750968c7c53b0f26c5e