标题：Hapi 框架中使用 vision 插件渲染视图：详细教程
在前端开发中，我们经常需要将后台数据渲染到网页上展示给用户，这时候就需要使用视图引擎来进行页面渲染。在 Hapi 框架中，我们可以使用 vision 插件来方便地渲染视图。本文将详细介绍如何在 Hapi 框架中使用 vision 插件渲染视图。
一、安装与配置 vision 插件
在使用 vision 插件之前，我们需要先安装和配置它。在终端中输入以下命令：
npm install @hapi/vision
安装完成之后，在应用程序中注册 vision 插件并进行配置：
-- -------------------- ---- -------
----- ---- - ----------------------
----- ------ - ------------------------
----- ------ - -------------
----- -----
----- -----------
---
----- ---- - ----- -- -- -
----- ------------------------
--------------
-------- -
----- ---------------------
--
----------- ----------
----- -------
---
----- ---------------
------------------- ------- --- ---------------------
--
-------代码解释：
- 使用
require('@hapi/vision')引入 vision 插件。 - 注册插件：
await server.register(Vision)。 - 使用
server.views()方法配置视图引擎，可以使用多个视图引擎，本文以 handlebars 引擎为例。其中relativeTo字段表示视图文件路径的基本路径，path字段表示相对于relativeTo的视图文件路径。
二、使用视图引擎渲染视图
在 Hapi 框架中，渲染视图的操作是在路由处理函数中进行的。下面是一个简单的路由处理函数示例：
-- -------------------- ---- -------
--------------
------- ------
----- ----
-------- --------- -- -- -
------ --------------- -
------ ----
---
-
---该路由处理函数用于处理 HTTP GET 方法的根路径请求。在 handler 方法中，使用 h.view() 方法来渲染视图。其中，index 表示视图文件名，该文件位于 views 文件夹下，后缀名为 .html。{title: '首页'} 是向视图传递的数据，可以在视图文件中使用模板语法来动态渲染数据。
下面是一个简单的视图文件示例：
-- -------------------- ---- -------
--------- -----
------
------
------------------------
-------
------
------------------
----
------- -------
-----------------
---------
-----
-------
-------该视图文件中包含一个标题标签和一个列表标签，页面标题和列表内容都是使用模板语法来渲染的。{{title}} 和 {{items}} 分别对应路由处理函数中传递的数据。
三、视图的布局和模板继承
在实际开发中，我们通常需要使用布局来统一网站的风格，或者使用模板继承来提高视图重用性和可维护性。Hapi 框架中同样支持这些功能。
1. 视图的布局
在 Hapi 框架中，可以使用布局视图来实现网站的统一风格和结构。下面是一个布局视图 layouts/main.html 的示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------
-------
------
-------------
-------
-------该视图中包含一个 {{{content}}} 标记，用于显示子视图的内容。在子视图中指定布局视图可以通过以下方式实现：
-- -------------------- ---- -------
--------------
------- ------
----- ----
-------- --------- -- -- -
------ --------------- -
------ -----
-------- ------ -------
-- -
------- ------
---
-
---在 h.view() 方法中，使用 {layout: 'main'} 对象指定要使用的布局视图，'main' 参数即为布局视图文件名。
2. 视图的模板继承
在 Hapi 框架中，支持使用视图的模板继承来提高视图的重用性和可维护性。与布局视图不同的是，模板继承是建立在视图之间的继承关系上的。下面是一个父视图 views/layouts/default.html 的示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------
-------
------
--- --------
----------
--- --------
-------
-------该视图中包含三个标记：{{> header}}、{{{body}}} 和 {{> footer}}。其中 {{> header}} 和 {{> footer}} 标记用于引入不同视图文件中定义的头部和底部，{{{body}}} 标记用于显示子视图的内容。在子视图中继承父视图可以通过以下方式实现：
-- -------------------- ---- -------
---- -----------------
---------- ---------
-----
------------
---------- --------
--------------
------------在子视图的开头使用 {{!< layouts/default}} 引入父视图文件，然后使用 {{#content "title"}} 和 {{#content "body"}} 标志分别定义子视图的标题和内容，这些内容会被插入到父视图对应的标记中。
四、总结
使用 vision 插件可以方便地将数据渲染到模板中，使网页的显示更加直观美观。本文主要介绍了 vision 插件的安装与配置、使用视图引擎渲染视图，以及通过布局视图和模板继承来提高视图的重用性和可维护性。希望这篇文章能够对初学 Hapi 框架的开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a4690148841e98940d899a