创建可以服务于复杂网页的 HapiJs 服务器答案

【问题标题】：Creating HapiJs server that can serve complex web pages创建可以服务于复杂网页的 HapiJs 服务器
【发布时间】：2016-05-14 05:26:35
【问题描述】：

我刚刚开始学习 Node.js 和 hapi.js。我现在想要完成的是构建一个 REST Web 服务器，它还应该有一个用于配置和统计收集的 Web 界面。

我发现Inert 插件允许提供静态页面，据我了解，这限制了我加载由单个文件组成的单个网页。

但是，我不明白是否可以设置 hapi.js 以提供完整的动态网页，其中包含 css、js 和其正文中引用的其他文件。

我是不是走错了方向，否则我该如何设置我的场景？

【问题讨论】：

查看 Vision 以从模板动态呈现 HTML。您可以使用 Inert 提供 CSS 和 JS，因为它们通常只是静态文件。

标签： node.js rest hapijs

【解决方案1】：

您可以从指定目录提供多个静态文件。

刚刚试用了inert 和hapi，使用以下示例：

https://github.com/hapijs/inert#static-file-server

Inert 从给定目录提供多个静态文件没有问题，例如public。

因此，从指定目录提供多个静态 html、css、js 文件不会有任何问题。然后，您可以使用 Hapi 构建动态 JSON api，并由您的 js 客户端代码使用，从您的公共目录中的静态 js 文件提供服务。

如果您需要模板，在服务器端生成动态内容，hapi 可以开箱即用，请查看：

http://hapijs.com/tutorials/views

对不起，如果这不是你的意思，如果不是，请随时澄清:-)

希望有帮助！

【讨论】：

【解决方案2】：

vision 插件用于模板，这是我认为你所追求的。如果您想将 css 和 js 文件与您的页面捆绑在一起，您可以将它们放在一个公共目录中并使用 inert plugin 提供它。然后你只需要在你试图渲染的任何 html 文件中引用相对路径。

这是一个使用handlebars 的简单示例。 Inert 负责提供您的 css 和 js 文件，而视觉仍然呈现您的模板。

./index.js

var hapi = require('hapi');

var server = new hapi.Server();
server.connection({port: 5555});

server.register([require('vision'), require('inert')], (err) => {
    if(err){
        throw err; 
    }

    server.views({
        engines: {
            html: require('handlebars')
        },
        relativeTo: __dirname + '/',
        path: 'www'
    });

    var homeroute = {
        method: 'GET',
        path: '/',
        handler: (request, reply) => {
            reply.view('index', {name: 'cuthbert'});
        }
    };

    var publicassetsroute = {
        method: 'GET',
        path: '/public/{param*}',
        handler: {
            directory: {
                path: './public',
                listing: false,
                index: false
            }
        }
    };

    server.route(homeroute);
    server.route(publicassetsroute);

    server.start((err) => {
        console.log('server started -- ' + server.info.uri)
    });

});

www/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hapi Test</title>
    <link rel="stylesheet" href="../public/index.css">
</head>
<body>
    <h1>A Hapi Happy Test.</h1>
    <p>This is a test page. Woo!</p>
    <p>My name is {{name}}.</p>
</body>
</html>

public/index.css

p {
    color: blue;
}

【讨论】：