如何使用Vue.js和Axios从API显示数据

介绍

Vue.js 是一个用于构建用户界面的前端 JavaScript 框架。它从头开始设计为可逐步采用，并且与其他库或现有项目很好地集成。当与其他工具和库一起使用时，这使其非常适合小型项目以及复杂的单页应用程序。

API 或应用程序编程接口是允许两个应用程序相互通信的软件中介。 API 通常会公开其他开发人员可以在他们自己的应用程序中使用的数据，而不必担心数据库或编程语言的差异。开发人员经常从以 JSON 格式返回数据的 API 获取数据，并将其集成到前端应用程序中。 Vue.js 非常适合使用这些类型的 API。

在本教程中，您将创建一个 Vue 应用程序，它使用 Cryptocompare API 来显示两种主要加密货币的当前价格：比特币和以太币。除了 Vue，您还将使用 Axios 库发出 API 请求并处理获得的结果。 Axios 非常适合，因为它自动将 JSON 数据转换为 JavaScript 对象，并且它支持 Promises，这使得代码更易于阅读和调试。为了让事情看起来更漂亮，我们将使用 Foundation CSS 框架。

注意：Cryptocompare API 仅许可用于非商业用途。如果您希望在商业项目中使用它，请参阅他们的许可条款。

先决条件

在开始本教程之前，您需要以下内容：

支持 JavaScript 语法高亮的文本编辑器，例如 Atom、Visual Studio Code 或 Sublime Text。这些编辑器可在 Windows、macOS 和 Linux 上使用。
熟悉同时使用 HTML 和 JavaScript。在如何将 JavaScript 添加到 HTML 中了解更多信息。
熟悉 JSON 数据格式，您可以在如何在 JavaScript 中使用 JSON 中了解更多信息。
熟悉向 API 发出请求。有关使用 API 的综合教程，请查看如何在 Python3 中使用 Web API。虽然它是为 Python 编写的，但它仍然可以帮助您理解使用 API 的核心概念。

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

让我们创建一个基本的 Vue 应用程序。我们将使用一些模拟数据构建一个 HTML 页面，我们最终将用 API 中的实时数据替换这些数据。我们将使用 Vue.js 来显示这个模拟数据。对于第一步，我们将所有代码保存在一个文件中。

使用文本编辑器创建一个名为 index.html 的新文件。

在此文件中，添加以下 HTML 标记，该标记定义 HTML 骨架并从内容交付网络 (CDN) 中提取 Foundation CSS 框架和 Vue.js 库。通过使用 CDN，您无需下载其他代码即可开始扩展您的应用程序。

索引.html

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css">
  <meta charset="utf-8">
  <title>Cryptocurrency Pricing Application</title>
</head>

  <body>
    <div class="container" id="app">
      <h3 class="text-center">Cryptocurrency Pricing</h3>
      <div class="columns medium-4" >
        <div class="card">
          <div class="card-section">
            <p> BTC in USD  </p>
          </div>
          <div class="card-divider">
            <p>{{ BTCinUSD }}</p>
          </div>
        </div>
      </div>
    </div>

    <script src="https://unpkg.com/vue"></script>
  </body>
</html>

模板:BTCinUSD 行是 Vue.js 将提供的数据的占位符。这就是 Vue 让我们在 UI 中以声明方式呈现数据的方式。让我们定义该数据。

在包含 Vue 的 <script> 标签正下方，添加这段代码，它将创建一个新的 Vue 应用程序并定义我们将在页面上显示的数据结构：

索引.html

...

    <script>
      const vm = new Vue({
              el: '#app', 
              //Mock data for the value of BTC in USD
              data: { BTCinUSD: 3759.91}
            });
    
    </script>
...

此代码创建一个新的 Vue 应用程序实例并将该实例附加到具有 app 的 id 的元素。 Vue 将此过程称为挂载应用程序。我们定义一个新的 Vue 实例，并通过传递一个配置 object 来配置它。此对象包含一个 el 选项，它指定我们要在其上安装此应用程序的元素的 id，以及一个 data 选项，其中包含我们想要可用的数据风景。

在此示例中，我们的数据模型包含一个键值对，其中包含比特币价格的模拟值：{ BTCinUSD: 3759.91}。该数据将显示在我们的 HTML 页面或我们的视图中，在我们将键括在双花括号中的位置，如下所示：

