介绍
在使用 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 的默认视图目录。
-- -------------------- ---- -------
----- ------- - --------------------
----- ---------- - ---------------------
------------------------------------------- -
----- ----------
------- ----------
--
------------------------ ------ ----- -- -
----- -------- - -------------------
----- ---- - -------------------------------------------- --------------
------ ----
--
---------------- ----- ---- -- -
------------------------------ - ------ ------ ---
--
-------------------- ----- -- -
-- ----- -
----------------------
---------------
-
--在上述代码中，我们使用 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 文件中输入以下代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------------------ ------- ------ ------------------ ---------- --------- ------- -------
模板代码非常简单，其中使用 {{title}} 表示动态插入数据。
运行 Fastify 应用
最后一步是启动 Fastify 应用，运行以下命令：
node index.js
现在你可以在浏览器中打开 http://localhost:3000，看到 Fastify 的默认首页。页面上会显示一个标题，以及一个简单的欢迎信息。
在页面源代码中，你会看到以下HTML代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------------- ------- ------ ------------- ---------- --------- ------- -------
你可以看到，模板中的 {{title}} 已经被替换成了 Home，这是我们通过 fastify.view() 方法传递给视图的数据。
总结
在本文中，我们介绍了如何在 Fastify 中使用 Handlebars 模板引擎来生成动态页面。我们学习了如何创建一个 Fastify 应用，设置默认视图目录，创建 Handlebars 模板，以及使用 fastify.view() 方法渲染视图。
Handlebars 可以大大简化 Front-end 开发工作。我们推荐你着手学习一下 Handlebars，并在你的项目中尝试使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65475b3e7d4982a6eb1b8e74