前言
Fastify 是一个高效、低开销的 Web 框架。它提供了可靠的开发体验，使得开发者能够快速构建出功能齐全的应用程序。同时，Ejs 是一个轻量级的模版引擎，提供了快速和简单的 HTML 页面渲染。在 Fastify 应用中使用 Ejs 模版引擎可以快速构建出具备视觉效果的 Web 应用。
在本文中，我们将介绍如何在 Fastify 应用中使用 Ejs 模版引擎，包括如何配置、渲染视图以及如何在视图中使用数据。
配置 Fastify 使用 Ejs
要在 Fastify 应用中使用 Ejs 模版引擎，需要先安装 Ejs。
--- ------- --- ------
在 Fastify 使用 Ejs 模版引擎之前还需要进行一些配置。示例代码如下：
----- ------- - -------------------
----- --- - ---------------
----- ---- - ----------------
----- --- - ----------
-- ------
-------------------------------------- -
------- -
---- ---
--
----- -------------------- --------
---
-- --------------- ---- -------- -----------------
--------------------------------------- -
----- -------------------- ----------
---
在上述代码示例中，我们通过 require('point-of-view') 引入了 Fastify 插件 point-of-view 。然后再通过调用 app.register 方法，传入引擎和模板的相关配置项来将其应用于 Fastify 项目中。其中具体解释如下：
engine：配置将Fastify 中的模板与 Ejs 引擎关联。root：设置查找模板的路径。如果没有设置，默认值是process.cwd()。在传入该值时，建议使用_dirname导出绝对路径，可避免因为调用方式不一致而导致路径错误。
渲染 Ejs 模板
接下来是如何呈现 Ejs 模板。以下代码演示了如何在Fastify 中呈现 Ejs 模板：
------------ ------------- ------ -
------------------------ -
----- -------
---- --
---
---在上述代码示例中，我们使用 reply.view 方法来呈现 Ejs 模板。reply.view 方法中第一个参数是模板文件的路径。{name: 'Joey', age: 28} 是一个对象，将通过模版引擎传递到模板中。
为了配合以上代码获得更好的结果，你需要在项目根目录下的 views 目录中新建一个 index.ejs 文件。
--------- -----
----- ----------
------
----- ----------------
-------------- --- ---------------
-------
------
--------- -------- ------------
----- ---- --- --- ---- ------
----- --- --- --- --- ------
-------
-------在模板中使用 <%= name %> 和 <%= age %> 标记来引用 reply.view 函数中传递的数据参数。
在 Ejs 模板中使用数据
除了上面例子中的语法，Ejs 模板还支持许多其他的用法，例如条件语句、循环语句、数据的格式化等等。下面我们通过简单的演示来体验一下所有功能。
----- --- - ---------------------
----- --- - ---------------
----- ---- - ----------------
----- ----- - -
------ -------- ------ -------
------ --------- ------ ----------
------ -------- ------ ---------
--
-------------------------------------- -
------- -
---- ---
--
----- -------------------- --------
---
------------ -------- ----- ------ -
----- ----------- - ------ ----------- ------------- - ------------ - --
----------------------- -
------ ---- ---------
---- --
----- -
-
----- ---- ------
----------- --------
--
-
----- ----- -----
----------- -------
-
-
----- --------- ------
----------- ---------
--
--
------------ ------------
------ -
- ----- ------ ---- -- --
- ----- ------- ---- -- --
- ----- ------- ---- -- --
--
------ -
- ----- -------- ------ ----- --
- ----- --------- ------ -------- --
- ----- -------- ------ -------- --
--
---
---在上述代码示例中，我们创建了一个数组，其中包含不同类别的水果。然后，在“index.ejs”模板中使用了demo，包括以下内容：
- 输出数组中的随机水果和其颜色。
- 使用
each迭代器将数据渲染到表中。 - 使用条件语句输出给定值或默认值。
在新建的 index.ejs 文件中，示例代码如下：
--------- -----
------
------
----- -----------------
---------- ----- ----------
-------
------
------- ----- -------
-- -- ------------- - --
------ ------ ----- -- ----------- ---------------- ----------------
------ ----- -- --- ------ ----- -- ----------- ----------------- ----------------
-- - ---- - --
----- ------- ------
-- - --
------- ----- ---------
-------
----
--- ----------------------
--- ----------------------------------
-----
-- --------------------------- - --
----
--- ---------------- --------- -------
--- ---------------------- --------------- -------
-----
-- -- --
--------
------- ----- ---------
-------
----
-------------
------------
-----
-- ---------------------------- - --
----
------- --------- -------
------- -------- -------
-----
-- -- --
--------
-------
-------通过一些简单的代码实例，您已了解了如何在 Fastify 中使用 Ejs 模板引擎，以呈现动态数据的交互页面。
总结
Fastify 和 Ejs 都是成熟的技术，使得开发人员能够快速构建出具备良好视觉效果的 Web 应用。在 Fastify 应用中使用 Ejs 模版引擎不仅可以减轻开发工作量，也可以大大提高应用程序的效率。在本文中，我们介绍了如何完整地配置 Fastify 和 Ejs，以及如何呈现动态数据的交互页面。我们相信这些示例代码可以帮助你进一步学习和使用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/647c727f968c7c53b077c66c