<div class="card-divider">
  <p>{{ BTCinUSD }}</p>
</div>

我们最终将用 API 中的实时数据替换这个硬编码值。

在浏览器中打开此文件。您将在屏幕上看到以下输出，其中显示了模拟数据：

我们在美国显示价格美元。要以其他货币（如欧元）显示它，我们将在数据模型中添加另一个键值对并在标记中添加另一列。首先，改变数据模型：

索引.html

  <script>
  const vm = new Vue({
          el: '#app',
          //Mock data for the value of BTC in USD
          data: { BTCinUSD: 3759.91, BTCinEURO:3166.21 }
        });
  
  </script>

然后在标记中添加一个新部分，在现有代码下方显示以欧元为单位的价格。

索引.html

  <div class="container" id="app">
    <h3 class="text-center">Cryptocurrency Pricing</h3>
    <div class="columns medium-4" >
      <div class="card">
        <div class="card-section">
          <p> BTC in USD  </p>
        </div>
        <div class="card-divider">
          {{BTCinUSD}}
        </div>
      </div>
    </div>

    <div class="columns medium-4" >
      <div class="card">
        <div class="card-section">
          <p> BTC in EURO  </p>
        </div>
        <div class="card-divider">
          {{BTCinEURO}}
        </div>
      </div>
    </div>

  </div>

现在保存文件并在浏览器中重新加载。该应用程序现在以欧元和美元显示比特币的价格。

我们已经在一个文件中完成了所有工作。让我们把事情分开来提高可维护性。

第 2 步 — 将 JavaScript 和 HTML 分开以便清晰

为了了解事情是如何工作的，我们将所有代码放在一个文件中。现在让我们将应用程序代码分成两个单独的文件，index.html 和 vueApp.js。 index.html 文件将处理标记部分，JavaScript 文件将包含应用程序逻辑。这将使我们的应用程序更易于维护。我们会将这两个文件保存在同一个目录中。

首先，修改 index.html 文件并删除 JavaScript 代码，将其替换为 vueApp.js 文件的链接。

找到文件的这一部分：

索引.html

...
    <script src="https://unpkg.com/vue"></script>
    <script  language="JavaScript">
    const vm = new Vue({
            el: '#app',
            // Mock data for the value of BTC in USD
            data: { BTCinUSD: 3759.91, BTCinEURO:3166.21 }
          });
    </script>
...

并对其进行修改，使其看起来像这样：

索引.html

...
    <script src="https://unpkg.com/vue"></script>
    <script src="vueApp.js"></script>
...

然后在与 index.html 文件相同的目录下创建 vueApp.js 文件。

在这个新文件中，放置最初在 index.html 文件中的相同 JavaScript 代码，不带 <script> 标记：

vueApp.js

const vm = new Vue({
        el: '#app',
        // Mock data for the value of BTC in USD
        data: { BTCinUSD: 3759.91, BTCinEURO:3166.21 }
      });

保存文件并在浏览器中重新加载 index.html。您将看到与之前看到的相同的结果。

我们希望支持更多的加密货币，而不仅仅是比特币，所以让我们看看我们是如何做到的。

第 3 步 — 使用 Vue 迭代数据

我们目前正在展示一些比特币价格的模拟数据。但是让我们也添加以太坊。为此，我们将重组数据并修改视图以使用新数据。

打开 vueApp.js 文件并修改数据模型，使其如下所示：

vueApp.js

const vm = new Vue({
        el: '#app',
        data: {
          results: {"BTC": {"USD":3759.91,"EUR":3166.21}, 
                    "ETH": {"USD":281.7,"EUR":236.25}}
        }
      });

我们的数据模型使用嵌套数据结构变得更加复杂。我们现在有一个名为 results 的键，其中包含两条记录；一个用于比特币价格，另一个用于以太坊价格。在我们看来，这种新结构将使我们减少一些重复。它也类似于我们将从 cryptocompare API 获得的数据。

保存文件。现在让我们修改我们的标记，以更加程序化的方式处理数据。

打开 index.html 文件并找到显示比特币价格的文件部分：

索引.html

