Hapi 教程：使用 vision 实现服务器端渲染-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，服务器端渲染（Server-Side Rendering, SSR）被广泛应用于改善 SEO 和加速网站加载速度。Hapi 是一个 Node.js 开发框架，其提供了 vision 插件来支持服务器端渲染。本文将介绍如何使用 vision 实现服务器端渲染。

一、安装 Hapi 和 vision

在开始之前，需要先安装 Hapi 和 vision。可以使用 npm 安装：

npm install hapi vision --save

二、配置视图引擎

vision 可以支持多种模板引擎，本文以 handlebars（也称为 hbs）为例。在 Hapi 服务器配置中，需要为视图引擎指定模板文件路径和扩展名：

// javascriptcn.com 代码示例
const Hapi = require('hapi');
const Vision = require('vision');

const server = new Hapi.Server();

const options = {
  engines: {
    hbs: require('handlebars')
  },
  relativeTo: __dirname,
  path: 'views',
  layout: true
};

const start = async () => {
  await server.register(Vision);
  server.views(options);

  await server.start();
  console.log(`Server running at: ${server.info.uri}`);
};

start();

在这里，我们使用 register 方法将 vision 插件注册到 Hapi 服务器中，然后使用 views 方法配置视图引擎选项。其中，relativeTo 表示模板文件相对于项目根目录的路径，path 则表示模板文件所在目录的名称，layout 表示是否使用全局布局文件（默认为 false）。

注：__dirname 是 Node.js 中的全局变量，表示当前模块的目录名。

三、渲染视图

在 Hapi 中，视图可以通过 server.views 配置项中定义的文件路径直接访问。在处理请求时，可以使用 handler 中的 view 方法渲染模板：

// javascriptcn.com 代码示例
const Hapi = require('hapi');
const Vision = require('vision');

const server = new Hapi.Server();

const options = {
  engines: {
    hbs: require('handlebars')
  },
  relativeTo: __dirname,
  path: 'views',
  layout: true
};

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

const start = async () => {
  await server.register(Vision);
  server.views(options);

  await server.start();
  console.log(`Server running at: ${server.info.uri}`);
};

start();

在这里，我们定义了一个 GET 请求处理函数，使用 h.view 方法渲染了模板 home.hbs。模板中可以通过 {{title}} 和 {{message}} 占位符输出数据，这里的数据由 h.view 方法的第二个参数传递。

四、使用布局文件

在前面所示的代码中，没有使用布局文件。但是，通常情况下需要使用布局文件来为页面添加标题、页头、页脚等元素。在 handlebars 中，可以使用 {{> layout}} 指令来嵌入布局文件。

以下是简单的布局文件示例，命名为 layout.hbs：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>{{title}}</title>
</head>
<body>
  {{{content}}}
</body>
</html>

使用布局文件只需在视图渲染时指定 layout 选项：

// javascriptcn.com 代码示例
server.route({
  method: 'GET',
  path: '/',
  handler: (request, h) => {
    return h.view('home', {
      title: 'Hapi Demo',
      message: 'Welcome to Hapi!'
    }, {
      layout: 'layout'
    });
  }
});

这里的 layout 选项表示视图渲染时使用的布局文件名，不需要指定文件扩展名。

五、使用 partials

在 handlebars 中，partials 可以用于组织可重用的模板片段。定义 partials 很简单，只需将模板片段保存为单独的文件并以 .hbs 为扩展名，然后在视图中使用 {{> partial}} 指令来嵌入。

以下是一个名为 header.hbs 的 partials 示例：

// javascriptcn.com 代码示例
<header>
  <h1>{{title}}</h1>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>

加载 partials 时需要指定 partials 所在的目录，可以在视图选项中添加 partialsPath 属性：

// javascriptcn.com 代码示例
const options = {
  engines: {
    hbs: require('handlebars')
  },
  relativeTo: __dirname,
  path: 'views',
  layout: true,
  partialsPath: 'views/partials'
};

这里的 partialsPath 表示 partials 所在的目录名称，需要指定相对于 relativeTo 选项的路径。

使用 partials 时，直接在视图中使用 {{> header}} 指令即可：

{{> header}}
<h2>{{message}}</h2>

六、使用 helpers

在 handlebars 中，helpers 可以用于扩展模板语言，例如格式化日期、计算数值等操作。Hapi 视图引擎选项中可以使用 helpersPath 属性来指定 helpers 所在的目录，然后在视图中使用该 helper。

以下是一个名为 uppercase.js 的 helper 示例：

module.exports = function (text) {
  return text.toLocaleUpperCase();
};

在视图引擎选项中指定 helpers 目录：

// javascriptcn.com 代码示例
const options = {
  engines: {
    hbs: require('handlebars')
  },
  relativeTo: __dirname,
  path: 'views',
  layout: true,
  partialsPath: 'views/partials',
  helpersPath: 'views/helpers'
};

使用 helper 时，可以在视图中使用 {{uppercase message}} 指令：

<h2>{{uppercase message}}</h2>

七、总结

Hapi 提供了 vision 插件来支持服务器端渲染，并支持多种常用的模板引擎、partials 和 helper，可以满足大多数服务器端渲染需求。在使用 Hapi 进行服务器端渲染时，需要配置正确的视图引擎选项，然后使用 handler 中的 view 方法渲染视图。示例代码说明了如何在 Hapi 中使用视图引擎、partials 和 helper，可以供读者参考。

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