如何使用React显示来自DigitalOceanAPI的数据

作为 Write for DOnations 计划的一部分，作者选择了 Wikimedia Foundation 来接受捐赠。

介绍

在过去的几年里，开源 Web 框架极大地简化了应用程序的编码过程。例如，React 只是通过使新开发人员更容易使用该语言并提高经验丰富的开发人员的生产力来增加 JavaScript 的流行度。 React 由 Facebook 创建，通过支持声明式视图、状态管理和客户端渲染等功能，允许开发人员为高度可扩展的 Web 应用程序快速创建高端用户界面，其中每一项都可以大大降低构建 Web 应用程序的复杂性。 JavaScript 中的应用程序。

您可以利用 React 等框架从 DigitalOcean API 加载和显示数据，通过它您可以使用 HTTP 请求在 DigitalOcean 云中管理您的 Droplet 和其他产品。尽管可以使用许多其他 JavaScript 框架从 API 获取数据，但 React 提供了有用的好处，例如生命周期和本地状态管理，使其特别适合这项工作。使用 React，从 API 检索的数据会在应用程序启动时添加到本地状态，并且可以在组件安装和卸载时经历各种生命周期。在任何时候，您都可以从本地状态检索数据并相应地显示它。

在本教程中，您将创建一个简单的 React 应用程序，该应用程序与 DigitalOcean API v2 交互以进行调用并检索有关您的 Droplets 的信息。您的应用程序将显示一个列表，其中包含您当前的 Droplet 及其详细信息，例如名称、区域和技术规范，并且您将使用前端框架 Bootstrap 来设置应用程序的样式。

完成本教程后，您将拥有一个显示 DigitalOcean Droplets 列表的基本界面，其样式如下所示：

先决条件

在开始本指南之前，除了以下内容之外，您还需要一个 DigitalOcean 帐户和至少一个 Droplet 设置：

Node.js（至少 v6）和 npm（至少 v5.2）的本地安装。 Node.js 是一个 JavaScript 运行时环境，允许您在浏览器之外运行代码。它带有一个名为 npm 的预安装包管理器，可让您安装和更新包。要在 macOS 或 Ubuntu 18.04 上安装这些，请按照如何安装 Node.js 并在 macOS 上创建本地开发环境中的步骤或如何安装节点的“使用 PPA 安装”部分中的步骤进行操作.js 在 Ubuntu 18.04 上。
DigitalOcean API 的只读个人访问令牌。确保将令牌记录在安全的地方；您将在本教程的后面部分需要它。
熟悉 HTML 和 JavaScript 的结合。在如何将 JavaScript 添加到 HTML 中了解更多信息。
熟悉 JSON 数据格式，您可以在如何在 JavaScript 中使用 JSON 中了解更多信息。
熟悉向 API 发出请求。有关使用 API 的综合教程，请查看如何在 Python3 中使用 Web API。虽然它是为 Python 编写的，但它仍然可以帮助您理解使用 API 的核心概念。

第 1 步——创建一个基本的 React 应用程序

在这第一步中，您将使用 npm 中的 Create React App 包创建一个基本的 React 应用程序。这个包自动安装和配置运行 React 所需的基本依赖项，例如模块构建器 Webpack 和 JavaScript 编译器 Babel。安装后，您将使用 Node.js 预装的包运行程序 npx 运行 Create React App 包。

要安装 Create React App 并创建应用程序的第一个版本，请运行以下命令，将 my-app 替换为您要为应用程序指定的名称：

npx create-react-app my-app

安装完成后，进入新的项目目录并使用以下命令开始运行应用程序：

cd my-app
npm start

上述命令启动 Create React App 提供的本地开发服务器，这会禁用终端中的命令行提示符。要继续本教程，请打开一个新的终端窗口并导航回项目目录，然后再继续下一步。

您现在拥有在开发模式下运行的 React 应用程序的第一个版本，您可以通过在 Web 浏览器中打开 http://localhost:3000 来查看它。此时，您的应用将仅显示来自 Create React App 的欢迎屏幕：

