简介
在 web 前端开发中，经常需要在后端生成 HTML 页面来展示数据。@hapi/vision 是一个视图管理器，可以用于在 hapi 框架中生成和渲染模板。
安装
可以使用 npm 命令安装 @hapi/vision:
npm install @hapi/vision
使用方法
注册视图管理器
首先，需要在 hapi 服务器上注册视图管理器。可以像下面这样进行配置：
const vision = require('@hapi/vision'); const server = Hapi.server({ ... }); await server.register(vision);
配置模板引擎
需要在视图管理器中配置使用的模板引擎。目前支持的引擎有 ejs、handlebars、hogan、jade、marko、mustache、nunjucks、pug、swig 和 twig。例如，配置 ejs 引擎：
server.views({ engines: { ejs: require('ejs') }, relativeTo: __dirname, path: 'templates' });
在这里，需要指定路径来存放模板文件。本例中，默认情况下，@hapi/vision 会从项目根目录下的 views 目录中查找模板。
响应请求
视图管理器可以直接在路由处理程序中使用。下面是一个简单的例子：
-- -------------------- ---- ------- -------------- ------- ------ ----- ---- -------- --------- -- -- - ------ --------------- - ------ ----------- -------- -------- -- --- ---------- --- - ---展开代码
在这里，返回的响应实例通过 h.view 方法生成。在视图管理器中，view 方法会在特定的模板中根据提供的数据生成 HTML。
示例代码
附加信息
这是一个简单的例子，在响应中返回了一个附加信息：
-- -------------------- ---- ------- ----- ----------------------------------------- -------------- -------- - ---- -------------- -- ----------- ---------- ----- ----------- --- -------------- ------- ------ ----- ---- -------- --------- -- -- - ------ --------------- - ------ ----------- -------- -------- -- --- ---------- --- - --- ----- --------------- ------------------- ------- -- ---- -----------------展开代码
范例代码
<html> <head> <title>{{title}}</title> </head> <body> <h1>{{message}}</h1> </body> </html>
在这里，我们只需要在 HTML 中嵌入必要的变量即可。这个例子中，我们使用 ejs 引擎，并在模板中使用了两个变量 title 和 message。这些变量会在对应的控制器中进行设置，从而被视图管理器生成为相应的 HTML。
结论
本文介绍了如何使用 @hapi/vision，来生成和渲染模板。视图管理器是 web 开发中十分重要的一部分，可以大大简化生成 HTML 的流程。通过实践，我们可以快速上手使用视图管理器，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/hapi-vision
