內(nèi)容
Vue.js 是用于構(gòu)建用戶界面的前端 JavaScript 框架。 它從一開始就設(shè)計為可逐步采用塞赂，能和其他圖書館或現(xiàn)有項目很好地結(jié)合泪勒。 這使得它非常適合小型項目以及與其他工具和庫一起使用時復(fù)雜的單頁面應(yīng)用程序。
API 應(yīng)用程序接口是允許兩個應(yīng)用程序相互通信的軟件中介宴猾。 API 經(jīng)常公開其他開發(fā)人員在自己的應(yīng)用程序中使用的數(shù)據(jù)圆存，而不必擔心數(shù)據(jù)庫或編程語言的差異。 開發(fā)人員往往從返回 JSON 格式數(shù)據(jù)的 API 中獲取數(shù)據(jù)仇哆，他們把這些數(shù)據(jù)集成到前端應(yīng)用程序中沦辙。,Vue.js 非常適合使用這些 API 。
在本教程中讹剔，您將創(chuàng)建一個 Vue 應(yīng)用程序油讯，該應(yīng)用程序使用 CryptoCompare API 顯示兩種主要加密貨幣的當前價格：比特幣和 Etherium。 除了 Vue 之外延欠，您還將使用 Axios 庫來發(fā)出 API 請求并處理獲得的結(jié)果陌兑。
Axios 非常適合，因為它可以自動將 JSON 數(shù)據(jù)轉(zhuǎn)換為 JavaScript 對象衫冻，并且它支持 Promises诀紊，從而使代碼更易于閱讀和調(diào)試。 為了讓事情看起來不錯隅俘，我們將使用基礎(chǔ) CSS 框架邻奠。
注意：CryptoCompare API 僅可用于非商業(yè)用途。 如果您希望在商業(yè)項目中使用它为居，請查看其許可條款碌宴。
先決條件
在開始本教程之前，您需要以下內(nèi)容：
- 支持 JavaScript 語法突出顯示的文本編輯器蒙畴，例如 Atom贰镣，Visual Studio Code 或 Sublime Text 呜象。這些編輯器可以在Windows、macOS 和 Linux 上使用碑隆。
- 熟悉一起使用 HTML 和 JavaScript 恭陡。 詳細知道如何將 JavaScript 添加到 HTML 。
- 熟悉 JSON 數(shù)據(jù)格式上煤，您可以在 JavaScript 中了解如何使用 JSON 休玩。
- 熟悉向 API 發(fā)出請求。 有關(guān) API 的詳細教程劫狠，請參閱 如何在 Python3 中使用 Web API 拴疤。 雖然它是為 Python 編寫的，但它仍然可以幫助您理解使用 API 的核心概念独泞。
第1步 – 創(chuàng)建基本 Vue 應(yīng)用程序
讓我們創(chuàng)建一個基本的 Vue 應(yīng)用程序呐矾。 我們將構(gòu)建一個包含一些模擬數(shù)據(jù)的 HTML 頁面，我們最終將使用 API 中的實時數(shù)據(jù)替換這些數(shù)據(jù)懦砂。 我們將使用 Vue.js 來顯示這個模擬數(shù)據(jù)蜒犯。
對于第一步，我們將所有代碼保存在一個文件中孕惜。使用文本編輯器創(chuàng)建一個名為 index.html 的新文件愧薛。在此文件中，添加以下 HTML 標記衫画，該標記定義 HTML 框架，并從內(nèi)容交付網(wǎng)絡(luò)（CDN）中提取 Foundation CSS 框架和 Vue.js 庫瓮栗。 通過使用 CDN削罩，您不需要下載額外的代碼即可開始構(gòu)建應(yīng)用程序。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
>
<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 將提供的數(shù)據(jù)的占位符费奸， 這就是 Vue 如何讓我們在 UI 中以聲明方式呈現(xiàn)數(shù)據(jù)的方式弥激。 讓我們定義那些數(shù)據(jù)。
在包含 Vue 的 < script > 標記的正下方愿阐，添加此代碼微服，創(chuàng)建一個新的 Vue 應(yīng)用程序并定義我們將在頁面上顯示的數(shù)據(jù)結(jié)構(gòu)：
<script>
const vm = new Vue({
el: '#app',
//Mock data for the value of BTC in USD
data: { BTCinUSD: 3759.91}
});
</script>
此代碼創(chuàng)建一個新的 Vue 應(yīng)用程序?qū)嵗嵗郊拥?id 為 app 的元素缨历，Vue 將此過程稱為安裝應(yīng)用程序以蕴。
我們定義一個新的 Vue 實例并通過傳遞配置對象來配置它。 該對象包含一個 el 選項辛孵，它指定我們要在其上安裝此應(yīng)用程序的元素的 id丛肮，以及一個包含我們想要的視圖數(shù)據(jù)的數(shù)據(jù)選項。
在此示例中，我們的數(shù)據(jù)模型包含一個鍵值對，其中包含比特幣價格的模擬值：{BTCinUSD：3759.91}昧旨。 這些數(shù)據(jù)將顯示在我們的 HTML 頁面或我們的視圖中陷虎，在這里我們將密鑰括在雙花括號中上祈，如下所示：
<div class="card-divider">
<p>{{ BTCinUSD }}</p>
</div>
我們最終將使用 API 中的實時數(shù)據(jù)替換此硬編碼值忽肛。
在瀏覽器中打開此文件温鸽。 您將在屏幕上看到以下輸出寄月，其中顯示模擬數(shù)據(jù)：
我們用美元顯示價格诽里。 如果要以歐元等其他貨幣顯示袒餐，我們需要在數(shù)據(jù)模型中添加另一個鍵值對，并在標記中添加另一列须肆。
首先匿乃，更改數(shù)據(jù)模型：
<script>
const vm = new Vue({
el: '#app',
//Mock data for the value of BTC in USD
data: { BTCinUSD: 3759.91, BTCinEURO:3166.21 }
});
</script>
然后在標記中添加一個新部分，在現(xiàn)有代碼下方以歐元顯示價格
<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>
保存文件并在瀏覽器中重新加載豌汇。 該應(yīng)用程序現(xiàn)在以歐元和美元顯示比特幣的價格幢炸。
我們在一個文件中完成了所有工作。 讓我們分解一下來提高可維護性拒贱。
第2步 – 清晰度分離 JavaScript 和 HTML
為了了解工作原理宛徊，我們將所有代碼放在一個文件中。 現(xiàn)在讓我們將應(yīng)用程序代碼分成兩個單獨的文件逻澳，index.html 和 VueApp.js闸天。 index.html 文件將處理標記部分，JavaScript文件將包含應(yīng)用程序邏輯斜做。 這將使我們的應(yīng)用程序更易于維護苞氮。 我們將兩個文件保存在同一目錄中。
首先瓤逼，修改 index.html 文件并刪除 JavaScript 代碼笼吟，將其替換為 VueApp.js 文件的鏈接。
找到文件的這一部分：
<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>
并修改它霸旗，使它看起來像這樣：
<script src="https://unpkg.com/vue"></script>
<script src="vueApp.js"></script>
然后在與 index.html 文件相同的目錄中創(chuàng)建 VueApp.js 文件贷帮。
在這個新文件中，放置最初在 index.html 文件中的相同 JavaScript 代碼诱告，不帶 < script > 標記：
const vm = new Vue({
el: '#app',
// Mock data for the value of BTC in USD
data: { BTCinUSD: 3759.91, BTCinEURO: 3166.21 }
})
保存文件并在瀏覽器中重新加載 index.html撵枢。 您將看到之前看到的相同結(jié)果。
我們想要支持比 Bitcoiin 更多的加密貨幣精居，所以讓我們來看看我們是如何做到這一點的锄禽。
第3步 – 使用 Vue 迭代數(shù)據(jù)
我們目前正在展示一些比特幣價格的模擬數(shù)據(jù)。 但是我們也要添加 Etherium箱蟆。 為此沟绪，我們將重組數(shù)據(jù)并修改視圖以使用新數(shù)據(jù)。
打開 VueApp.js 文件并修改數(shù)據(jù)模型空猜，使其如下所示：
const vm = new Vue({
el: '#app',
data: {
results: {"BTC": {"USD":3759.91,"EUR":3166.21},
"ETH": {"USD":281.7,"EUR":236.25}}
}
});
使用嵌套數(shù)據(jù)結(jié)構(gòu)绽慈，我們的數(shù)據(jù)模型變得更加復(fù)雜恨旱。 我們現(xiàn)在有一個名為 results 的鍵，其中包含兩個記錄： 一個用于比特幣價格坝疼，另一個用于 Etherium 價格搜贤。 這個新結(jié)構(gòu)將讓我們減少一些重復(fù)的視圖。 它也類似于我們從 CryptoCompare API 獲得的數(shù)據(jù)钝凶。
保存文件仪芒。 現(xiàn)在修改我們的標記，以更加編程的方式處理數(shù)據(jù)耕陷。
打開 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>
將其替換為以下代碼，該代碼迭代您定義的數(shù)據(jù)集哟沫。
<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> € {{ result.EUR }}</p>
</div>
</div>
</div>
此代碼使用 v-fo r指令饺蔑，其作用類似于 for 循環(huán)。 它迭代我們數(shù)據(jù)模型中的所有鍵值對嗜诀，并顯示每個鍵值對的數(shù)據(jù)猾警。
當您在瀏覽器中重新加載它時，您將看到模擬的價格：
此修改允許我們在 VueApp.js 中為結(jié)果數(shù)據(jù)添加新貨幣隆敢，并使其顯示在頁面上而無需進一步更改发皿。
將另一個模擬條目添加到數(shù)據(jù)集以嘗試此操作：
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 輸入后不要忘記添加尾隨逗號。
如果現(xiàn)在在 Web 瀏覽器中加載頁面拂蝎，您將看到顯示的新條目：
一旦我們以編程方式處理數(shù)據(jù)穴墅，我們就不需要手動在標記中添加新列。
現(xiàn)在讓我們獲取真實數(shù)據(jù)温自。
第4步 – 從 API 獲取數(shù)據(jù)
現(xiàn)在是時候用來自 CryptoCompare API 的實時數(shù)據(jù)替換我們的模擬數(shù)據(jù)封救，以美元和歐元顯示網(wǎng)頁上比特幣和以太坊的價格。
要獲取我們頁面的數(shù)據(jù)捣作，我們將向以下 URL 發(fā)出請求，該 URL 以美元和歐元請求比特幣和 Etherium：
https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR
此 API 將返回 JSON 響應(yīng)鹅士。 使用 curl 向 API 發(fā)出請求以查看響應(yīng)：
$ 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}}
此結(jié)果與您在上一步中使用的硬編碼數(shù)據(jù)模型完全相同券躁。 我們現(xiàn)在要做的就是通過從我們的應(yīng)用程序發(fā)出對此 URL 的請求來切換數(shù)據(jù)。
為了發(fā)出請求掉盅，我們將使用 Vue 中的 mounted（） 函數(shù)和 Axios 庫的 GET 函數(shù)來獲取數(shù)據(jù)并將其存儲在數(shù)據(jù)模型的結(jié)果數(shù)組中也拜。 一旦將 Vue 應(yīng)用程序安裝到元素上，就會調(diào)用掛載的函數(shù)趾痘。 安裝 Vue 應(yīng)用程序后慢哈，我們將向 API 發(fā)出請求并保存結(jié)果，通知網(wǎng)頁更改永票，并且值將顯示在頁面上卵贱。
首先滥沫，打開 index.html 并通過在包含 Vue 的行下面添加一個腳本來加載 Axios 庫：
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
保存文件，然后打開 VueApp.js 并對其進行修改键俱，以便向 API 發(fā)出請求并使用結(jié)果填充數(shù)據(jù)模型兰绣。
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
})
}
});
請注意，我們已刪除結(jié)果的默認值编振，并將其替換為空數(shù)組缀辩。 我們的應(yīng)用程序首次加載時，我們不會有數(shù)據(jù)踪央，但我們不希望事情中斷臀玄。 我們的 HTML 視圖期望一些數(shù)據(jù)在加載時迭代。
axios.get 函數(shù)使用 Promise畅蹂， 當 API 成功返回數(shù)據(jù)時健无，將執(zhí)行 then 塊中的代碼，并將數(shù)據(jù)保存到結(jié)果變量中魁莉。
保存文件并在 Web 瀏覽器中重新加載 index.html 頁面睬涧。 這次你會看到加密貨幣的當前價格。
如果不這樣做旗唁，請查看教程 如何使用 JavaScript Developer Console 并使用 JavaScript 控制臺調(diào)試代碼畦浓。
結(jié)論
在不到50行代碼中，您僅使用三個工具創(chuàng)建了一個消耗 API的 應(yīng)用程序：Vue.js检疫，Axios 和 CryptoCompare API讶请。 您學習了如何在頁面上顯示數(shù)據(jù)，迭代結(jié)果屎媳，以及使用 API 的結(jié)果替換靜態(tài)數(shù)據(jù)夺溢。
既然您已了解基礎(chǔ)知識，那么您可以為應(yīng)用程序添加其他功能烛谊。 修改此應(yīng)用程序以顯示其他貨幣风响，或使用您在本教程中學習的技術(shù)使用其他 API 創(chuàng)建其他 Web 應(yīng)用程序。