现在您已经安装并创建了 React 应用程序的第一个版本，您可以向您的应用程序添加一个表格组件，该组件最终将保存来自 DigitalOcean API 的数据。

第 2 步 - 创建一个组件来显示 Droplet 数据

在此步骤中，您将创建第一个显示有关您的液滴信息的组件。该组件将是一个表格，其中列出了您的所有 Droplet 及其相应的详细信息。

DigitalOcean API 文档指出，您可以通过使用 cURL 向以下端点发送请求来检索包含所有 Droplet 的列表：https://api.digitalocean.com/v2/droplets。使用此请求的输出，您可以创建包含 id、name、region、memory、vcpus 和每个液滴的 disk。在本教程的稍后部分，您将从 API 检索到的数据插入到表组件中。

要为您的应用程序定义清晰的结构，请在 src 目录中创建一个名为 components 的新目录，您将在其中存储您编写的所有代码。在 src/components 目录中创建一个名为 Table.js 的新文件，然后使用 nano 或您选择的文本编辑器打开它：

mkdir src/components
nano src/components/Table.js

通过将以下代码添加到文件中来定义表格组件：

src/components/Table.js

import React from 'react';

const Table = () => {
  return (
    <table>
      <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
          <th>Region</th>
          <th>Memory</th>
          <th>CPUs</th>
          <th>Disk Size</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table>
  );
}

export default Table

上面的代码块导入了 React 框架并定义了一个名为 Table 的新组件，它由一个带有标题和正文的表格组成。

添加这些代码行后，保存并退出文件。使用 nano 文本编辑器，您可以通过按 CTRL+X、键入 y 并按 ENTER 来执行此操作。

现在您已经创建了表格组件，是时候将该组件包含在您的应用程序中了。您将通过将组件导入应用程序的入口点来完成此操作，该入口点位于文件 src/App.js 中。使用以下命令打开此文件：

nano src/App.js

接下来，删除在 src/App.js 中显示 Create React App 欢迎消息的样板代码，它在以下代码块中突出显示。

src/App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

删除显示欢迎消息的行后，通过添加以下突出显示的行，将 table 组件包含在同一文件中：

src/App.js

import React, { Component } from 'react';
import Table from './components/Table.js';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Table />
      </div>
    );
  }
}

export default App;

如果您再次在 Web 浏览器中访问 http://localhost:3000，您的应用程序现在将显示一个带有表头的基本表：

在这一步中，您已经创建了一个表格组件并将该组件包含在应用程序的入口点中。接下来，您将设置与 DigitalOcean API 的连接，您将使用它来检索此表将显示的数据。

第 3 步 — 保护您的 API 凭证

设置与 DigitalOcean API 的连接包括几个操作，首先是将您的个人访问令牌安全地存储为环境变量。这可以通过使用 dotenv 来完成，该包允许您将敏感信息存储在 .env 文件中，您的应用程序稍后可以从环境中访问该文件。

使用 npm 安装 dotenv 包：

npm install dotenv

安装 dotenv 后，通过执行以下命令在应用程序的根目录中创建一个名为 .env 的环境文件：

nano .env

将以下内容添加到 .env 中，其中包含您的个人访问令牌和 DigitalOcean API 的 URL：

.env

DO_API_URL=https://api.digitalocean.com/v2
DO_ACCESS_TOKEN=YOUR_API_KEY

为确保此敏感数据不会提交到存储库，请使用以下命令将其添加到您的 .gitignore 文件中：

echo ".env" >> .gitignore

您现在已经为您的环境变量创建了一个安全且简单的配置文件，它将为您的应用程序提供向 DigitalOcean API 发送请求所需的信息。为了确保您的 API 凭证在客户端不可见，您接下来将设置一个代理服务器来在您的应用程序服务器和 DigitalOcean API 之间转发请求和响应。

通过执行以下命令安装中间件 http-proxy-middleware：

npm install http-proxy-middleware

安装后，下一步是设置您的代理。在src目录下创建setupProxy.js文件：

nano src/setupProxy.js

