如何用 Hapi.js 和 React 快速打造一个完整的前后端应用架构 - 避免重复编写组件带来的 bug-JavaScript中文网-JavaScript教程资源分享门户

前端开发中，我们通常需要处理复杂的业务逻辑以及繁琐的 UI 组件开发，如何能够快速高效地完成这些工作，是我们需要面对和解决的问题。

本文将介绍如何用 Hapi.js 和 React 快速打造一个完整的前后端应用架构，避免重复编写组件带来的 bug，提高开发效率。

Hapi.js 介绍

Hapi.js 是一个用于构建 Node.js 应用程序的框架。它的设计理念是通过清晰的分层结构来支持复杂的 Web 应用程序。与 Express.js 相比，Hapi.js 提供了更强大的插件系统和更好的文档。

Hapi.js 安装

第一步：初始化项目

在命令行中进入你的项目目录，执行以下命令：

npm init

按照提示填写项目信息。

第二步：安装 Hapi.js

在命令行中执行以下命令：

npm install hapi --save

Hapi.js 示例：创建一个简单的服务器

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

const server = Hapi.server({
    port: 3000,
    host: 'localhost'
});

server.route({
    method: 'GET',
    path: '/',
    handler: (request, h) => {
        return 'Hello World!'
    }
});

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

start();

通过以上代码，我们创建了一个简单的服务器，当访问 http://localhost:3000 时，会返回 Hello World!。

React 介绍

React 是 Facebook 开发的一款前端 UI 框架，它采用了组件化的思想，将 UI 页面拆分成一个个组件，每一个组件都拥有自己的生命周期、状态和 props。

React 安装

第一步：安装 Node.js 和 npm

在命令行中输入以下命令：

node –version
npm –version

如果没有安装，请前往 Node.js 官网下载和安装。

第二步：创建 React 项目

在命令行中进入你的项目目录，执行以下命令：

npx create-react-app my-app
cd my-app
npm start

“my-app” 为项目名称，执行以上命令会创建一个 React 项目并启动。在浏览器中访问 http://localhost:3000 即可查看。

React 示例：创建一个简单的组件

// javascriptcn.com 代码示例
import React from 'react';

class HelloWorld extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, {this.props.name}!</h1>
      </div>
    );
  }
}

export default HelloWorld;

通过以上代码，我们创建了一个简单的组件，当组件被渲染时，在页面上会显示一个包含 “Hello, [name]!” 的标题，其中 [name] 是通过 props 传入的参数。

如何用 Hapi.js 和 React 打造完整的应用架构

接下来，我们将介绍如何用 Hapi.js 和 React 打造一个完整的前后端应用架构。

配置 Hapi.js 服务器

首先，在项目根目录下创建一个新的文件夹 “server”，然后在该文件夹中创建一个 “index.js” 文件用于启动 Hapi.js 服务器。

在 “index.js” 文件中输入以下代码：

// javascriptcn.com 代码示例
const path = require('path');
const Hapi = require('hapi');
const Inert = require('inert');

const server = Hapi.server({
  host: 'localhost',
  port: 5000,
  routes: {
    files: {
      relativeTo: path.join(__dirname, '../frontend/build')
    }
  }
});

async function start() {
  await server.register(Inert);
  server.route({
    method: 'GET',
    path: '/{param*}',
    handler: {
      directory: {
        path: '.',
        redirectToSlash: true,
        index: true,
      }
    }
  });

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

start();

在以上代码中，我们创建了一个 Hapi.js 服务器，并使用 Inert 插件来提供静态文件服务。由于 React 项目的编译文件放在 “frontend/build” 目录下，因此我们将路由路徑设置为 “/{param*}”，同时设置目录为 “frontend/build”。

编写 React 组件

在 React 项目中，我们需要编写一个组件，用于向服务器发送请求并获取响应。

在 “src” 文件夹中创建一个名为 “Backend.js” 的文件，输入以下代码：

// javascriptcn.com 代码示例
import React, { Component } from 'react';

class Backend extends Component {
  state = { response: '' };

  componentDidMount() {
    this.callBackendAPI()
      .then(res => this.setState({ response: res.express }))
      .catch(err => console.log(err));
  }

  callBackendAPI = async () => {
    const response = await fetch('/api/hello');
    const body = await response.json();
    if (response.status !== 200) {
      throw Error(body.message);
    }
    return body;
  };

  render() {
    return (
      <p className="App-intro">{ this.state.response }</p>
    );
  }
}

export default Backend;

在以上代码中，我们使用了 React 的生命周期函数 componentDidMount()，在组件被挂载时向服务器发送请求。通过 fetch() 方法，我们向服务器发送了一个 GET 请求，然后从响应中读取 json 数据，最后将响应内容保存在组件的状态中。

创建 Hapi.js API

在 “server” 文件夹中创建一个新的子文件夹 “api”，然后在该文件夹中创建一个 “index.js” 文件用于处理 API 请求。在文件中输入以下代码：

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

const server = Hapi.server({
  host: 'localhost',
  port: 5000
});

server.route({
  method: 'GET',
  path: '/api/hello',
  handler: (request, h) => {
    return { express: 'Hello From Express' };
  }
});

exports.init = async () => {
  await server.start();
  console.log(`Server running at: ${server.info.uri}`);
};

exports.server = server;

在以上代码中，我们创建了一个 GET 请求的路由，当客户端向 “/api/hello” 发送请求时，服务器会返回一个 JSON 对象，其中包含一个 “express” 属性。

集成 React 组件和 Hapi.js 服务器

在 React 项目的根目录中打开 “package.json” 文件，在该文件中添加以下命令：

"scripts": {
  "start": "npm run start:server & npm run start:client",
  "start:server": "node server/index.js",
  "start:client": "cd frontend && npm start"
},

在以上代码中，我们添加了一个新的命令 npm run start:server，用于启动 Hapi.js 服务器。

然后，在 React 项目中，我们打開 "src/App.js" 文件，输入以下代码：

// javascriptcn.com 代码示例
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Backend from './Backend';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={ logo } className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <Backend />
      </div>
    );
  }
}

export default App;

在以上代码中，我们将 Hapi.js API 和 React 组件组合在一起，从而实现一个完整的前后端应用架构。

运行应用

接下来，我们必须分别运行前端和后端：

npm run start:server

等待服务器启动…

npm start

然后打开浏览器，访问：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