Express.js 是一个流行的 Node.js Web 框架，它提供了方便的 API 和插件来帮助我们构建高效的 Web 应用程序。Pug 是一个流行的模板引擎，它允许我们使用简单的语法来生成 HTML，提高了我们开发 Web 应用程序的效率。在本文中，我们将介绍如何结合使用 Express.js 和 Pug 模板引擎。
安装 Express.js 和 Pug
首先，我们需要全局安装 Express.js 和 Pug。打开终端并执行以下命令：
--- ------- -- ------- ---
创建 Express.js 应用程序
创建一个新目录，然后在该目录中创建一个新的 Node.js 应用程序并安装 Express.js：
----- ----- -- ----- --- ---- -- --- ------- ------ -------
我们将在应用程序目录中创建一个名为 app.js 的文件，这是我们的应用程序的入口点。在 app.js 文件中，我们将创建一个 Express.js 应用程序并设置一些路由。
----- ------- - ------------------- ----- --- - ---------- ------------ ----- ---- -- - --------------- -------- --- ---------------- -- -- - ------------------- ------- -- ------------------------ ---
在 app.js 文件中，我们首先导入了 Express.js 模块并创建了一个 Express.js 应用程序实例。然后，我们定义了一个路由，当用户访问根 URL 时，我们将向用户发送“Hello World”消息。最后，我们通过调用 app.listen 方法来启动服务器并监听端口 3000。
现在，我们可以使用以下命令来启动我们的应用程序：
---- ------
在浏览器中访问 http://localhost:3000，我们应该能看到一个显示“Hello World”的页面。
添加 Pug 模板引擎
接下来，我们将添加 Pug 模板引擎，以便我们可以使用更有效的方式生成 HTML。
执行以下命令来安装 Pug：
--- ------- ------ ---
然后在 app.js 文件中添加以下代码：
------------- -------- -------
这将告诉 Express.js 使用 Pug 作为默认的模板引擎。我们还需要创建一个名为 views 的目录，用于存放 Pug 模板文件。在 views 目录中，我们可以创建一个名为 index.pug 的文件，它将作为我们的主页模板。
----
----
----- -- ---
----
-- ------- -- -- ---
- ---- -- --- ---- ---- -- -- ----现在，在 app.js 文件中，我们可以修改根路由，用以下代码替换：
------------ ----- ---- -- - -------------------- ---
这将渲染 views/index.pug 文件并将其作为响应发送给客户端。现在，在浏览器中访问 http://localhost:3000，我们应该看到一个新的页面，其中包含“Welcome to My App”和“This is the home page of my app.”的文本。
传递变量到模板
我们可以将变量传递给模板，以便在渲染期间使用它们。
在 app.js 文件中，我们可以修改根路由并将一个名为 title 的变量传递给模板：
------------ ----- ---- -- - ------------------- - ------ --- ---- --- ---
在 views/index.pug 文件中，我们可以使用变量 title：
----
----
------ -----
----
-- ------- -- -- ---
- ---- -- --- ---- ---- -- -- ----现在，我们在渲染页面时使用了 title 变量作为页面标题，这个变量的值来自于我们在 app.js 文件中传递的 { title: 'My App' } 对象。
我们可以在模板中传递更多的变量，并在渲染期间使用它们。
结论
在本文中，我们介绍了如何使用 Express.js 和 Pug 模板引擎创建 Web 应用程序。我们学习了如何设置 Express.js 应用程序和路由，以及如何创建和使用 Pug 模板文件。我们还学习了如何将变量传递给模板，以便在渲染期间使用它们。希望这篇文章对你有所帮助，可以继续深入学习相关技术，并探索更多地应用场景。
示例代码
以下是完整的 app.js 文件代码：
----- ------- - ------------------- ----- --- - ---------- ------------- -------- ------- ------------ ----- ---- -- - ------------------- - ------ --- ---- --- --- ---------------- -- -- - ------------------- ------- -- ------------------------ ---
及 views/index.pug 文件代码：
----
----
------ -----
----
-- ------- -- -- ---
- ---- -- --- ---- ---- -- -- ----来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6719a7e4ad1e889fe23254ca