在前端开发中，模板渲染是一个常见的任务。Fastify 是一个快速、低开销、基于 Node.js 的 Web 框架，而 Pug 是一个功能强大的模板引擎。本文将介绍如何使用 Fastify 和 Pug 实现模板渲染，并提供示例代码。
安装 Fastify 和 Pug
在开始之前，需要先安装 Fastify 和 Pug。可以使用 npm 或 yarn 安装它们：
--- ------- ------- ---
或者
---- --- ------- ---
创建 Fastify 应用程序
首先，我们需要创建一个 Fastify 应用程序。这可以通过以下代码完成：
----- ------- - -------------------- ---------------- --------- ------ -- - ----------------- -------- -- -------------------- ----- -------- -- - -- ----- ----- --- ------------------- --------- -- ------------ --
这段代码创建了一个 Fastify 应用程序，并在根路径上定义了一个 GET 路由处理程序。当访问根路径时，服务器将返回 'Hello World!'。
配置 Pug
接下来，我们需要配置 Pug。我们需要告诉 Pug 模板引擎在哪里查找模板文件，并告诉 Fastify 如何使用 Pug 渲染模板。这可以通过以下代码完成：
----- ---- - ---------------
----- ------- - --------------------
----- --- - --------------
------------------------------------------ -
------- -
---- ---
--
----- -------------------- --------
--
---------------- --------- ------ -- -
------------------- - ------ -------- - ---- --
--
-------------------- ----- -------- -- -
-- ----- ----- ---
------------------- --------- -- ------------
--这段代码使用 point-of-view 插件注册了 Pug 模板引擎，并告诉 Fastify 在 views 目录中查找模板文件。然后，我们在根路径上定义了一个 GET 路由处理程序，它使用 reply.view() 方法渲染名为 index 的模板，并将 { title: 'Fastify + Pug' } 作为数据传递给模板。
创建 Pug 模板
现在，我们需要创建一个 Pug 模板。在 views 目录中创建一个名为 index.pug 的文件，并添加以下代码：
------- ----
----
----
------ -----
----
--- -----
- ------- -- --------这个模板非常简单，它只是在页面上显示一个标题和一段欢迎文本。
运行 Fastify 应用程序
现在，我们已经完成了所有设置，可以运行 Fastify 应用程序了。在终端中运行以下代码：
---- ------
然后，在浏览器中访问 http://localhost:3000，你应该能够看到一个包含标题和欢迎文本的页面。
总结
在本文中，我们介绍了如何使用 Fastify 和 Pug 实现模板渲染。我们首先创建了一个 Fastify 应用程序，然后配置了 Pug 模板引擎，并创建了一个简单的 Pug 模板。最后，我们运行了 Fastify 应用程序并在浏览器中查看了渲染的页面。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65542f99d2f5e1655dde06af