Hapi 是一款 Node.js 框架，它提供了良好的路由管理、认证和错误处理等功能。在许多 Web 应用程序中，视图和模板是必不可少的。Hapi 提供了强大且易于使用的视图和模板引擎的支持，以简化前端开发的工作。
视图和模板
在 Web 应用程序中，视图是用户看到的内容。通常，页面是由 HTML、CSS 和 JavaScript 组成的。要在 Hapi 中使用视图，我们需要在项目中安装视图引擎。
模板则是帮助我们动态生成页面的工具。在一个模板中，变量用花括号括起来，例如 {{ variable }}。当渲染模板时，这些变量会被实际的值替换。Hapi 支持多个模板引擎，例如 Handlebars、EJS 和 Jade 等。
安装和配置
首先，我们需要使用 Node 包管理器（npm）将 Hapi 和视图引擎安装在项目中。以 Handlebars 为例，使用以下命令安装：
npm install hapi handlebars hapi-handlebars
其中，hapi-handlebars 是 Hapi 和 Handlebars 之间的桥梁。
安装完成后，在服务器启动时配置视图引擎：
-- -------------------- ---- -------
--------------
-------- -
----- ---------------------
--
----------- ----------
----- --------
------- -----
----------- ----------------
------------- ----------------
--以上代码告诉 Hapi，我们使用 Handlebars 作为视图引擎。视图文件存储在 views 目录下，使用布局文件和部分文件；相对路径为 __dirname。这里我们使用 .html 作为视图的扩展名。
渲染视图
渲染视图是处理 HTTP 请求时的一个关键步骤。使用 Hapi 和 Handlebars，我们可以编写以下代码：
server.route({
method: 'GET',
path: '/',
handler: (request, h) => {
return h.view('home', { title: 'Welcome' })
}
})这里 h.view() 方法将渲染 views/home.html 文件，并传入 title 变量。注意，我们不需要指定视图的扩展名。
如果需要手动渲染视图，可以使用以下代码：
const handlebars = require('handlebars')
const context = { title: 'Welcome' }
const html = handlebars.compile('{{title}}')({title: context.title})这里我们使用 handlebars.compile() 方法编译模板，在模板中使用变量，使用传入的上下文渲染模板。
使用布局和部分
在 Web 应用程序中，页面布局是统一的，而部分可以在多个页面中重用。Hapi 和 Handlebars 支持布局和部分文件。
在上述配置中，我们指定了布局文件和部分文件的路径。接下来，我们可以在视图文件中使用以下代码包含布局和部分：
{{> header }}
{{!< layout }}
<h1>{{ title }}</h1>
<p>Welcome to my website!</p>
{{> footer }}这里，{{!< layout }} 表示将页面插入到布局中。{{> header }} 和 {{> footer }} 表示插入部分文件。
总结
Hapi 框架允许开发者使用多个模板引擎。在此文中，我们使用 Handlebars 作为示例引擎。无论你使用哪一种引擎，其基本功能和用法都是类似的。
最终代码示例如下：
-- -------------------- ---- -------
----- ---- - ---------------
----- ------ - -------------
----- -----
----- -----------
--
--------------
-------- -
----- ---------------------
--
----------- ----------
----- --------
------- -----
----------- ----------------
------------- ----------------
--
--------------
------- ------
----- ----
-------- --------- -- -- -
------ -------------- - ------ --------- --
-
--
----- -------- ----- -- -
----- --------------
------------------- ------- --- --------------------
-
-------------------------------- --- -- -
----------------
---------------
--
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647c0159968c7c53b073a27e