前端开发中，我们通常需要处理复杂的业务逻辑以及繁琐的 UI 组件开发，如何能够快速高效地完成这些工作，是我们需要面对和解决的问题。
本文将介绍如何用 Hapi.js 和 React 快速打造一个完整的前后端应用架构，避免重复编写组件带来的 bug，提高开发效率。
Hapi.js 介绍
Hapi.js 是一个用于构建 Node.js 应用程序的框架。它的设计理念是通过清晰的分层结构来支持复杂的 Web 应用程序。与 Express.js 相比，Hapi.js 提供了更强大的插件系统和更好的文档。
Hapi.js 安装
第一步：初始化项目
在命令行中进入你的项目目录，执行以下命令：
--- ----
按照提示填写项目信息。
第二步：安装 Hapi.js
在命令行中执行以下命令：
--- ------- ---- ------
Hapi.js 示例：创建一个简单的服务器
----- ---- - ----------------
----- ------ - -------------
----- -----
----- -----------
---
--------------
------- ------
----- ----
-------- --------- -- -- -
------ ------ -------
-
---
----- -------- ------- -
----- ---------------
------------------- ------- --- ---------------------
-
--------通过以上代码，我们创建了一个简单的服务器，当访问 http://localhost:3000 时，会返回 Hello World!。
React 介绍
React 是 Facebook 开发的一款前端 UI 框架，它采用了组件化的思想，将 UI 页面拆分成一个个组件，每一个组件都拥有自己的生命周期、状态和 props。
React 安装
第一步：安装 Node.js 和 npm
在命令行中输入以下命令：
---- -------- --- --------
如果没有安装，请前往 Node.js 官网 下载和安装。
第二步：创建 React 项目
在命令行中进入你的项目目录，执行以下命令：
--- ---------------- ------ -- ------ --- -----
“my-app” 为项目名称，执行以上命令会创建一个 React 项目并启动。在浏览器中访问 http://localhost:3000 即可查看。
React 示例：创建一个简单的组件
------ ----- ---- --------
----- ---------- ------- --------------- -
-------- -
------ -
-----
---------- -----------------------
------
--
-
-
------ ------- -----------通过以上代码，我们创建了一个简单的组件，当组件被渲染时，在页面上会显示一个包含 “Hello, [name]!” 的标题，其中 [name] 是通过 props 传入的参数。
如何用 Hapi.js 和 React 打造完整的应用架构
接下来，我们将介绍如何用 Hapi.js 和 React 打造一个完整的前后端应用架构。
配置 Hapi.js 服务器
首先，在项目根目录下创建一个新的文件夹 “server”，然后在该文件夹中创建一个 “index.js” 文件用于启动 Hapi.js 服务器。
在 “index.js” 文件中输入以下代码：
----- ---- - ----------------
----- ---- - ----------------
----- ----- - -----------------
----- ------ - -------------
----- ------------
----- -----
------- -
------ -
----------- -------------------- --------------------
-
-
---
----- -------- ------- -
----- -----------------------
--------------
------- ------
----- ------------
-------- -
---------- -
----- ----
---------------- -----
------ -----
-
-
---
----- ---------------
------------------- ------- --- ---------------------
-
--------在以上代码中，我们创建了一个 Hapi.js 服务器，并使用 Inert 插件来提供静态文件服务。由于 React 项目的编译文件放在 “frontend/build” 目录下，因此我们将路由路徑设置为 “/{param*}”，同时设置目录为 “frontend/build”。
编写 React 组件
在 React 项目中，我们需要编写一个组件，用于向服务器发送请求并获取响应。
在 “src” 文件夹中创建一个名为 “Backend.js” 的文件，输入以下代码：
------ ------ - --------- - ---- --------
----- ------- ------- --------- -
----- - - --------- -- --
------------------- -
---------------------
--------- -- --------------- --------- ----------- ---
---------- -- ------------------
-
-------------- - ----- -- -- -
----- -------- - ----- --------------------
----- ---- - ----- ----------------
-- ---------------- --- ---- -
----- --------------------
-
------ -----
--
-------- -
------ -
-- ----------------------- ------------------- -----
--
-
-
------ ------- --------在以上代码中，我们使用了 React 的生命周期函数 componentDidMount()，在组件被挂载时向服务器发送请求。通过 fetch() 方法，我们向服务器发送了一个 GET 请求，然后从响应中读取 json 数据，最后将响应内容保存在组件的状态中。
创建 Hapi.js API
在 “server” 文件夹中创建一个新的子文件夹 “api”，然后在该文件夹中创建一个 “index.js” 文件用于处理 API 请求。在文件中输入以下代码：
----- ---- - ----------------
----- ------ - -------------
----- ------------
----- ----
---
--------------
------- ------
----- -------------
-------- --------- -- -- -
------ - -------- ------ ---- -------- --
-
---
------------ - ----- -- -- -
----- ---------------
------------------- ------- --- ---------------------
--
-------------- - -------在以上代码中，我们创建了一个 GET 请求的路由，当客户端向 “/api/hello” 发送请求时，服务器会返回一个 JSON 对象，其中包含一个 “express” 属性。
集成 React 组件和 Hapi.js 服务器
在 React 项目的根目录中打开 “package.json” 文件，在该文件中添加以下命令：
---------- - -------- ---- --- ------------ - --- --- -------------- --------------- ----- ----------------- --------------- --- -------- -- --- ------ --
在以上代码中，我们添加了一个新的命令 npm run start:server，用于启动 Hapi.js 服务器。
然后，在 React 项目中，我们打開 "src/App.js" 文件，输入以下代码：
------ ------ - --------- - ---- --------
------ ---- ---- -------------
------ ------------
------ ------- ---- ------------
----- --- ------- --------- -
-------- -
------ -
---- ----------------
------- -----------------------
---- ----- ---- - -------------------- ---------- --
--- ----------------------------- -- ----------
---------
-------- --
------
--
-
-
------ ------- ----在以上代码中，我们将 Hapi.js API 和 React 组件组合在一起，从而实现一个完整的前后端应用架构。
运行应用
接下来，我们必须分别运行前端和后端：
--- --- ------------
等待服务器启动…
--- -----
然后打开浏览器，访问：http://localhost:3000
现在，我们已经成功地创建了一个基于 Hapi.js 和 React 的前后端应用程序，具有高效、可扩展和易维护的优点，并防止了组件的重复编写带来的 bug。
总结
本文介绍了如何使用 Hapi.js 和 React 快速打造一个完整的前后端应用架构。通过清晰的分层结构和插件系统，Hapi.js 为我们提供了更好的文档和更强大的支持。React 采用了组件化的思想，使得应用程序的开发效率更高。通过集成 React 组件和 Hapi.js API，我们可以创建一个完整的前后端应用程序，具有高效、可扩展和易维护的优点，并防止了组件的重复编写带来的 bug。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6535d05e7d4982a6ebd6c1ad