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