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

作者选择了 维基媒体基金会作为 写给捐赠计划的一部分接受捐赠。

介绍

在过去几年中,开源网络框架大大简化了一个应用程序的编码过程. 例如,[React] (https://reactjs.org/),只是通过让新开发者更方便地使用语言,并增加经验丰富的开发者的生产力,增加了JavaScript的受欢迎程度. React由Facebook创建,通过支持声明视图,状态管理,以及客户端渲染等功能,React允许开发者快速为高可扩展网络应用程序创建高端用户界面,每个功能都能大大降低JavaScript中构建应用程序的复杂性.

您可以利用 React 等框架来加载和显示来自 [DigitalOcean API] (https://developers.digitalocean.com/documentation/v2/)的数据,通过这些框架可以使用 HTTP 请求在 DigitalOcean 云中管理您的 Dropplets 和其他产品. 虽然人们可以从API中获取数据,并使用许多其他JavaScript框架,但React提供了生命周期和地方州管理等有益好处,使其特别适合工作. 通过React,当应用程序启动时,从API中取回的数据会被添加到本地状态,并且可以随着组件上载和下载而经历各种生命周期. 任何时间,都可以从当地州取出数据并相应显示.

在本教程中,您将创建一个简单的 React 应用程序,它与 DigitalOcean API v2互动,以进行呼叫并获取有关您的 Droplets 的信息。您的应用程序将显示包含当前 Droplets 的列表及其细节,如名称,区域和技术规格,您将使用前端框架 Bootstrap来设计您的应用程序。

一旦你完成了这个教程,你将有一个基本的界面显示你的DigitalOcean滴的列表,风格看起来如下:

The final version of your React Application

前提条件

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

步骤 1 — 创建基本反应应用程序

在此第一步中,您会使用从npm开始的Create React App软件包创建基本的回放应用程序. 此软件包会自动安装和配置运行React所需的必要依赖,比如模块构建器Webpack和JavaScript编译器Babel. 安装后,您将使用套件跑取器npx运行 Create React App 套件,该套件与 Node.js 预安装.

要安装 Create React App 并创建应用程序的第一个版本,请运行以下命令,以您想要给应用程序的名称代替我的应用程序:

1npx create-react-app my-app

安装完成后,移动到新项目目录并使用以下命令开始运行应用程序:

1cd my-app
2npm start

之前的命令会启动由 Create React App 提供的本地开发服务器,从而禁用终端中的命令行提示。

你现在有你的 React 应用程序的第一个版本在开发模式中运行,你可以通过在网页浏览器中打开 http://localhost:3000 来查看它。

The first version of your React application

现在您已经安装并创建了您的 React 应用程序的第一个版本,您可以将表组件添加到您的应用程序中,该组件最终将包含 DigitalOcean API 的数据。

步骤 2 — 创建一个组件以显示 Droplet 数据

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

DigitalOceanAPI文档称,您可以通过使用cURL向以下终点发送请求来取回包含您所有滴滴的列表:`https://api.digitalocean.com/v2/droplets'. 利用这一请求的产出,可以为每个Droplet创建包含 " id " 、 " name " 、 " region " 、 " Memory " 、 " vcpus " 和 " disk " 的表格部分。 稍后在此教程中,您会将从API中获取的数据插入到表格组件中.

要为您的应用程序定义一个清晰的结构,请在src目录中创建一个名为components的新目录,在那里您将存储所写的所有代码。

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

通过将下列代码添加到文件中来定义表组件:

 1[label src/components/Table.js]
 2import React from 'react';
 3
 4const Table = () => {
 5  return (
 6    <table>
 7      <thead>
 8        <tr>
 9          <th>Id</th>
10          <th>Name</th>
11          <th>Region</th>
12          <th>Memory</th>
13          <th>CPUs</th>
14          <th>Disk Size</th>
15        </tr>
16      </thead>
17      <tbody>
18        <tr>
19          <td></td>
20          <td></td>
21          <td></td>
22          <td></td>
23          <td></td>
24          <td></td>
25        </tr>
26      </tbody>
27    </table>
28  );
29}
30
31export default Table

上面的代码块导入了React框架,并定义了一个名为表的新组件,该组件由一个标题和一个体的表组成。

添加这些代码行后,保存并退出文件. 使用纳米文本编辑器,您可以通过按CTRL+X键入y并按ENTER来完成此操作。

现在你已经创建了表组件,是时候将该组件纳入你的应用程序了. 您将通过将该组件导入到应用程序的输入点,这是在文件 src/App.js。

1nano src/App.js

接下来,删除在src/App.js中显示 Create React App 欢迎消息的锅炉板代码,该代码在下面的代码块中被突出。

 1[label src/App.js]
 2import React, { Component } from 'react';
 3import logo from './logo.svg';
 4import './App.css';
 5
 6class App extends Component {
 7  render() {
 8    return (
 9      <div className="App">
10        <header className="App-header">
11          <img src={logo} className="App-logo" alt="logo" />
12          <p>
13            Edit <code>src/App.js</code> and save to reload.
14          </p>
15          <a
16            className="App-link"
17            href="https://reactjs.org"
18            target="_blank"
19            rel="noopener noreferrer"
20          >
21            Learn React
22          </a>
23        </header>
24      </div>
25    );
26  }
27}
28
29export default App;

删除显示欢迎消息的行后,通过添加以下突出行来将表组件纳入该文件中:

 1[label src/App.js]
 2import React, { Component } from 'react';
 3import Table from './components/Table.js';
 4
 5class App extends Component {
 6  render() {
 7    return (
 8      <div className="App">
 9        <Table />
10      </div>
11    );
12  }
13}
14
15export default App;

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

The React application with a basic table

在此步骤中,您已经创建了一个表组件,并将该组件纳入您的应用程序的输入点,接下来,您将建立一个连接到DigitalOcean API,您将使用它来获取该表所显示的数据。

步骤 3 – 确保您的 API 凭证

建立与 DigitalOcean API 的连接包括几个操作,从安全地将您的个人访问代币存储为环境变量开始,这可以通过使用 dotenv来完成,该包允许您在一个 .env 文件中存储敏感信息,您的应用程序可以从环境中获取。

使用npm来安装dotenv包:

1npm install dotenv

在安装dotenv后,在应用程序的 root 目录中创建一个名为.env的环境文件,执行以下命令:

1nano .env

将下列内容添加到 .env 中,其中包含您的个人访问标记和 DigitalOcean API 的 URL:

1[label .env]
2DO_API_URL=https://api.digitalocean.com/v2
3DO_ACCESS_TOKEN=YOUR_API_KEY

要确保这些敏感数据不会被绑定到一个存储库中,请使用以下命令将其添加到您的.gitignore 文件中:

1echo ".env" >> .gitignore

您现在已经为您的环境变量创建了一个安全而简单的配置文件,该文件将为您的应用提供向 DigitalOcean API 发送请求所需的信息。

安装 middleware http-proxy-middleware 通过执行以下命令:

1npm install http-proxy-middleware

安装后,下一步是设置您的代理程序,在src目录中创建setupProxy.js文件:

1nano src/setupProxy.js

在此文件中,添加以下代码来设置代理服务器:

 1[label src/setupProxy.js]
 2const proxy = require('http-proxy-middleware')
 3
 4module.exports = function(app) {
 5
 6  require('dotenv').config()
 7
 8  const apiUrl = process.env.DO_API_URL
 9  const apiToken = process.env.DO_ACCESS_TOKEN
10  const headers  = {
11    "Content-Type": "application/json",
12    "Authorization": "Bearer " + apiToken
13  }
14
15  // define http-proxy-middleware
16  let DOProxy = proxy({
17    target: apiUrl,
18    changeOrigin: true,
19  pathRewrite: {
20    '^/api/' : '/'
21  },
22    headers: headers,
23  })
24
25  // define the route and map the proxy
26  app.use('/api', DOProxy)
27
28};

在之前的代码块中,const apiURL = 将 DigitalOcean API 的 URL 设置为终点,而const apiToken = 将您的个人访问代币加载到代理服务器中。

您现在已经成功创建了一个代理服务器,将从您的 React 应用程序发送的所有 API 请求发送到 DigitalOcean API. 这个代理服务器将确保您的个人访问代币,该代币作为环境变量安全存储,不会暴露在客户端。

步骤 4 — 将 API 调用到 DigitalOcean

现在您的显示组件已准备好,并且通过代理服务器存储和保护到 DigitalOcean 的连接细节,您可以开始从 DigitalOcean API 获取数据。

 1[label src/App.js]
 2import React, { Component } from 'react';
 3...
 4class App extends Component {
 5  constructor(props) {
 6    super(props);
 7    this.state = {
 8      droplets: []
 9    }
10  }
11
12    render() {
13...

这些代码行称为您的类组件中的构建者方法,在 React 中通过提供对象或对象的this.state来初始化本地状态。

为了显示当前的Droplets,您需要从DigitalOcean API中获取这些信息。 使用JavaScript函数 Fetch,您将向DigitalOcean API发送请求,并与您获取的数据更新dropplets的状态。 您可以使用componentDidMount方法添加以下代码行:

 1[label src/App.js]
 2class App extends Component {
 3  constructor(props) {
 4    super(props);
 5    this.state = {
 6      droplets: []
 7    }
 8  }
 9
10  componentDidMount() {
11    fetch('http://localhost:3000/api/droplets')
12    .then(res => res.json())
13    .then(json => json.droplets)
14    .then(droplets => this.setState({ 'droplets': droplets }))
15  }
16...

随着您的 Droplet 数据存储在状态中,是时候在您的应用程序的渲染函数中获取它,并将此数据作为附加发送到表组件中。

 1[label src/App.js]
 2...
 3class App extends Component {
 4  render() {
 5    return (
 6      <div className="App">
 7        <Table droplets={ this.state.droplets } />
 8      </div>
 9    );
10  }
11}
12...

您现在已经创建了从 API 获取数据的功能,但您仍然需要通过 Web 浏览器来访问这些数据。

步骤5 — 在表组件中显示滴滴数据

现在你已经将Droplet数据传输到表组件,你可以重复这些数据在表中的行。但是,由于应用程序在安装App.js后向API提出请求,所以droplets的属性值首先将是空的。

 1[label src/components/Table.js]
 2const Table = ({ droplets }) => {
 3  return (
 4    <table>
 5      <thead>
 6        <tr>
 7          <th>Id</th>
 8          <th>Name</th>
 9          <th>Region</th>
10          <th>Memory</th>
11          <th>CPUs</th>
12          <th>Disk Size</th>
13        </tr>
14      </thead>
15      <tbody>
16        { (droplets.length > 0) ? droplets.map( (droplet, index) => {
17           return (
18            <tr key={ index }>
19              <td>{ droplet.id }</td>
20              <td>{ droplet.name }</td>
21              <td>{ droplet.region.slug}</td>
22              <td>{ droplet.memory }</td>
23              <td>{ droplet.vcpus }</td>
24              <td>{ droplet.disk }</td>
25            </tr>
26          )
27         }) : <tr><td colSpan="5">Loading...</td></tr> }
28      </tbody>
29    </table>
30  );
31}

当DigitalOcean API返回Droplet数据时,您的应用程序将重复它在包含每个数据类型的列的表行上,并向您的Web浏览器显示结果:

The React Application with Droplet data

注意: 如果您的网页浏览器显示http://localhost:3000错误,请在运行您的开发服务器的终端按CTRL+C来停止您的应用程序。

1npm start

美元

在此步骤中,您已经修改了应用程序的表组件,以便在 Web 浏览器中显示您的 Droplet 数据,并为没有 Droplets 找到时添加了位置保持者消息。

步骤6 - 使用 Bootstrap 来设计您的桌面组件

您的表现在挤满了数据,但信息并不以最有吸引力的方式显示。 要解决这个问题,您可以通过将 Bootstrap添加到您的项目中来样式化应用程序。

使用下列命令安装 Bootstrap with npm:

1npm install bootstrap

在 Bootstrap 完成安装后,将其 CSS 文件导入到您的项目中,将以下突出的行添加到 src/App.js:

1[label src/App.js]
2import React, { Component } from 'react';
3import Table from './components/Table.js';
4import 'bootstrap/dist/css/bootstrap.min.css';
5
6class App extends Component {
7...

现在你已经导入了 CSS,将 Bootstrap 样式应用到你的表组件中,将类 table 添加到 src/components/Table.js 中的

` 标签中。

1[label src/components/Table.js]
2import React from 'react';
3
4const Table = ({ droplets }) => {
5  return (
6    <table className="table">
7      <thead>
8...

接下来,通过将标题和数字海洋标志置于表格上方来完成应用程序的样式。 点击 Download Logos 在 [数字海洋's Press page] (https://www.digitalocean.com/press/] 的 Brand Profession** 部分下载一组标志,从),并将标志文件复制到您项目src目录中称为资产的新目录中,从而添加到您的项目中。 上传标志后,通过将突出显示的行添加到"src/App.js"来将它导入标题:

 1[label src/App.js]
 2import React, { Component } from 'react';
 3import Table from './components/Table.js';
 4import 'bootstrap/dist/css/bootstrap.min.css';
 5import logo from './assets/DO_Logo_icon_blue.svg';
 6
 7class App extends Component {
 8...
 9  render() {
10    return (
11      <div className="App">
12        <nav class="navbar navbar-light bg-light">
13          <a class="navbar-brand" href="./">
14            <img src={logo} alt="logo" width="40" /> My Droplets
15          </a>
16        </nav>
17        <Table droplets={ this.state.droplets } />
18      </div>
19    );
20  }
21}
22
23export default App;

在之前的代码块中,nav标签中的类将 Bootstrap 的特定风格添加到您的标题中。

现在,您已经导入了 Bootstrap 并将其样式应用于您的应用程序,您的数据将以有组织和可读的显示方式出现在您的 Web 浏览器中:

The final version of your React Application

结论

在此篇文章中,您创建了一个基本的React应用程序,通过安全的代理服务器从 DigitalOcean API 中获取数据,并用 Bootstrap stypeling 显示. 现在熟悉React框架,可以将您在此学到的概念应用到更复杂的应用程序中去,例如[How To Build a Modern Web Application to Management Client Information with Django and React on Ubuntu 18.04] (https://andsky.com/tech/tutorials/how-to-build-a-modern-web-application-to-manage-customer-information-with-django-and-react-on-ubuntu-18-04# step-3-%E2%80%94-creating-the-react-frontend)中找到的. 如果您想了解DigitalOcean API还能有其他哪些动作,请查看DigitalOcean网站上的[API文档 (https://developers.digitalocean.com/documentation/v2/).

Published At
Categories with 技术
Tagged with
comments powered by Disqus
© 2024 andsky.com