前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Axios 教程:Vue + Axios 安装及实战 - 手把手教你搭建加密币实时价格看板

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

原创
作者头像
蒋川
发布2022-03-19 00:30:16
4.2K0
发布2022-03-19 00:30:16
举报
文章被收录于专栏:卡拉云
Axios 教程:Vue + Axios 安装及实战教程 - 手把手教你搭建加密币实时价格看板
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
02-05-real-btc

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

如何安装 Axios

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

  • npm:
代码语言:txt
复制
npm install axios
  • bower:
代码语言:txt
复制
bower install axios
  • yarn:
代码语言:txt
复制
yarn add axios
  • CDN 方法一:
代码语言:txt
复制
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  • CDN 方法二:
代码语言:txt
复制
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

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

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

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

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

代码语言:txt
复制
<!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 }}

在 <script src="https://unpkg.com/vue"></script> 的下面添加以下代码,我们来创建一个新的 Vue app 并定义在 index.html 页面上显示的数据结构:

代码语言:txt
复制
...

    <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 页面上。

代码语言:txt
复制
<div class="card-divider">
<p> {{ BTCinCNY }} </p>
</div>

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

02-01-btcincny-app
02-01-btcincny-app

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

代码语言:txt
复制
<script>
const vm = new Vue({
        el: '#app',

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

</script>

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

代码语言:txt
复制
...
<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

代码语言:txt
复制
<!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
02-02-btc-cny-usd-app

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

第 2 步:分离 JavaScript 和 HTML

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

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

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

代码语言:txt
复制
...
    <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 的 <script>

代码语言:txt
复制
...
    <script src="https://unpkg.com/vue"></script>
    <script src="vueApp.js"></script>
...

然后,在 index.html 的存放目录中,新建 vueApp.js 文件,代码如下:

代码语言:txt
复制
const vm = new Vue({
        el: '#app',
        data: { BTCinCNY: 73759.99,BTCinUSD: 3759.91 }
      });

保存 vueApp.js 文件并在浏览器重新打开 index.html ,你会发现显示结果没有任何变化。

下一步,我们加入更多加密币的实时行情。

第 3 步:使用 Vue 加载数据

当前页面我们加载了比特币的模拟价格,我们再来加上一个以太币的模拟价格。我们来重构一下视图和模拟数据。

打开vueApp.js文件,修改数据,代码如下:

代码语言:txt
复制
const vm = new Vue({
        el: '#app',
        data: {
          results: {"BTC": {"CNY":73759.99,"USD":3166.21}, 
                    "ETH": {"CNY":33581.77,"USD":2336.25}}}
      });

由于数据的嵌套结构,我们使用 results 作为键,它包含两条记录,一个是比特币价格,一个是以太币价格。这种结构合并同类项,让数据展示和读取更简洁。

接着我们打开index.html文件并找到显示加密币的部分:

代码语言:txt
复制
...
    <div class="columns medium-4" >
      <div class="card">
        <div class="card-section">
          <p> 比特币:人民币  </p>
        </div>
        <div class="card-divider">
          {{BTCinCNY}}
        </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>
...

用以下代码替换上面的代码块:

代码语言:txt
复制
...
  <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.CNY }}</p>
      </div>
      <div class="card-section">
        <p> $ {{ result.USD }}</p>
      </div>
    </div>
  </div>
...

