如何使用React从DigitalOcean API显示数据

作者选择维基媒体基金会作为Write for DOnations计划的一部分接受捐赠。

介绍

在过去几年中，开源Web框架大大简化了编写应用程序的过程。 例如， React通过使新开发人员更容易访问语言并提高经验丰富的开发人员的工作效率，仅增加了JavaScript的流行度。 React由Facebook创建，允许开发人员通过支持声明性视图，状态管理和客户端呈现等功能，为高度可扩展的Web应用程序快速创建高端用户界面，每个功能都可以大大降低构建JavaScript中的应用。

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

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

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

先决条件

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

• Node.js （至少为v6）和npm （至少为v5.2）的本地安装。 Node.js是一个JavaScript运行时环境，允许您在浏览器之外运行代码。 它附带一个名为npm的预安装软件包管理器，可以安装和更新软件包。 要在macOS或Ubuntu 18.04上安装这些，请按照如何在macOS上安装Node.js和创建本地开发环境中的步骤或在Ubuntu 18.04上如何安装Node.js的“使用PPA安装”部分中的步骤进行操作 。

• DigitalOcean API的只读个人访问令牌 。 确保将令牌记录在安全的地方; 你将在本教程的后面需要它。

• 熟悉HTML和JavaScript的结合。 详细了解如何将JavaScript添加到HTML 。

• 熟悉JSON数据格式，您可以在JavaScript中了解如何使用JSON 。

• 熟悉向API发出请求。 有关使用API​​的综合教程，请参阅如何在Python3中使用Web API 。 虽然它是为Python编写的，但它仍然可以帮助您理解使用API​​的核心概念。

第1步 – 创建一个基本的反应应用程序

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

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

npx create-react-app my-app

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

cd my-appnpm start

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

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

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

第2步 – 创建组件以显示Droplet数据

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

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

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

mkdir src/componentsnano 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欢迎消息的样板代码，该消息在以下代码块中突出显示。

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;

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

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的连接，您将使用该API来检索此表将显示的数据。

第3步 – 保护您的API凭据

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

使用npm安装dotenv包：

npm install dotenv

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

nano .env

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

DO_API_URL=https://api.digitalocean.com/v2DO_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

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

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 =将您的Personal Access Token加载到代理服务器中。 选项pathRewrite将代理服务器安装到/api而不是/以便它不会干扰应用程序服务器，但仍然与DigitalOcean API匹配。

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

第4步 – 向DigitalOcean发出API调用

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

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

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

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

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的表组件：

...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部分：

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浏览器中：

注意：如果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文件导入到项目中：

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样式应用于表组件。

import React from 'react';const Table = ({ droplets }) => {  return (    <table className="table">      <thead>...

接下来，通过在表格上方放置标题和DigitalOcean徽标来完成应用程序的样式设置。 点击DigitalOcean新闻页面的Branded资产部分下载徽标，下载一组徽标，从SVG目录中选择您喜欢的（本教程使用DO_Logo_icon_blue.svg ），并通过将徽标文件复制到新项目中将其添加到项目中目录在项目的src目录中称为assets 。 上传徽标后，通过将突出显示的行添加到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应用程序以使用Django和React在Ubuntu 18.04上管理客户信息 。 如果您想了解DigitalOcean API可能采取的其他措施，请查看DigitalOcean网站上的API文档 。