在此文件中，添加以下代码以设置代理服务器：

src/setupProxy.js

const proxy = require('http-proxy-middleware')

module.exports = function(app) {
  
  require('dotenv').config()

  const apiUrl = process.env.DO_API_URL
  const apiToken = process.env.DO_ACCESS_TOKEN
  const headers  = {
    "Content-Type": "application/json",
    "Authorization": "Bearer " + apiToken
  }

  // define http-proxy-middleware
  let DOProxy = proxy({
    target: apiUrl,
    changeOrigin: true,
  pathRewrite: {
    '^/api/' : '/'
  },
    headers: headers,
  })

  // define the route and map the proxy
  app.use('/api', DOProxy)

};

在前面的代码块中，const apiURL = 将 DigitalOcean API 的 url 设置为端点，const apiToken = 将您的个人访问令牌加载到代理服务器中。选项 pathRewrite 将代理服务器挂载到 /api 而不是 / 以便它不会干扰应用程序服务器但仍然匹配 DigitalOcean API。

您现在已经成功创建了一个代理服务器，它将所有从您的 React 应用程序发出的 API 请求发送到 DigitalOcean API。此代理服务器将确保您安全存储为环境变量的个人访问令牌不会在客户端公开。接下来，您将创建实际请求以检索您的应用程序的 Droplet 数据。

第 4 步 — 对 DigitalOcean 进行 API 调用

现在您的显示组件已准备就绪，并且与 DigitalOcean 的连接详细信息已通过代理服务器存储和保护，您可以开始从 DigitalOcean API 检索数据。首先，在声明类 App 之前和之后将以下突出显示的代码行添加到 src/App.js：

src/App.js

import React, { Component } from 'react';
...
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      droplets: []
    }
  }

    render() {
...

这些代码行调用类组件中的 constructor 方法，在 React 中，该方法通过向 this.state 提供一个或多个对象来初始化本地状态。在这种情况下，对象是您的 Droplet。从上面的代码块中，您可以看到包含您的 Droplets 的数组是空的，因此可以使用 API 调用的结果来填充它。

为了显示您当前的 Droplets，您需要从 DigitalOcean API 获取此信息。使用 JavaScript 函数 Fetch，您将向 DigitalOcean API 发送请求，并使用您检索的数据更新 droplets 的状态。您可以使用 componentDidMount 方法通过在构造函数后添加以下代码行来执行此操作：

src/App.js

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      droplets: []
    }
  }

  componentDidMount() {
    fetch('http://localhost:3000/api/droplets')
    .then(res => res.json())
    .then(json => json.droplets)
    .then(droplets => this.setState({ 'droplets': droplets }))
  }
...

将您的 Droplet 数据存储到 state 中，是时候在应用程序的 render 函数中检索它并将此数据作为 prop 发送到表格组件。将以下突出显示的语句添加到 App.js 中的表格组件：

src/App.js

...
class App extends Component {
  render() {
    return (
      <div className="App">
        <Table droplets={ this.state.droplets } />
      </div>
    );
  }
}
...

您现在已经创建了从 API 检索数据的功能，但您仍然需要通过 Web 浏览器访问这些数据。在下一步中，您将通过在表格组件中显示您的 Droplet 数据来完成此操作。

第 5 步 — 在表格组件中显示 Droplet 数据

现在您已将 Droplet 数据传输到表组件，您可以在表中的行上迭代此数据。但由于应用程序在 App.js 挂载后向 API 发出请求，因此 droplets 的属性值首先为空。因此，在尝试显示数据之前，您还需要添加代码以确保 droplets 不为空。为此，请将以下突出显示的行添加到 Table.js 的 tbody 部分：

src/components/Table.js

