如何使用Vue.js和Axios来显示API中的数据

子润先生

修改于 2021-06-15 11:05:38

8.7K0

修改于 2021-06-15 11:05:38

介绍

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

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

在本教程中，您将创建一个使用Cryptocompare API的Vue应用程序来显示两个主要加密货币的当前价格：比特币和Etherium。除了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，您无需下载其他代码即可开始构建应用程序。

的index.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应用程序并定义一个我们将在页面上显示的数据结构：

的index.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实例并通过传递一个配置对象来配置它。这个对象包含一个el选项，它指定了我们想要挂载这个应用程序的元素的id ，以及一个data选项，它包含了我们想要的视图数据。

在这个例子中，我们的数据模型包含一个键值对，它包含比特币价格的模拟值： { BTCinUSD: 3759.91} 。这些数据将显示在我们的HTML页面或我们的视图中 ，在我们将双键花括号括起来的地方显示如下：

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

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

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

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

的index.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>

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

的index.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文件的链接。

找到该文件的这一部分：

的index.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>
...

并修改它看起来像这样：

的index.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 。你会看到你之前看到过的结果。

我们希望支持比Bitcoiin更多的加密货币，所以让我们看看我们如何做到这一点。

第3步 - 使用Vue遍历数据

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

打开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的关键字，它包含两条记录; 一个用于比特币价格，另一个用于Etherium价格。我们认为这种新的结构可以让我们减少一些重复。它也类似于我们从cryptocompare API获得的数据。

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

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

的index.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>
...

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

的index.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-loop。它遍历数据模型中的所有键 - 值对并显示每个数据的数据。

当你在浏览器中重新加载时，你会看到嘲弄的价格：

通过此修改，我们可以将新货币添加到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的实时数据替换我们的模拟数据，以美元和欧元的形式在网页上显示比特币和以太坊的价格。

要获取我们网页的数据，我们将向以下网址发送请求，该网址以美元和欧元请求比特币和Etherium：

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函数结合使用来获取数据并将其存储在数据模型的results数组中。一旦Vue应用程序被挂载到一个元素， mounted函数就会被调用。一旦Vue应用程序被挂载，我们将向API发出请求并保存结果。网页将被通知更改并且值将出现在页面上。

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

的index.html

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

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

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成功返回数据时，将执行该块内的代码，并将数据保存到我们的results变量中。

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

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