简介
Express.js 是一款基于 Node.js 平台的 Web 应用程序框架，它提供了一套简洁、灵活的 API，可以帮助开发者快速搭建 Web 应用程序。Pug 是一款高效、灵活的模板引擎，它可以帮助开发者更加方便地构建 Web 页面。
本文将介绍如何使用 Express.js 和 Pug 模板引擎构建 Web 应用程序，并提供详细的代码示例和指导意义。
安装和配置
首先，我们需要安装 Node.js 和 Express.js。可以在 Node.js 的官方网站上下载并安装 Node.js，然后使用 npm 包管理器安装 Express.js：
npm install express --save
安装完成后，在项目根目录下新建一个 app.js 文件，并添加以下代码：
const express = require('express');
const app = express();
app.listen(3000, () => {
console.log('Server is running on port 3000');
});这段代码创建了一个 Express.js 应用程序，并在本地的 3000 端口上启动了一个 Web 服务器。
接下来，我们需要安装 Pug 模板引擎。可以使用以下命令进行安装：
npm install pug --save
安装完成后，在项目根目录下新建一个 views 文件夹，并在其中创建一个 index.pug 文件。在 index.pug 文件中添加以下代码：
html
head
title My Web Application
body
h1 Welcome to my Web Application!这段代码定义了一个简单的 HTML 页面，其中包含一个标题和一段欢迎语。
接下来，在 app.js 文件中添加以下代码：
app.set('view engine', 'pug');
app.set('views', './views');
app.get('/', (req, res) => {
res.render('index');
});这段代码告诉 Express.js 使用 Pug 模板引擎来渲染视图，并将视图文件存放在 views 文件夹中。同时，我们定义了一个路由，当用户访问根路径时，会渲染 index.pug 文件并返回给用户。
现在，我们已经完成了 Express.js 和 Pug 模板引擎的安装和配置，可以运行应用程序并访问 http://localhost:3000 来查看效果了。
使用模板引擎渲染动态数据
上面的示例中，我们只是简单地渲染了一个静态的 HTML 页面。但是，在实际的 Web 应用程序中，我们通常需要渲染动态的数据。下面，我们将介绍如何使用 Pug 模板引擎来渲染动态数据。
首先，我们需要在 index.pug 文件中定义一个变量来接收动态数据：
html
head
title My Web Application
body
h1 Welcome to my Web Application!
p= message这段代码定义了一个 message 变量，用来接收动态数据，并在页面中显示。
接下来，在 app.js 文件中添加以下代码：
app.get('/', (req, res) => {
let message = 'Hello, World!';
res.render('index', { message: message });
});这段代码定义了一个名为 message 的变量，并将其传递给视图。在视图中，我们可以使用 = 符号来输出变量的值。
现在，我们已经成功地使用 Pug 模板引擎渲染了动态数据，可以在应用程序中添加更多的逻辑来实现更加复杂的功能。
结论
本文介绍了如何使用 Express.js 和 Pug 模板引擎构建 Web 应用程序，并提供了详细的代码示例和指导意义。通过学习本文的内容，读者可以了解如何使用 Express.js 和 Pug 模板引擎来构建 Web 应用程序，并掌握如何渲染动态数据。希望本文能对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6765731676af2b9a20ed05fb