这段代码使用来[v-for](https://vuejs.org/v2/api/#v-for) 指令就像一个 for 循环。它遍历我们数据中的所有 key - value

在浏览器中重新加载 index.html,可以看到以下样式:

02-03-btc-eth
02-03-btc-eth

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

接下来,我们再向 results 里加入一个新的数字货币。这一次,我们无需修改 index.html 就可以自动更新。

修改 vueApp.js 文件,直接使用下面的代码替换即可

代码语言:txt
复制
const vm = new Vue({
  el: '#app',
  data: {
    results: {
      "BTC": {
        "CNY": 73759.99,
        "USD": 3166.21
      },
      "ETH": {
        "CNY": 33581.77,
        "USD": 2336.25
      },
      "LINK": {
        "CNY": 182.62,
        "USD": 26.49
      }
    }
  }
});

保存后,刷新 index.html 页面,可以看到下面的效果

02-04-btc-eth-link
02-04-btc-eth-link

如果你也做出来本教程的效果,那么太棒了。接下来,我们要接真实的 API 了。

扩展阅读:《7 种最棒的 Vue Loading 加载动画组件测评与推荐 - 穷尽市面上所有加载动画效果(Vue loader)类型

第 4 步:使用 Axios 从 API 读取数据

我们使用 Cryptocompare 加密币行情网站的实时报价 API 来替换模拟价格数据。

加密货币实时价格 API :

代码语言:txt
复制
https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,LINK&tsyms=CNY,USD

这个 API 请求比特币、以太坊币、ChainLink币的人民币价格和美元价格。

我们可以用curl向 API 发送请求查看响应:

代码语言:txt
复制
curl 'https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,LINK&tsyms=CNY,USD'

请求返回输出如下:

代码语言:txt
复制
{"BTC":{"CNY":281999.94,"USD":40928.18},"ETH":{"CNY":20758.02,"USD":3012.21},"LINK":{"CNY":182.62,"USD":26.49}}

API 返回结果与我们的模拟价格数据几乎一样,我们现在要做的是用 API 中的数据替换掉模拟数据。

为了发送请求,我们使用 [mounted()](https://vuejs.org/v2/api/#mounted) Vue 函数,结合 Axios 请求库中的 GET 函数获取数据,然后把读取的数据存在 results 数组中。

我们要在 index.html 中加入加载 Axios 库的代码:

代码语言:txt
复制
...
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="vueApp.js"></script>
...

再打开 vueApp.js 加入请求 API 地址和修改数据存储方式:

代码语言:txt
复制
const url = "https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,LINK&tsyms=CNY,USD";

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

使用axios.get 函数,当 API 成功返回数据时,then 开始执行,并将数据保存在 results 变量中。

在浏览器重新打开index.html,这时网页上显示的就是真实的加密数字货币实时报价了。

02-05-real-btc
02-05-real-btc

恭喜,你完成了 Vue + Axios 的加密行情看板的搭建。

如果你觉得前端写起来太麻烦,更愿意把宝贵的时间用在深度思考上的话。

我推荐你使用卡拉云,卡拉云无需懂任何前端技术,仅需要拖拽即可快速搭建任何工具系统。

03-kalacloud
03-kalacloud

卡拉云可快速接入数据库、API,这是我花了 1 分钟搭出来的加密数字看板,你还可以分享给身边的小伙伴一起使用。

立即使用卡拉云,搭建属于你自己的数据工具工具。

前端搭起来太费劲?

试试卡拉云,无需处理任何前端问题,仅需简单拖拽组件,即可直接生成后台系统,数月工作量降至 2 天。

立即试用

Axios 各类调用方式

Axios 响应对象架构

Axios 请求的响应返回信息包含:

  • data: API 返回的数据
  • status: HTTP 状态码
  • statusText: HTTP 状态信息
  • headers:HTTP 标头
  • configaxios:请求配置

Axios 响应数据

Axios 响应对象具有data包含解析响应正文的字段。我们可以使用then或 await 接收数据。

如下所示:

代码语言:txt
复制
axios.get('kalacloud.com/api')
  .then(function (response) {
    console.log(response.data);
  });

const { data } = await axios.get(url);

Axios 错误处理

使用 catch() 做错误处理

代码语言:txt
复制
axios.get('kalacloud.com/api')
  .then(...)
  .catch(function (error) {
    if (error.response) { // 返回的状态代码不在 2xx 范围内,即错误代码。
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) { // 没有返回
      console.log(error.request);
    } else {
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

扩展阅读:《顶级好用的 8 款 Vue 弹窗组件测评与推荐

使用 async-await 处理 Axios 错误

如果你想使用 async-await,只需用 try / catch 块包装 axios 调用。

代码语言:txt
复制
async function getTodo() {
  try {
    const response = await axios.get('kalacloud.com/api');
    console.log(response);
  } catch (error) {
    if (error.response) { // 返回的状态代码不在 2xx 范围内,即错误代码。
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) { // 没有返回
      console.log(error.request);
    } else {
      console.log('Error', error.message);
    }
    console.log(error.config);
  }
}

Axios GET 请求

代码语言:txt
复制
axios.get('kalacloud.com/api')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
  });

Async / await:

代码语言:txt
复制
async function getTodo() {
  try {
    const response = await axios.get('kalacloud.com/api');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

扩展阅读:《ECharts X 轴标签过长导致文字重叠的 4 种解决方案

Axios GET 带参数请求

你可以使用 params 来带 API 提供的参数。

代码语言:txt
复制
axios.get(
  'kalacloud.com/api',
  {
    params: {
      title: '标题数据'
    }
  }
);

当然也可以这么写,他们效果一样。

代码语言:txt
复制
axios.get('/todo?title=标题数据');

Axios GET 带 headers 请求

代码语言:txt
复制
axios.get(
  'kalacloud.com/api',
  {
    headers: {
      'x-access-token': 'token-value'
    }
  }
);

Axios GET 同时带参数和 headers 请求

代码语言:txt
复制
axios.get(
  'kalacloud.com/api‘,
  {
    params: {
      title: '标题数据'
    },
    headers: {
      'x-access-token': 'token-value'
    }
  }
);

扩展阅读:《12 款最棒 Vue 开源 UI 库测评 - 特别针对国内使用场景推荐

Axios PUT 请求

代码语言:txt
复制
axios.put(
  'kalacloud.com/api/1',
  {
    title: title,
    description: description,
    published: true,
  }
);

Axios POST 带 body 请求

代码语言:txt
复制
axios.post(
  'kalacloud.com/api',
  {
    title: title,
    description: description,
  }
);

扩展阅读:《最好用的 12 款 Vue Timepicker 时间日期选择器测评推荐

Axios POST 带 headers 请求

代码语言:txt
复制
await axios.post(
  'kalacloud.com/api',
  {
    title: title,
    description: description,
  },
  {
    headers: {
      "x-access-token": "token-value",
    },
  }
);

Axios PUT 带 headers 请求

代码语言:txt
复制
axios.put(
  'kalacloud.com/api2',
  {
    title: title,
    description: description,
    published: true,
  },
  {
    headers: {
      "x-access-token": "token-value",
    },
  }
);

扩展阅读:《Vue + Node.js 搭建「文件上传」管理后台

Axios DELETE 请求

代码语言:txt
复制
axios.delete('kalacloud.com/api/2');

Axios DELETE 带 headers 请求

代码语言:txt
复制
axios.delete(
  'kalacloud.com/api/2',
  {
    headers: {
      "x-access-token": "token-value",
    },
  }
);

Vue + Axios 搭建总结

首先恭喜你使用 Vue + Axios 搭建完成「加密币实时行情看板」,这说明你已经基本掌握了这项技能。前端开发就是这么繁琐和重复,需要你不断练习掌握。

那么,有没有完全不用写前端,直接填上数据库地址或 API 地址就能搭出可用的后台工具呢?

有。 推荐使用卡拉云,卡拉云帮你解决了前后端搭建的全部问题,你完全不用掌握任何前端后端技术,只需要几行代码,即可接入数据库 & API 。再复杂的项目,也只需正常开发的 10% 的工时即可完成。

97-kalacloud-mianbaoduo
97-kalacloud-mianbaoduo

卡拉云是一套低代码开发工具,仅需简单拖拽即可快速搭建后台工具。立即试用卡拉云,一分钟快速搭建属于你自己的后台工具。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 如何安装 Axios
  • 第 1 步:创建一个最简单的 Vue Web APP
  • 第 2 步:分离 JavaScript 和 HTML
  • 第 3 步:使用 Vue 加载数据
  • 第 4 步:使用 Axios 从 API 读取数据
  • 前端搭起来太费劲?
  • Axios 各类调用方式
    • Axios 响应对象架构
      • Axios 响应数据
        • Axios 错误处理
          • 使用 async-await 处理 Axios 错误
            • Axios GET 请求
              • Async / await:
                • Axios GET 带参数请求
                  • Axios GET 带 headers 请求
                    • Axios GET 同时带参数和 headers 请求
                      • Axios PUT 请求
                        • Axios POST 带 body 请求
                          • Axios POST 带 headers 请求
                            • Axios PUT 带 headers 请求
                              • Axios DELETE 请求
                                • Axios DELETE 带 headers 请求
                                • Vue + Axios 搭建总结
                                相关产品与服务
                                腾讯云 BI
                                腾讯云 BI(Business Intelligence,BI)提供从数据源接入、数据建模到数据可视化分析全流程的BI能力,帮助经营者快速获取决策数据依据。系统采用敏捷自助式设计,使用者仅需通过简单拖拽即可完成原本复杂的报表开发过程,并支持报表的分享、推送等企业协作场景。
                                领券
                                问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档