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