Hapi 框架与 React 技术的整合实践
前言
随着前端技术的不断发展，框架愈来愈丰富，React 作为前端框架的主流之一，其不断完善的生态圈已经广泛涵盖了前端开发的方方面面。而 Hapi 框架，则是一款自由度较高、易于扩展的 Node.js 后端框架，被广泛用于构建REST API 接口，其特点在于路由和插件系统以及生态系统的繁荣，使得 Hapi 成为 Node.js 后端开发人员的首选框架之一。本文将详细介绍 Hapi 框架与 React 技术的整合实践，并给出详细的学习和指导意义，还会提供相关的示例代码给读者详细了解这两个框架之间融合的方法和步骤。
Hapi 框架
Hapi，是一个由 Walmart 实验室开发的 Node.js Web 框架。它具有如下特点：
- 开箱即用：带有路由、请求处理、输入验证、缓存等常见的 Web 开发功能。
- 插件式架构：从现有库中选择安装需要的插件，而非整个框架。
- 任意模块替换：任何基础模块都可替换，并不需要扩展框架本身。
- 可扩展性：其 API 易于扩展和自定义，从而满足各种额外的需求。
- 安全性：默认集成了防止 SQL 注入、 XSS 攻击和其他安全问题的解决方案。
- 社区：活跃的社区，包括许多强大的插件。
Hapi 具有出色的性能，可用于构建RESTful API、Web 应用程序、IoT 等。其普及度逐渐递增，因为它使用路由和插件系统，这使得它可以轻松地扩展,并可用于实际的生产项目中。
React 技术
React 是一种用于构建用户界面的 JavaScript 库。它是简单、高效、灵活的，因此得到了广泛的应用。React 采用组件式开发，在组件的划分、功能实现等方面具有良好的封装和分离，使得其能够适应复杂的前端业务逻辑。React 的数据流的单向性，引导开发人员严格控制数据的流动，实现了很好的数据解耦和模块化，因而开发更加灵活、简单。
Hapi 和 React 整合
下面将介绍 Hapi 框架与 React 技术的整合实践，并给出相关的示例代码。
创建 Hapi 服务
首先要创建一个名为 server.js 的文件，这是一个简单的纯文本文件，Hapi 的服务器将在这个文件中被创建。在这个文件的顶部，只需要使用 require() 函数引入相应的依赖项。使用 npm install 安装 hapi、react 库。下面是完整的 server.js 代码：
----- ---- - ----------------------
----- ----- - -----------------
----- ---- - ----- -- -- -
----- ------ - -------------
----- -----
----- -----------
---
--------------
------- ------
----- ----
-------- --------- -- -- -
------ ------ ----------
-
---
----- ---------------
------------------- ------- -- ---- -----------------
--
-------------------------------- ----- -- -
-----------------
----------------
---
-------在代码中，使用了一个名为 Hapi 的 Node 模块，使用该模块设置端口值和主机地址。为了与 React 进行整合，我们将在路由处理逻辑中使用它，包含 / 路径的路由表示，当我们向主机发出 GET 请求时，服务器将返回“Hello”+ React 的字符串。
创建 React 组件
在上述代码中，已经引入了 React 库，并渲染React的组件。在这个示例中，我们只需要使用一个简单的 React 组件，其名称为 HelloWorld，该组件将渲染一个标题和一个问候语。下面是 HelloWorld 组件的完整代码：
------ ----- ---- --------
------ ------- -------- ------------ -
------ -
-----
--------- -----------
---------- -- --- ----- ---- -- ---- - ---------
------
--
-安装 Babel
为了让 React 代码能被服务器理解，我们还需要一些额外的配置。因为服务器是在 Node 上运行的，而不是在浏览器上，所以需要配置 Babel ，让服务器可以使用 JSX 和 ES6。因此，我们需要安装一个名为 "babel-cli" 的 Node 模块，作为全局安装，我们将其用于转换 React 代码并构建运行时环境。通过以下命令，就可以完成Babel的全局安装：
--- ------- -- ---------
创建 React 组件文件
接下来，我们需要创建一个名为 app.js 的文件，这是我们整合 React 的主要文件。在这个文件里我们将调用 onPreResponse 生命周期钩子来将 React 组件插入到路由响应中。你需要在 packageName/index.js 模块中引入 Hapi-react-views，并在 Hapi 服务器的 register 方法中使用它，代码如下。
------ ---- ---- -------------
------ ----- ---- --------
------ -------------- ---- -------------------
------ ---- ---- -------------
------ ----- ---- --------------
------ ------ ---- ---------------
------ -------------- ---- -------------------
------ --- ---- --------
----- ------ - -------------
----- -------
----- -----------
---
----- ---- - ----- -- -- -
----- -----------------
-
------- ------
-------- -
----- -
------ ------- -------
-------- -------
-
-
--
-
------- -----
-------- -
---------- -
---------------- -
-
------- ---------------------
----- -
-
------- --------- -----------
-
-
--
--------
-
-
-
--
-
------- ------
--
-
------- --------------
-
---
--------------
-------- -
---- ---------------------------
--
----------- ----------
----- --------
--------------- -
----------- --------
------- ----
--
--------- -----
---
--------------
------- ------
----- ----
-------- --------- -- -- -
------ --------------- -
------ ----- - -------
-------- ---------- -------
----- ---------------------------------- ----
-------- -
-------------- ---
------------ --
-------------- ---
--
---
-
---
----- ---------------
------------------- ------- --- ---------------------
--
-------------------------------- ----- -- -
-----------------
----------------
---
-------
安装 hapi-react-views
现在，我们需要下载 hapi-react-views，它是 Hapi 的另一个插件，用于从请求中渲染 React 组件的视图，将其真正地渲染到浏览器中。下面是命令行中的相应命令：
--- ------- ----------------
创建 HTML 开始界面
index.jsx文件中，我们需要创建用于跟踪服务器的 React 组件。具体来说，该组件需要接收标题、一些 HTML、一组 JSON 数据作为属性，并将其显示在屏幕上。我们将在 index.jsx 文件夹中创建这些文件，文件内容如下：
View：index.jsx
------ ----- ---- --------
------ ---------- ---- ---------------
------ ------- -------- ------- ------- -------- ----- -------- ------- -
------ -
------
------
---------
----------------------
------ ---------------
--
---------- -
---------- ------
------- - -----
-
----- -
-------- ------
------ -----
-------------- -----
-
------ -
------ -----
-------------- -----
-
--
--------
-------
------
---- -------------------------- ------- ---- -- --
-------
--------------------------
------- --------------------- - ---------------------------
--
--
-------
-------
--
-
View: HelloWorld.jsx
------ ----- ---- --------
------ ------- -------- ------------ -
------ -
-----
--------- -----------
---------- -- --- ----- ---- -- ---- - ---------
------
--
-
创建静态文件
根据我们项目的需求，需要添加一些静态文件和资源，这些文件和资源包括 index.html、static 文件夹和 App.js。 index.html 包含写在静态资源中的引用 app.js 的标签。相应的static/ 文件夹包含 app.js 和服务器提供的任何其他静态文件，我们使用 inert 插件来实现静态文件服务。示例代码如下：
------ ----- ---- --------
------ -------------- ---- -------------------
------ ------ ---- ---------------
------ ----- ---- --------------
------ ---- ---- -------------
------ -------------- ---- -------------------
------ ---- ---- -------
------ ---- ---- -------------
-- --------- --- -----------
------ --- ---- --------
----- ------ - -------------
----- -----
----- -----------
---
----- ----- - ----- -- -- -
----- ------------------
------- ------
--
-
------- -----
-------- -
---------- -
---------------- --
------- ---------------------
----- --
------- ----------- ----------
-- -
---- ------
---
-- ----------
--
--
--
-
------- ------
--
-
------- ---------------
-------- -
------------ -
------ --------
-------- -------
-
-
-
---
--------------
-------- -
---- ---------------------------
--
----------- ----------
----- --------
--------------- -
----------- --------
------- ----
--
--------- -----
---
--------------
------- ------
----- ----
-------- --------- -- -- -
----- -------- - - ------ ----- - ------- ------- ------ --
------ ------------------- ----------
-
---
--------------
-------------
------------------------
---------
-----------
--------------------------------------
-
-
---
----- ---------------
------------------- ------- --- ---------------------
--
-------------------------------- ----- -- -
-----------------
----------------
---
--------
创建 react-component
现在我们需要创建一个既作为 React 组件，也作为 App.js 的入口文件。我们可以将它称为 App.jsx。该组件将渲染 HelloWorld 组件(HELLO WORLD 字符)。示例代码如下：
View: App.jsx
------ ----- ---- --------
------ ---------- ---- ---------------
----- --- - -- -- -
------ -
---- ----------------
----------- ----------- --
------
--
--
------ ------- ----下一步是在 server.js 文件中使用 JSX 和 Babel 来渲染 NoMatch 组件。下面是 server.js 文件的新代码：
------ ---- ---- -------------
------ ----- ---- --------
------ -------------- ---- -------------------
------ ---- ---- -------------
------ ----- ---- --------------
------ ------ ---- ---------------
------ ---- ---- -------
------ -------------- ---- -------------------
------ --- ---- --------
------ -- ---- -----
----- ------ - -------------
----- ---------------- -- -----
----- ------------
---
----- ---- - ----- -- -- -
----- --------- -------
----- -----------------
------
-----
-------
-
------- ---------------
-------- -
----------- -------------------- -----------
--------- -----
---- -
----------- ------ ------
-
-
-
---
--------- ------ ---- ------------
----- -----------------
------- ----------------
-------- -
---- -
--------- ----
--
---------- -
---------------- --
------- ---------------------
----- -
-
---- ----
--------- ----
-------- ----
------ ---
-
-
-- ---------
-
-
---
--------------
-
------- ------
----- ------------
-------- -
----- ------------
-
--
-
------- ------
----- -------------------
-------- -
---------- -
----- -------------------- -------------
-
-
--
-
------- ------
----- ------------
-------- --------- -- -- -
------ ------------- -
------ ---- ---- --- --------
-------- ---- ---- --- --------- ---- ------ -- -------
------- ----
---
-
--
-
------- ------
----- ----
-------- --------- -- -- -
----- ------- - ---------------------------------- ----
------ --------------- -
------ ----- ------ ---- --------- ---- ----- --- ---- --- -------
--------
--------- --------------
------- -----
---
-
-
---
----- ---------------
------------------- ------- -- ---------------------
--
-------------------------------- ----- -- -
-----------------
----------------
---
-------
启动以下命令：
--- --- -----
结论
这就是一个简单的 Hapi 和 React 整合的例子。这个例子是以 React 组件为示例来演示整个流程的，它演示了将一个 React 组件嵌入到 Hapi 的服务端的各个部分中 - 路由、请求处理、视图模板等等。最终的输出是一个可用的服务，并提供了包含 React 的视图，我们希望这篇文章带给读者一些灵感，来进一步拓宽其应用的范围，帮助他们更好地理解这两个框架，以便产生更好的创意设计想法。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6711f4c2ad1e889fe201d08e