...
    <div class="columns medium-4" >
      <div class="card">
        <div class="card-section">
          <p> BTC in USD  </p>
        </div>
        <div class="card-divider">
          {{BTCinUSD}}
        </div>
      </div>
    </div>

    <div class="columns medium-4" >
      <div class="card">
        <div class="card-section">
          <p> BTC in EURO  </p>
        </div>
        <div class="card-divider">
          {{BTCinEURO}}
        </div>
      </div>
    </div>

  </div>
...

将其替换为迭代您定义的数据集的代码。

索引.html

...
  <div class="columns medium-4" v-for="(result, index) in results">
    <div class="card">
      <div class="card-section">
        <p> {{ index }} </p>
      </div>
      <div class="card-divider">
        <p>$ {{ result.USD }}</p>
      </div>
      <div class="card-section">
        <p> &#8364 {{ result.EUR }}</p>
      </div>
    </div>
  </div>
...

此代码使用 v-for 指令，其作用类似于 for 循环。它遍历我们数据模型中的所有键值对并显示每个键值对的数据。

当您在浏览器中重新加载时，您会看到模拟价格：

此修改让我们可以在 vueApp.js 中的 results 数据中添加新货币，并使其显示在页面上而无需进一步更改。向数据集添加另一个模拟条目以尝试此操作：

vueApp.js

const vm = new Vue({
        el: '#app',
        data: {
          results: {"BTC":{"USD":3759.91,"EUR":3166.21},
                    "ETH":{"USD":281.7,"EUR":236.25},
                    "NEW Currency":{"USD":5.60,"EUR":4.70}}
        }
      });

不要忘记在 Etherium 条目之后添加尾随逗号。

如果您现在在 Web 浏览器中加载该页面，您将看到显示的新条目：

一旦我们以编程方式处理数据，我们就不需要手动在标记中添加新列。

现在让我们获取真实数据。

第 4 步 — 从 API 获取数据

是时候用来自 cryptocompare API 的实时数据替换我们的模拟数据了，以在网页上以美元和欧元显示比特币和以太坊的价格。

为了获取我们页面的数据，我们将向以下 URL 发出请求，该 URL 以美元和欧元请求比特币和以太币：

https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR

此 API 将返回 JSON 响应。使用 curl 向 API 发出请求以查看响应：

curl 'https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR'

你会看到这样的输出：

Output{"BTC":{"USD":11388.18,"EUR":9469.64},"ETH":{"USD":1037.02,"EUR":865.99}}

此结果看起来与您在上一步中使用的硬编码数据模型完全相同。我们现在要做的就是通过从我们的应用程序向该 URL 发出请求来切换数据。

为了发出请求，我们将使用 Vue 的 mounted() 函数和 Axios 库的 GET 函数来获取数据并将其存储在 [ X178X] 数据模型中的数组。一旦 Vue 应用程序安装到元素上，就会调用 mounted 函数。安装 Vue 应用程序后，我们将向 API 发出请求并保存结果。网页将收到更改通知，值将显示在页面上。

首先，打开 index.html 并通过在包含 Vue 的行下方添加一个脚本来加载 Axios 库：

索引.html

...
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
...

保存文件，然后打开 vueApp.js 并对其进行修改，以便向 API 发出请求并用结果填充数据模型。

[label vueApp.js]    

const url = "https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR";

const vm = new Vue({
        el: '#app',
        data: {
          results: []
        },
        mounted() {
          axios.get(url).then(response => {
            this.results = response.data
          })
        }
      });

请注意，我们已经删除了 results 的默认值，并将其替换为一个空数组。当我们的应用程序第一次加载时，我们不会有数据，但我们不希望出现问题。我们的 HTML 视图期望在加载时迭代一些数据。

axios.get 函数使用 Promise。当 API 成功返回数据时，then 块中的代码被执行，数据被保存到我们的 results 变量中。

保存文件并在网络浏览器中重新加载 index.html 页面。这次您将看到加密货币的当前价格。

如果您不这样做，请查看教程如何使用 JavaScript 开发人员控制台并使用 JavaScript 控制台调试您的代码。

结论

在不到 50 行代码中，您仅使用三个工具创建了一个使用 API 的应用程序：Vue.js、Axios 和 Cryptocompare API。您学习了如何在页面上显示数据、迭代结果以及将静态数据替换为来自 API 的结果。

现在您了解了基础知识，您可以将其他功能添加到您的应用程序中。修改此应用程序以显示其他货币，或使用您在本教程中学习的技术使用不同的 API 创建另一个 Web 应用程序。