0

Axios 教程：Vue + Axios 安装及实战 - 手把手教你搭建加密币实时价格看板

 2 years ago
source link: https://studygolang.com/articles/35543
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Axios 教程：Vue + Axios 安装及实战 - 手把手教你搭建加密币实时价格看板

HiJiangChuan · 4天之前 · 181 次点击 · 预计阅读时间 18 分钟 · 大约8小时之前 开始浏览    

Axios 教程：Vue + Axios 安装及实战教程 - 手把手教你搭建加密币实时价格看板

本文首发：《Axios 教程：Vue + Axios 安装及实战 - 手把手教你搭建加密币实时价格看板 - 卡拉云》

Axios 是一个基于 Promise 的 HTTP 请求库，它用在 node.js 和浏览器里。本教程教你如何使用 Axios 库发出 API 请求远程调取数据。

在本教程中，你将学到如何使用 Vue + Axios 搭建一套加密币实时行情看板，你会学到 Axios 如何向加密货币行情 API 请求数据，存储数据，然后使用 Vue 在前端展示这些数据，最终完成「实时行情看板」的搭建。为了让看板看起来更漂亮，我们将使用 Foundation CSS 框架。

本教程将手把手教你如何通过 Axios 读取 API 数据，搭建一套加密币实时价格看板。

02-05-real-btc

「加密币实时行情看板」最终效果。前端使用 Vue + Axios，后端调用加密币行情 API，读完本教程，你也能搭建一套属于自己的加密币行情数据看板。

如何安装 Axios

可以使用以下简单方法之一将 Axios 添加到我们的项目/代码中：

npm install axios
  • bower：
bower install axios
  • yarn：
yarn add axios
  • CDN 方法一：
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  • CDN 方法二：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

我们还是来一起搭一个实战项目来学习如何使用 Axios 吧，请务必跟随本教程一起操作。

第 1 步：创建一个最简单的 Vue Web APP

我们先来创建一个最简单的 Vue APP，循序渐进，方便大家理解。

我们新建一个 index.html 文件，先在这个页面里写入一组模拟数据，使用 Vue.js 来显示这个模拟数据。后文我们会用真实的 API 来进行替换。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css">
  <meta charset="utf-8">
  <title> 卡拉云 - 加密币实时行情 </title>
</head>

  <body>
    <div class="container" id="app">
      <h3 class="text-center"> 卡拉云 - 加密币实时行情</h3>
      <div class="columns medium-4" >
        <div class="card">
          <div class="card-section">
            <p> 比特币：人民币 </p>
          </div>
          <div class="card-divider">
            <p> {{ BTCinCNY }} </p>
          </div>
        </div>
      </div>
    </div>

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

在这段 HTML 文件里，我们通过 CDN 加载了 Foundation CSS 框架和 Vue.js。只需简单两行，他们就被加载进来，无需下载到本地。

从 Vue.js 中获取的数据会映射到 {{ BTCinCNY }} 里，这就是 Vue 在 HTML 中呈现数据的方式。

我们来定义一下 {{ BTCinCNY }}

在 的下面添加以下代码，我们来创建一个新的 Vue app 并定义在 index.html 页面上显示的数据结构：

...

    <script>
      const vm = new Vue({
              el: '#app',
              data: { BTCinCNY: 73759.99}
              // 这里是模拟数据，后文我们会用 API 数据替换
            });

    </script>
...

这段代码创建了一个新 Vue 应用实例，并将这个实例赋到「 id = app 」到元素上。Vue 把这个过程叫做加载应用。我们定义了一个新 Vue 实例，通过配置对象对这个应用进行配置，[el](https://v3.cn.vuejs.org/api/application-api.html#el) 指定了加载应用对应的元素 ID，以及包含的数据。

在这个实例中，包含一组「key-value」即 { BTCinCNY: 73759.99 } 这组数据会通过以下代码显示在 HTML 页面上。

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

更新 index.html 我们在浏览器中打开，显示效果如下图

02-01-btcincny-app

我们再来加上比特币的美元价格，在 index.html 中修改加入美元价格。

<script>
const vm = new Vue({
        el: '#app',

        data: { BTCinCNY: 73759.99,BTCinUSD: 3759.91 }
          // 这里是模拟数据，后文我们会用 API 数据替换
      });

</script>

然后向标记（div）中添加美元显示的表格部分

...
<div class="columns medium-4" >
      <div class="card">
        <div class="card-section">
          <p> 比特币：美元  </p>
        </div>
        <div class="card-divider">
          {{BTCinUSD}}
        </div>
      </div>
    </div>
...

index.html 的完整修改版。请将这段代码更新至 index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css">
    <meta charset="utf-8">
    <title> 卡拉云 - 加密币实时行情 </title>
  </head>

  <body>
    <div class="container" id="app">
      <h3 class="text-center"> 卡拉云 - 加密币实时行情</h3>
      <div class="columns medium-4">
        <div class="card">
          <div class="card-section">
            <p> 比特币：人民币 </p>
          </div>
          <div class="card-divider">
            <p> {{ BTCinCNY }} </p>
          </div>
        </div>

      </div>
      <div class="columns medium-4">
        <div class="card">
          <div class="card-section">
            <p> 比特币：美元 </p>
          </div>
          <div class="card-divider">
            {{ BTCinUSD }}
          </div>
        </div>

      </div>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script>
      const vm = new Vue({
        el: '#app',

        data: {
          BTCinCNY: 73759.99,
          BTCinUSD: 3759.91
        }
        // 这里是模拟数据，后文我们会用 API 数据替换
      });
    </script>
  </body>
</html>

更新 index.html 后，在浏览器打开显示效果如下：

02-02-btc-cny-usd-app

扩展阅读：《Video.js 使用教程 - 手把手教你基于 Vue 搭建 HTML 5 视频播放器》

第 2 步：分离 JavaScript 和 HTML

在第 1 步中，为了给大家更好的展示工作原理，我们将所有代码都放在 index.html 一个文件中，现在我们要把前端和后端数据分成两个独立的文件存放，即 index.html和vueApp.js 。

在 index.html中，显示比特币对应的多种价格。而在 vueApp.js 文件中，用于读取数据。将显示和数据页面拆分开来，更便于我们日常维护。

我们先把 index.html 文件中 JavaScript 的代码删掉，将这段指向 vueApp.js 文件

...
    <script src="https://unpkg.com/vue"></script>
    <script  language="JavaScript">
    const vm = new Vue({
            el: '#app',
            data: { BTCinCNY: 73759.99,BTCinUSD: 3759.91 }
          });
    </script>
...

将 vm 整段删掉，替换为指向 vueApp.js 的

有疑问加站长微信联系（非本文作者））

280

入群交流（和以上内容无关）：加入Go大咖交流群，或添加微信：liuxiaoyan-s 备注：入群；或加QQ群：701969077


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK