介绍
Vue.js是一个前端JavaScript框架,用于构建用户界面。它从头开始被设计成可逐步采用,并与其他库或现有项目完美集成。
一个API,或应用程序编程接口,是一个软件中介程序,允许两个应用程序相互交谈。一个API通常暴露了其他开发人员可以在自己的应用程序中消耗的数据,而不必担心数据库或编程语言的差异。
在本教程中,您将创建一个Vue应用程序,该应用程序使用Cryptocompare API(https://www.cryptocompare.com/api/)来显示两个主要加密货币的当前价格:比特币和以太坊。除了Vue,您还将使用Axios库(https://github.com/axios/axios/blob/master/README.md)来执行API请求并处理所获得的结果。Axios非常适合,因为它自动将JSON数据转换为JavaScript对象,并支持(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises),导致代码更容易阅读和调试。
<$>[注] 注: Cryptocompare API 仅授权用于非商业用途。如果您希望在商业项目中使用它,请参阅其 授权条款 <$>)
前提条件
在您开始本教程之前,您将需要以下内容:
- 支持 JavaScript 语法突出的文本编辑器,如 Atom, Visual Studio Code或 Sublime Text。这些编辑器在 Windows, macOS 和 Linux 上可用。
- 熟悉使用 HTML 和 JavaScript 一起。 在 How To Add JavaScript to HTML中了解更多。
- 熟悉 JSON 数据格式,您可以在 How to Work with JSON in JavaScript中了解更多。
步骤 1 – 创建基本视图应用程序
在此步骤中,您将创建一个基本的Vue应用程序,我们将创建一个单一的HTML页面,其中包含一些模仿数据,最终将其替换为API的实时数据,我们将使用Vue.js来显示这些模仿数据。
使用您的文本编辑器创建一个名为index.html的新文件。
在此文件中,添加以下 HTML 标记,该标记定义了 HTML 骨骼,并将 Foundation CSS 框架和 Vue.js 库从内容交付网络(CDN)中引入。
1[label index.html]
2<!DOCTYPE html>
3<html lang="en">
4<head>
5<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css">
6 <meta charset="utf-8">
7 <title>Cryptocurrency Pricing Application</title>
8</head>
9
10 <body>
11 <div class="container" id="app">
12 <h3 class="text-center">Cryptocurrency Pricing</h3>
13 <div class="columns medium-4" >
14 <div class="card">
15 <div class="card-section">
16 <p> BTC in USD </p>
17 </div>
18 <div class="card-divider">
19 <p>{{ BTCinUSD }}</p>
20 </div>
21 </div>
22 </div>
23 </div>
24
25 <script src="https://unpkg.com/vue@3"></script>
26 </body>
27</html>
线 `{BTCinUSD }}' 是 Vue.js 将提供的数据的位置,这就是 Vue 允许我们在 UI 中宣示性地渲染数据的方式。
在 Vue 的<script>标签下方,添加此代码来创建一个新的 Vue 应用程序,并定义页面上显示的数据结构:
1[label index.html]
2...
3 <script>
4 const { createApp } = Vue
5
6 createApp({
7 data() {
8 return {
9 BTCinUSD: 3759.91
10 }
11 }
12 }).mount('#app')
13 </script>
14...
此代码创建了一个新的 Vue 应用实例,并将该实例附加到app的id元素中。Vue 将这个过程称为mounting_应用程序。我们定义了一个新的 Vue 实例,并通过传输配置 object来配置它。
向createApp实例传递一个数据对象,该数据返回了BTCinUSD的值。
在本示例中,我们的数据模型包含一个单一的关键值对,其持有比特币价格的伪造值:{ BTCinUSD: 3759.91}。
1[label index.html]
2<div class="card-divider">
3 <p>{{ BTCinUSD }}</p>
4</div>
最终,我们将用API的实时数据取代这个硬编码值。
在您的浏览器中打开此文件. 您将在屏幕上看到以下输出,该输出显示了模仿数据:
要以其他货币(如欧元)显示价格,我们将在我们的数据模型中添加另一个关键值对,并在标记中添加另一个列。
1[label index.html]
2 <script>
3 const { createApp } = Vue
4
5 createApp({
6 data() {
7 return {
8 BTCinUSD: 3759.91,
9 BTCinEURO: 3166.21
10 }
11 }
12 }).mount('#app')
13 </script>
然后用以下行替换现有的<div class>部分。
1[label index.html]
2 <div class="container" id="app">
3 <h3 class="text-center">Cryptocurrency Pricing</h3>
4 <div class="columns medium-4" >
5 <div class="card">
6 <div class="card-section">
7 <p> BTC in USD </p>
8 </div>
9 <div class="card-divider">
10 <p>{{ BTCinUSD }}</p>
11 </div>
12 </div>
13 </div>
14 <div class="columns medium-4" >
15 <div class="card">
16 <div class="card-section">
17 <p> BTC in EURO </p>
18 </div>
19 <div class="card-divider">
20 <p>{{ BTCinEURO }}</p>
21 </div>
22 </div>
23 </div>
24 </div>
现在保存该文件并在您的浏览器中重新加载。应用程序现在显示了比特币的价格,无论是在欧元还是美元。
在此步骤中,您创建了Vue应用程序,并使用了一些样本数据来确保其加载,我们迄今为止已经在单个文件中完成了所有工作,所以现在我们将把事情分成单独的文件来改善维护性。
第 2 步:分离 JavaScript 和 HTML for Clarity
要了解事情是如何工作的,我们将所有代码放置在一个文件中. 在这个步骤中,你将将应用程序代码分成两个单独的文件:index.html和vueApp.js.index.html文件将处理标记,JavaScript文件将包含应用程序逻辑。
首先,修改index.html文件并删除JavaScript代码,用链接到vueApp.js文件来取代。
查找此檔案的部分:
1[label index.html]
2...
3 <script src="https://unpkg.com/vue@3"></script>
4 <script>
5 const { createApp } = Vue
6
7 createApp({
8 data() {
9 return {
10 BTCinUSD: 3759.91,
11 BTCinEURO: 3166.21
12 }
13 }
14 }).mount('#app')
15 </script>
16...
然后修改它,看起来像这样:
1[label index.html]
2...
3 <script src="https://unpkg.com/vue@3"></script>
4 <script src="vueApp.js"></script>
5...
然后在与index.html文件相同的目录中创建vueApp.js文件。
在这个新文件中,放置原来的index.html文件中的相同的JavaScript代码,没有<script>标签:
1[label vueApp.js]
2 const { createApp } = Vue
3
4createApp({
5 data() {
6 return {
7 BTCinUSD: 3759.91,
8 BTCinEURO: 3166.21
9 }
10 }
11}).mount('#app')
保存文件并在浏览器中重新加载 `index.html. 你会看到你以前看到的相同的结果。
接下来,你会添加更多的数据来支持更多的加密货币,而不仅仅是比特币。
步骤 3 – 使用Vue对数据进行迭代
在此步骤中,您将重组数据并修改视图,以显示比特币和以太坊的价格。
打开vueApp.js文件,并修改数据模型的返回部分,使其看起来像这样:
1[label vueApp.js]
2const { createApp } = Vue
3
4createApp({
5 data() {
6 return {
7 results: {"BTC": {"USD":3759.91,"EUR":3166.21}, "ETH": {"USD":281.7,"EUR":236.25}}
8 }
9 }
10}).mount('#app')
我们的数据模型已经变得更复杂,有了嵌入式数据结构,我们现在有一个名为结果的密钥,其中包含两个记录:一个用于比特币价格,另一个用于以太坊价格。
保存檔案
现在,让我们修改我们的标记,以便以更编程的方式处理数据。
打开index.html文件并找到我们显示比特币价格的文件的这个部分:
1[label index.html]
2...
3 <div class="columns medium-4" >
4 <div class="card">
5 <div class="card-section">
6 <p> BTC in USD </p>
7 </div>
8 <div class="card-divider">
9 {{BTCinUSD}}
10 </div>
11 </div>
12 </div>
13
14 <div class="columns medium-4" >
15 <div class="card">
16 <div class="card-section">
17 <p> BTC in EURO </p>
18 </div>
19 <div class="card-divider">
20 {{BTCinEURO}}
21 </div>
22 </div>
23 </div>
24
25 </div>
26...
用此代码替换它,它在您定义的数据集上重复。
1[label index.html]
2...
3 <div class="columns medium-4" v-for="(result, index) in results">
4 <div class="card">
5 <div class="card-section">
6 <p> {{ index }} </p>
7 </div>
8 <div class="card-divider">
9 <p>$ {{ result.USD }}</p>
10 </div>
11 <div class="card-section">
12 <p> € {{ result.EUR }}</p>
13 </div>
14 </div>
15 </div>
16...
此代码使用了 v-for指令,它作为一个 for-loop。
当您在浏览器中重新加载时,您将看到嘲笑的价格:
这种修改允许我们在vueApp.js中的结果数据中添加一个新的货币,并在页面上显示它,而不会发生更改。
将另一个嘲笑的条目添加到数据集中以突出信息来尝试:
1[label vueApp.js]
2const { createApp } = Vue
3
4createApp({
5 data() {
6 return {
7 results: {"BTC": {"USD":3759.91,"EUR":3166.21},
8 "ETH": {"USD":281.7,"EUR":236.25},
9 "NEW Currency":{"USD":5.60,"EUR":4.70}}
10 }
11 }
12}).mount('#app')
包括以太坊输入后的追踪符号. 保存文件。
如果您现在在 Web 浏览器中加载该页面,您将看到显示的新条目:
一旦我们程序性地处理数据,我们不需要手动在标记中添加新的列。
在这里,您使用了样本数据来查看多个货币的定价,现在让我们使用Cryptocompare API获取实际数据。
步骤 4 – 从 API 获取数据
在此步骤中,您将用Cryptocompare API的实时数据替换模仿数据,以便在网页上以美元和欧元显示比特币和以太坊价格。
为了获取我们页面的数据,我们将向https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR发送请求,该请求以美元和欧元为比特币和以太坊。
使用‘curl’ 向 API 提出请求,以便在终端会话中查看响应:
1curl 'https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR'
你会看到这样的输出:
1[secondary_label Output]
2{"BTC":{"USD":21694.18,"EUR":21407.64},"ETH":{"USD":1504.02,"EUR":1485.99}}
这个结果看起来像你在上一个步骤中使用的硬编码数据模型,但与目前的价值比特币和以太坊。
要提出请求,我们将使用 Vue 的 mounted() 函数,结合 Axios 库的 'GET' 函数来获取数据并将其存储在数据模型中的'results' 数组中。
首先,打开index.html,并通过在您包含Vue的行下方添加脚本来加载Axios库:
1[label index.html]
2...
3 <script src="https://unpkg.com/vue@3"></script>
4 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
5 <script src="vueApp.js"></script>
6...
保存文件,然后打开vueApp.js。
修改和更新vueApp.js,以便它向API提出请求,并用结果填写数据模型。
1[label vueApp.js]
2const url = "https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR";
3const { createApp } = Vue
4
5createApp({
6 data() {
7 return {
8 results:[]
9 }
10},
11 mounted() {
12 axios.get(url).then(response => {
13 this.results = response.data
14 })
15 }
16}).mount('#app')
请注意,我们已经删除了结果的默认值,并将其替换为空数组. 当我们的应用首次加载时,我们将没有数据,但HTML视图预计一些数据在加载时会迭代。
axios.get函数使用一个 Promise。当API成功返回数据时,在然后块内的代码被执行,并且数据被保存到我们的结果变量中。
保存文件并在网页浏览器中重新加载index.html页面,此时,您将看到加密货币的当前价格。
如果您看不到任何内容,您可以查看 如何使用 JavaScript 开发者控制台并使用 JavaScript 控制台来调试您的代码。
您还可以查看此 Github 存储库,其中包含可下载的 html 和 js 文件,以进行交叉确认。
在此步骤中,您修改了您的应用程序以调用实时数据进行审查。
结论
在不到五十行之内,您只使用三种工具创建了使用 API 的应用程序:Vue.js、Axios 和 Cryptocompare API. 您学会了如何在页面上显示数据,重复结果,并用 API 中的结果替换静态数据。
现在你已经了解了基本知识,你可以为你的应用程序添加其他功能. 修改这个应用程序以显示额外的货币,或者使用你在本教程中学到的技术来使用不同的API创建另一个Web应用程序。