介绍
在使用 JavaScript 进行 Web 开发时，我们通常需要使用一些模板引擎来处理我们的 HTML 模板，把动态数据注入到模板中生成动态页面。 Handlebars 就是其中一种非常流行的模板引擎，它提供了多种功能，如数据绑定、条件逻辑、循环迭代等，可以极大地简化开发人员的工作并提高开发效率。
Fastify 是一个快速、低开销、易于扩展的 Node.js Web 框架，与其他 Node.js Web 框架相比，它具有更高的性能和更低的内存消耗。在 Fastify 中使用 Handlebars 模板引擎可以帮助我们实现丰富的动态页面。
本文介绍如何在 Fastify 中使用 Handlebars 模板引擎。
安装
在 Fastify 中使用 Handlebars 模板引擎需要安装两个 npm 包：fastify 和 handlebars。
npm install fastify handlebars
创建 Fastify 应用
首先创建一个新的 Fastify 应用，并设置 Handlebars 的默认视图目录。
// javascriptcn.com 代码示例
const fastify = require('fastify')()
const handlebars = require('handlebars')
fastify.register(require('fastify-static'), {
root: __dirname,
prefix: '/public/'
})
fastify.decorate('view', (page, data) => {
const pagePath = `views/${page}.hbs`
const html = handlebars.compile(fs.readFileSync(pagePath, 'utf8'))(data)
return html
})
fastify.get('/', (req, res) => {
res.send(fastify.view('index', { title: 'Home' }))
})
fastify.listen(3000, (err) => {
if (err) {
fastify.log.error(err)
process.exit(1)
}
})在上述代码中，我们使用 fastify.register() 方法注册了 fastify-static 插件，以便加载一些静态文件，像图片、样式和 JS 文件等。
然后我们使用 fastify.decorate() 方法创建了一个新的插件，它提供了一个名为 view 的函数，该函数接收两个参数：页面名称和数据。在 view 函数内部，我们首先获取视图文件的完整路径，然后使用 handlebars.compile() 方法编译视图模板，并以 data 参数注入动态数据。最后，我们返回经过处理的 HTML 字符串。
在 Fastify 的 GET 路由中，我们使用 fastify.view() 方法渲染 index 视图，并以 { title: 'Home' } 作为参数传递给视图。
创建 Handlebars 模板
接下来我们需要创建一个 Handlebars 模板，这个模板是我们要在 Fastify 应用中渲染的 HTML 页面。
在项目根目录创建一个名为 views/ 的目录，并在这个目录下创建一个名为 index.hbs 的文件。在 index.hbs 文件中输入以下代码：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{{title}}</title>
</head>
<body>
<h1>{{title}}</h1>
<p>Welcome Home!</p>
</body>
</html>模板代码非常简单，其中使用 {{title}} 表示动态插入数据。
运行 Fastify 应用
最后一步是启动 Fastify 应用，运行以下命令：
node index.js
现在你可以在浏览器中打开 http://localhost:3000，看到 Fastify 的默认首页。页面上会显示一个标题，以及一个简单的欢迎信息。
在页面源代码中，你会看到以下HTML代码：
// javascriptcn.com 代码示例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Home</title> </head> <body> <h1>Home</h1> <p>Welcome Home!</p> </body> </html>
你可以看到，模板中的 {{title}} 已经被替换成了 Home，这是我们通过 fastify.view() 方法传递给视图的数据。
总结
在本文中，我们介绍了如何在 Fastify 中使用 Handlebars 模板引擎来生成动态页面。我们学习了如何创建一个 Fastify 应用，设置默认视图目录，创建 Handlebars 模板，以及使用 fastify.view() 方法渲染视图。
Handlebars 可以大大简化 Front-end 开发工作。我们推荐你着手学习一下 Handlebars，并在你的项目中尝试使用它。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65475b3e7d4982a6eb1b8e74