Hapi 框架中使用 vision-plugin 渲染视图-JavaScript中文网-JavaScript教程资源分享门户

Hapi 是一款流行的 Node.js Web 框架，它提供了很多有用的功能，包括路由、请求处理、输入验证等。在 Hapi 中，我们可以使用 vision-plugin 来渲染视图。这篇文章将介绍如何在 Hapi 中使用 vision-plugin 渲染视图。

安装 vision-plugin

要在 Hapi 中使用 vision-plugin，我们需要先安装它。可以使用 npm 命令来安装：

npm install @hapi/vision

注册 vision-plugin

安装好 vision-plugin 后，我们需要在 Hapi 服务器中注册它。可以使用 server.register() 方法来注册：

const Hapi = require('@hapi/hapi');
const Vision = require('@hapi/vision');

const server = Hapi.server({
    port: 3000,
    host: 'localhost'
});

async function start() {
    await server.register(Vision);
    console.log('Server running on %s', server.info.uri);
}

start();

在上面的代码中，我们先引入了 Hapi 和 Vision 模块，然后创建了一个 Hapi 服务器实例。接着，我们使用 server.register() 方法注册了 Vision 插件。最后，我们启动了服务器。

配置视图引擎

注册好 Vision 插件后，我们需要配置视图引擎。Hapi 支持多种视图引擎，包括 Handlebars、EJS、Pug 等。在这里，我们以 Handlebars 为例来配置视图引擎。

首先，我们需要安装 handlebars 模块：

npm install handlebars

然后，在注册 Vision 插件时，我们需要指定视图引擎的配置：

const Hapi = require('@hapi/hapi');
const Vision = require('@hapi/vision');
const Handlebars = require('handlebars');

const server = Hapi.server({
    port: 3000,
    host: 'localhost'
});

async function start() {
    await server.register(Vision);

    server.views({
        engines: {
            hbs: Handlebars
        },
        relativeTo: __dirname,
        path: 'views'
    });

    console.log('Server running on %s', server.info.uri);
}

start();

在上面的代码中，我们引入了 handlebars 模块，并在 server.views() 方法中配置了视图引擎。其中，engines 属性指定了视图引擎的类型和模块，relativeTo 属性指定了视图文件的根目录，path 属性指定了视图文件的路径。

创建视图文件

配置好视图引擎后，我们就可以创建视图文件了。在 Handlebars 中，视图文件使用 .hbs 扩展名。下面是一个简单的视图文件示例：

<!DOCTYPE html>
<html>
<head>
    <title>{{title}}</title>
</head>
<body>
    <h1>{{title}}</h1>
    <p>{{message}}</p>
</body>
</html>

在上面的代码中，我们使用 Handlebars 语法来定义模板。{{title}} 和 {{message}} 是占位符，它们的值将在渲染视图时由服务器动态生成。

渲染视图

创建好视图文件后，我们就可以在 Hapi 中使用 vision-plugin 来渲染视图了。Hapi 提供了 h.view() 方法来渲染视图。

以下是一个示例代码：

server.route({
    method: 'GET',
    path: '/',
    handler: (request, h) => {
        return h.view('index', {
            title: 'Hello, World!',
            message: 'Welcome to Hapi.js!'
        });
    }
});

在上面的代码中，我们定义了一个路由，当用户访问根路径时，将渲染 index.hbs 视图文件。h.view() 方法接受两个参数，第一个参数是视图文件名，第二个参数是渲染视图所需的数据。在这里，我们将 title 和 message 传递给视图文件，以便在视图中使用。

总结

在本文中，我们介绍了如何在 Hapi 中使用 vision-plugin 来渲染视图。我们首先安装了 vision-plugin，然后注册了它。接着，我们配置了视图引擎，并创建了视图文件。最后，我们使用 h.view() 方法来渲染视图。

使用 vision-plugin 渲染视图是 Hapi 中非常有用的功能，它让我们能够轻松地创建动态的 Web 页面。希望本文能够对你有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65bdf927add4f0e0ff791b1c