const Table = ({ droplets }) => {
  return (
    <table>
      <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
          <th>Region</th>
          <th>Memory</th>
          <th>CPUs</th>
          <th>Disk Size</th>
        </tr>
      </thead>
      <tbody>
        { (droplets.length > 0) ? droplets.map( (droplet, index) => {
           return (
            <tr key={ index }>
              <td>{ droplet.id }</td>
              <td>{ droplet.name }</td>
              <td>{ droplet.region.slug}</td>
              <td>{ droplet.memory }</td>
              <td>{ droplet.vcpus }</td>
              <td>{ droplet.disk }</td>
            </tr>
          )
         }) : <tr><td colSpan="5">Loading...</td></tr> }
      </tbody>
    </table>
  );
}

添加上述代码后，当没有 Droplet 数据存在时，您的应用程序将显示 Loading... 占位符消息。当 DigitalOcean API 确实返回 Droplet 数据时，您的应用程序将遍历包含每种数据类型的列的表行，并将结果显示到您的 Web 浏览器：

注意： 如果您的网络浏览器在 http://localhost:3000 处显示错误，请在运行您的开发服务器的终端中按 CTRL+C 以停止您的应用程序。运行以下命令以重新启动您的应用程序：

npm start

在此步骤中，您已修改应用程序的表格组件以在 Web 浏览器中显示您的 Droplet 数据，并添加了一个占位符消息，用于在没有找到 Droplet 时显示。接下来，您将使用前端 Web 框架来设置数据样式，使其更具视觉吸引力且更易于阅读。

第 6 步 — 使用 Bootstrap 设置表格组件的样式

您的表格现在已填充数据，但信息并未以最吸引人的方式显示。要解决此问题，您可以通过将 Bootstrap 添加到项目中来设置应用程序的样式。 Bootstrap 是一个开源样式和组件库，可让您使用 CSS 模板向项目添加响应式样式。

使用以下命令使用 npm 安装 Bootstrap：

npm install bootstrap

Bootstrap 安装完成后，通过将以下突出显示的行添加到 src/App.js 将其 CSS 文件导入您的项目：

src/App.js

import React, { Component } from 'react';
import Table from './components/Table.js';
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends Component {
...

现在您已经导入了 CSS，通过将类 table 添加到 src/components/Table.js 中的 <table> 标记，将 Bootstrap 样式应用到表格组件。

src/components/Table.js

import React from 'react';

const Table = ({ droplets }) => {
  return (
    <table className="table">
      <thead>
...

接下来，通过在表格上方放置一个带有标题和 DigitalOcean 徽标的标题来完成应用程序的样式设置。在DigitalOcean的新闻页面的品牌资产版块点击下载Logo下载一组logo，从SVG目录中挑选你喜欢的（本教程使用 DO_Logo_icon_blue.svg），并通过将徽标文件复制到项目的 src 目录中名为 assets 的新目录来将其添加到项目中。上传徽标后，通过将突出显示的行添加到 src/App.js 将其导入标题：

src/App.js

import React, { Component } from 'react';
import Table from './components/Table.js';
import 'bootstrap/dist/css/bootstrap.min.css';
import logo from './assets/DO_Logo_icon_blue.svg';

class App extends Component {
...
  render() {
    return (
      <div className="App">
        <nav class="navbar navbar-light bg-light">
          <a class="navbar-brand" href="./">
            <img src={logo} alt="logo" width="40" /> My Droplets
          </a>
        </nav>
        <Table droplets={ this.state.droplets } />
      </div>
    );
  }
}

export default App;

在前面的代码块中，nav 标记中的类将 Bootstrap 中的特定样式添加到您的标题中。

现在您已经导入了 Bootstrap 并将其样式应用于您的应用程序，您的数据将显示在您的 Web 浏览器中，并且有条理且清晰的显示：

结论

在本文中，您创建了一个基本的 React 应用程序，该应用程序通过安全代理服务器从 DigitalOcean API 获取数据并使用 Bootstrap 样式显示它。现在您已经熟悉了 React 框架，您可以将在这里学到的概念应用到更复杂的应用程序中，例如如何构建现代 Web 应用程序以在 Ubuntu 18.04 上使用 Django 和 React 管理客户信息中的应用程序。如果您想了解 DigitalOcean API 还可以执行哪些其他操作，请查看 DigitalOcean 网站上的 API 文档。