前言
Fastify 是一个高效、低开销的 Web 框架。它提供了可靠的开发体验，使得开发者能够快速构建出功能齐全的应用程序。同时，Ejs 是一个轻量级的模版引擎，提供了快速和简单的 HTML 页面渲染。在 Fastify 应用中使用 Ejs 模版引擎可以快速构建出具备视觉效果的 Web 应用。
在本文中，我们将介绍如何在 Fastify 应用中使用 Ejs 模版引擎，包括如何配置、渲染视图以及如何在视图中使用数据。
配置 Fastify 使用 Ejs
要在 Fastify 应用中使用 Ejs 模版引擎，需要先安装 Ejs。
npm install ejs --save
在 Fastify 使用 Ejs 模版引擎之前还需要进行一些配置。示例代码如下：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ---------------
----- ---- - ----------------
----- --- - ----------
-- ------
-------------------------------------- -
------- -
---- ---
--
----- -------------------- --------
---
-- --------------- ---- -------- -----------------
--------------------------------------- -
----- -------------------- ----------
---
在上述代码示例中，我们通过 require('point-of-view') 引入了 Fastify 插件 point-of-view 。然后再通过调用 app.register 方法，传入引擎和模板的相关配置项来将其应用于 Fastify 项目中。其中具体解释如下：
engine：配置将Fastify 中的模板与 Ejs 引擎关联。root：设置查找模板的路径。如果没有设置，默认值是process.cwd()。在传入该值时，建议使用_dirname导出绝对路径，可避免因为调用方式不一致而导致路径错误。
渲染 Ejs 模板
接下来是如何呈现 Ejs 模板。以下代码演示了如何在Fastify 中呈现 Ejs 模板：
app.get('/', function(req, reply) {
reply.view('/index.ejs', {
name: 'Joey',
age: 28
});
});在上述代码示例中，我们使用 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