前言
在前端领域，React 已经成为了非常流行的框架之一，而在后端领域，Hapi.js 也是备受推崇的 Node.js Web 框架之一。本文主要介绍如何使用 Hapi.js 和 React 实践构建基于 Node.js 的后台管理系统。我们将从搭建项目脚手架开始，完成后台接口的编写和前端页面的开发，最终实现一个完整的后台管理系统。
项目结构
我们的项目目录结构如下所示：
- --- ------ - --- --- - --- ------ - --- ------------ - --- ----------------- - --- --- --- ------ - --- --- - --- ------------ - --- --- --- ------------ --- ---
可以看到我们将项目分为 client 和 server 两个部分，其中 client 目录下存放的是前端代码，server 目录下存放的是后台服务端代码。
后端开发
我们先来看一下后端的实现。在 server 目录下创建 src 目录，然后创建 index.js 文件，代码如下：
---- --------
----- ---- - ----------------
----- ------ - --------------------
----- ---- - ----- -- -- -
----- ------ - --- -------------
----- -----
----- -----------
---
---------------------
----- ---------------
------------------- ------- --- ---------------------
--
-------------------------------- ----- -- -
-----------------
----------------
---
-------这里我们首先引入了 Hapi.js 和我们所编写的路由表，然后创建了一个 Hapi 服务器实例，将路由表交给 server 处理。最后我们使用 server.start() 开启服务，并将服务的监听 url 输出到控制台。
在 server 目录下创建 routes.js 文件，我们将在这里编写路由。代码如下：
----- ------ - -
-
------- ------
----- ---------
-------- --------- -- -- -
------ -
-
--- --
------ ----- ---
------- ------- --
--
-
--- --
------ ----- ---
------- ------- --
--
-
--- --
------ ----- ---
------- ------- --
-
--
-
-
--
-------------- - -------这里我们定义了一个 GET 请求，路径为 /books，返回了一个包含三本书的 json 数组数据。
到此为止，我们的后台服务端就已经完成了。
前端开发
接下来我们开始前端开发。我们使用了 webpack 和 babel 来搭建前端开发环境，在 client 目录下创建 package.json 文件，添加如下代码：
-
------- -------------------
---------- --------
-------------- ---
------- -----------
--------------- -
------------- ---------
-------------- ---------
------------------------------------------ ---------
-------------------- ---------
---------------------- ---------
-------- ----------
--------------- ---------
-------- ----------
------------ ----------
---------- ----------
-------------- ---------
--------------------- --------
--
---------- -
-------- ------------------- --------
-------- -------- ------ -----------
--
--------- ---
---------- -----
-这里我们添加了一些必要的依赖，包括 React、axios、webpack 等等。然后添加了两个脚本命令， start 开启开发环境，build 打包生产环境代码。
在 client 目录下创建 webpack.config.js 文件，添加如下代码：
----- ---- - ----------------
-------------- - -
------ ------------------
------- -
--------- ------------
----- ----------------------- ---------
--
---------- -
------------ ----------
--
------- -
------ -
-
----- ----------
-------- ---------------
---- -
------- --------------
-
-
-
-
--这里我们设置了入口文件为 src/index.jsx，打包后的文件名为 bundle.js，打包后的文件输出到 public 目录下。同时我们设置了devServer 的 contentBase 为 public，然后配置了 babel 和 jsx loader。
在 client 目录下创建 public/index.html 文件，添加如下代码：
--------- -----
------
------
------------ ---- -------------
-------
------
---- ----------------
------- -------------------------
-------
-------这里我们指定了打包后的 js 文件 public/bundle.js，并将其导入到 html 网页中。
接下来，我们在 client/src 目录下创建 index.jsx 文件，添加如下代码：
------ ----- ---- --------
------ -------- ---- ------------
------ ----- ---- --------
----- --- ------- --------------- -
----- - -
------ --
--
------------------- -
----------------
-
----- ---------- -
--- -
----- -------- - ----- --------------------
--------------- ------ ------------- ---
- ----- ------- -
---------------------
-
-
-------- -
----- - ----- - - -----------
------ -
-----
-------- ---------
----
--------------- -- -
--- --------------
---------------------
--------------------
-----
---
-----
------
--
-
-
-------------------- --- ---------------------------------这里我们使用了 React，通过 import 引入了 React、ReactDOM 和 axios 依赖库。在 App 组件中，我们使用了 componentDidMount 方法来获取从后台返回的书籍列表。然后将获取到的书籍渲染到页面中。
运行项目
在 server 目录下打开终端，执行 npm init -y 命令来初始化 server 项目，然后执行以下命令：
--- ------- ---- --- ------- -- -------
这里我们安装了 hapi 和 nodemon，nodemon 是 Node.js 开发中的热更新插件，可以自动重启服务。
接下来，在 client 目录下执行以下命令：
--- -------
这里我们安装了项目依赖的所有库。
最后，在 server 目录下执行以下命令：
--- ------- ------------
用 nodemon 启动服务，然后在 client 目录下执行以下命令：
--- -----
然后在浏览器中打开 http://localhost:8080，就可以看到我们刚刚编写的前端页面了。
总结
本文通过实例介绍了如何使用 Hapi.js 和 React 实践构建 Node.js 后台管理系统。我们首先搭建了项目脚手架，然后通过 Hapi.js 实现了后台服务，最后使用 React 完成了前端页面的开发。本文并没有涉及到具体的业务场景，但可以作为一个基础框架，供大家进行拓展和修改。通过这个实例，我们可以更加深入了解 Hapi.js 和 React，掌握前后端分离的开发方式。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6491465a48841e9894f45c5e