使用 Express.js 和 Pug 实现模板引擎
随着 Web 应用程序的发展，前端开发变得越来越重要。为了提高 Web 应用程序的效率和可维护性，前端开发人员通常会使用模板引擎。模板引擎是一种将数据和模板结合起来生成 HTML 页面的工具。在本文中，我们将介绍如何使用 Express.js 和 Pug 实现模板引擎。
什么是 Express.js？
Express.js 是一种流行的 Node.js Web 框架，它提供了一组强大的功能，使开发 Web 应用程序变得更加容易。Express.js 的主要目标是提供一个简单的、灵活的 Web 应用程序开发框架，它可以在 Node.js 的基础上快速构建 Web 应用程序。Express.js 支持各种 HTTP 请求方法，包括 GET、POST、PUT 和 DELETE 等。
什么是 Pug？
Pug（原名 Jade）是一种流行的模板引擎，它可以帮助开发人员更轻松地创建 HTML 页面。Pug 具有简洁的语法，可以创建高度可读性的模板，并且可以轻松地集成到 Express.js 中。
如何使用 Express.js 和 Pug 实现模板引擎？
步骤 1：安装 Express.js 和 Pug
首先，我们需要在本地安装 Express.js。打开终端并运行以下命令：
npm install express --save
然后，我们需要安装 Pug。运行以下命令：
npm install pug --save
步骤 2：创建 Express.js 应用程序
下一步是创建一个新的 Express.js 应用程序。在终端中，创建一个新的文件夹并进入该文件夹：
mkdir myapp cd myapp
然后，在 myapp 文件夹中创建一个名为 app.js 的文件，该文件将包含我们的应用程序代码。
步骤 3：配置 Express.js 和 Pug
在 app.js 文件中，我们需要配置 Express.js 和 Pug。在文件的开头添加以下代码：
const express = require('express');
const app = express();
// 设置 Pug 作为模板引擎
app.set('view engine', 'pug');
app.set('views', './views');这段代码将 Express.js 和 Pug 配置为使用 Pug 作为模板引擎，并设置视图文件夹的路径。
步骤 4：创建 Pug 模板
现在我们需要创建一个 Pug 模板。在 myapp 文件夹中创建一个名为 views 的文件夹，并在该文件夹中创建一个名为 index.pug 的文件。在 index.pug 文件中，添加以下代码：
html
head
title= title
body
h1= message这个模板将生成一个 HTML 页面，其中包含一个标题和一个消息。
步骤 5：创建路由
现在我们需要创建一个路由，该路由将呈现我们的 Pug 模板。在 app.js 文件中，添加以下代码：
app.get('/', function (req, res) {
res.render('index', { title: 'Express.js and Pug', message: 'Welcome to my app!' })
});这个路由将呈现我们的 Pug 模板，并将标题和消息传递给模板。
步骤 6：启动应用程序
最后一步是启动我们的应用程序。在 app.js 文件中，添加以下代码：
app.listen(3000, function () {
console.log('App listening on port 3000!')
});这将启动我们的应用程序，并在控制台中打印一条消息。
完整的 app.js 文件如下所示：
// javascriptcn.com code example
const express = require('express');
const app = express();
// 设置 Pug 作为模板引擎
app.set('view engine', 'pug');
app.set('views', './views');
// 创建路由
app.get('/', function (req, res) {
res.render('index', { title: 'Express.js and Pug', message: 'Welcome to my app!' })
});
// 启动应用程序
app.listen(3000, function () {
console.log('App listening on port 3000!')
});当我们在浏览器中访问 http://localhost:3000 时，将呈现我们的 Pug 模板，其中包含标题和消息。
结论
在本文中，我们介绍了如何使用 Express.js 和 Pug 实现模板引擎。我们学习了如何配置 Express.js 和 Pug、创建 Pug 模板和路由，并启动我们的应用程序。希望这篇文章对你有所帮助，让你更好地了解如何使用 Express.js 和 Pug。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673b847639d6d08e88b3d451