Как использовать Vue.js и Axios для отображения данных из API
Введение
Vue.js — это интерфейсный JavaScript-фреймворк для создания пользовательских интерфейсов. Он разработан с нуля, чтобы его можно было постепенно адаптировать, и он хорошо интегрируется с другими библиотеками или существующими проектами. Такой подход делает его подходящим для небольших проектов, а также сложных одностраничных приложений при использовании с другими инструментами и библиотеками.
API или интерфейс прикладного программирования — это программный посредник, который позволяет двум приложениям взаимодействовать друг с другом. API часто предоставляет данные, которые другие разработчики могут использовать в своих собственных приложениях, не беспокоясь о базах данных или различиях в языках программирования. Разработчики часто извлекают данные из API, который возвращает данные в формате JSON, которые они интегрируют во внешние приложения. Vue.js отлично подходит для использования таких API.
В этом руководстве вы создадите приложение Vue, использующее фреймворк Foundation CSS.
Примечание. API Cryptocompare лицензирован только для некоммерческого использования. Ознакомьтесь с их условиями лицензирования, если вы хотите использовать его в коммерческом проекте.
Предпосылки
Прежде чем приступить к этому руководству, вам потребуется следующее:
- Текстовый редактор, поддерживающий подсветку синтаксиса JavaScript, например Sublime Text. Эти редакторы доступны в Windows, macOS и Linux.
- Знакомство с совместным использованием HTML и JavaScript. Узнайте больше в разделе Как добавить JavaScript в HTML.
- Знакомство с форматом данных JSON, о котором вы можете узнать больше в разделе Как работать с JSON в JavaScript.
- Знакомство с отправкой запросов к API. Подробное руководство по работе с API см. в разделе Как использовать веб-API в Python3. Хотя он написан для Python, он все же поможет вам понять основные принципы работы с API.
Шаг 1 — Создание базового приложения Vue
На этом шаге вы создадите базовое приложение Vue. Мы создадим одну HTML-страницу с некоторыми смоделированными данными, которые мы в конечном итоге заменим реальными данными из API. Мы будем использовать Vue.js для отображения этих фиктивных данных. Для этого первого шага мы будем хранить весь код в одном файле.
Создайте новый файл с именем index.html
с помощью текстового редактора.
В этот файл добавьте следующую HTML-разметку, которая определяет HTML-скелет и извлекает платформу Foundation CSS и библиотеку Vue.js из сетей доставки контента (CDN). Используя CDN, вам не нужно загружать дополнительный код, чтобы начать создавать приложение.
<!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@3"></script>
</body>
</html>
Строка {{ BTCinUSD }}
является заполнителем для данных, которые предоставит Vue.js, и именно так Vue позволяет нам декларативно отображать данные в пользовательском интерфейсе. Давайте определим эти данные.
Прямо под тегом <script>
с Vue добавьте этот код, чтобы создать новое приложение Vue и определить структуру данных для отображения на странице:
...
<script>
const { createApp } = Vue
createApp({
data() {
return {
BTCinUSD: 3759.91
}
}
}).mount('#app')
</script>
...
Этот код создает новый экземпляр приложения Vue и прикрепляет экземпляр к элементу с id
app
. Vue называет этот процесс монтированием приложения. Мы определяем новый экземпляр Vue и настраиваем его, передавая объект конфигурации.
В этом примере наша модель данных содержит одну пару «ключ-значение», которая содержит фиктивное значение цены биткойна: { BTCinUSD: 3759,91}
. Эти данные будут отображаться на нашей HTML-странице или в нашем представлении в том месте, где мы заключили ключ в двойные фигурные скобки, например:
<div class="card-divider">
<p>{{ BTCinUSD }}</p>
</div>
Со временем мы заменим это жестко закодированное значение оперативными данными из API.
Откройте этот файл в своем браузере. Вы увидите следующий вывод на экране, который отображает фиктивные данные:
Мы показываем цену в долларах США. Чтобы отобразить его в дополнительной валюте, например в евро, мы добавим еще одну пару «ключ-значение» в нашу модель данных и добавим еще один столбец в разметку. Во-первых, добавьте строку для евро в модель данных:
<script>
const { createApp } = Vue
createApp({
data() {
return {
BTCinUSD: 3759.91,
BTCinEURO: 3166.21
}
}
}).mount('#app')
</script>
Затем замените существующий раздел Теперь сохраните файл и перезагрузите его в браузере. Приложение теперь отображает цену биткойна как в евро, так и в долларах США. На этом шаге вы создали свое приложение Vue с некоторыми образцами данных, чтобы убедиться, что оно загружается. До сих пор мы выполняли всю работу в одном файле, поэтому теперь мы разделим все на отдельные файлы, чтобы улучшить удобство сопровождения. Чтобы узнать, как все работает, мы поместили весь код в один файл. На этом шаге вы разделите код приложения на два отдельных файла: Сначала измените файл Найдите этот раздел файла: И измените его, чтобы он выглядел так: Затем создайте файл В этот новый файл поместите тот же код JavaScript, который изначально был в файле Сохраните файл и перезагрузите Здесь вы отделили приложение от разметки. Затем вы добавите больше данных для поддержки большего количества криптовалют, чем просто биткойн. На этом этапе вы реструктурируете данные и измените представление, чтобы отображались цены как для биткойнов, так и для Ethereum. Откройте файл Наша модель данных стала немного сложнее благодаря вложенной структуре данных. Теперь у нас есть ключ с именем Сохраните файл. Теперь давайте изменим нашу разметку, чтобы обрабатывать данные более программным способом. Откройте файл Замените его этим кодом, который выполняет итерацию по определенному вами набору данных. Этот код использует директиву При перезагрузке в браузере вы увидите фиктивные цены: Эта модификация позволяет нам добавить новую валюту к данным Добавьте еще одну фиктивную запись в набор данных с выделенной информацией, чтобы попробовать это: Включите запятую после записи Ethereum. Сохраните файл. Если вы сейчас загрузите страницу в веб-браузере, вы увидите новую запись: Когда мы обрабатываем данные программно, нам не нужно добавлять новые столбцы в разметку вручную. Здесь вы использовали образцы данных для просмотра цен в нескольких валютах. Теперь давайте получим реальные данные с помощью Cryptocompare API. На этом этапе вы замените смоделированные данные реальными данными из API Cryptocompare, чтобы показать цену биткойнов и эфириума на веб-странице в долларах США и евро. Чтобы получить данные для нашей страницы, мы сделаем запрос на Используйте Вы увидите такой вывод: Этот результат похож на жестко закодированную модель данных, которую вы использовали на предыдущем шаге, но с текущими значениями биткойнов и эфириума. Все, что нам нужно сделать сейчас, это отключить данные, сделав запрос к этому URL-адресу из нашего приложения. Чтобы сделать запрос, мы будем использовать функцию Сначала откройте Сохраните файл, затем откройте Измените и обновите Обратите внимание, что мы удалили значение по умолчанию для Функция Сохраните файл и перезагрузите страницу Если вы ничего не видите, вы можете ознакомиться с разделом «Как использовать консоль разработчика JavaScript» и использовать консоль JavaScript для отладки своего кода. Обновление страницы данными из API может занять минуту. Вы также можете просмотреть этот репозиторий. На этом шаге вы изменили свое приложение, чтобы вызывать оперативные данные для проверки. Менее чем за пятьдесят строк вы создали приложение, использующее API, используя всего три инструмента: Vue.js, Axios и API Cryptocompare. Вы узнали, как отображать данные на странице, перебирать результаты и заменять статические данные результатами из API. Теперь, когда вы понимаете основы, вы можете добавить в свое приложение другие функции. Измените это приложение, чтобы отображались дополнительные валюты, или используйте приемы, изученные в этом руководстве, для создания других веб-приложений с использованием другого API. <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 class="columns medium-4" >
<div class="card">
<div class="card-section">
<p> BTC in EURO </p>
</div>
<div class="card-divider">
<p>{{ BTCinEURO }}</p>
</div>
</div>
</div>
</div>
Шаг 2 — Разделение JavaScript и HTML для ясности
index.html
и vueApp.js
. Файл index.html
будет обрабатывать разметку, а файл JavaScript будет содержать логику приложения. Мы будем хранить оба файла в одном каталоге.index.html
и удалите код JavaScript, заменив его ссылкой на файл vueApp.js
....
<script src="https://unpkg.com/vue@3"></script>
<script>
const { createApp } = Vue
createApp({
data() {
return {
BTCinUSD: 3759.91,
BTCinEURO: 3166.21
}
}
}).mount('#app')
</script>
...
...
<script src="https://unpkg.com/vue@3"></script>
<script src="vueApp.js"></script>
...
vueApp.js
в том же каталоге, что и файл index.html
.index.html
, но без тегов <script>
: const { createApp } = Vue
createApp({
data() {
return {
BTCinUSD: 3759.91,
BTCinEURO: 3166.21
}
}
}).mount('#app')
index.html
в браузере. Вы увидите тот же результат, что и раньше.Шаг 3 — Использование Vue для перебора данных
vueApp.js
и измените часть return
модели данных, чтобы она выглядела следующим образом:const { createApp } = Vue
createApp({
data() {
return {
results: {"BTC": {"USD":3759.91,"EUR":3166.21}, "ETH": {"USD":281.7,"EUR":236.25}}
}
}
}).mount('#app')
results
, который содержит две записи: одну для цен на биткойны, а другую для цен на эфириум. Эта новая структура, на наш взгляд, позволит нам уменьшить некоторое дублирование. Это также напоминает данные, которые мы получим от Cryptocompare API.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>
...
...
<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-for
, которая действует как цикл for-loop. Он перебирает все пары ключ-значение в нашей модели данных и отображает данные для каждой из них.results
в vueApp.js
и отображать ее на странице без дальнейших изменений.const { createApp } = Vue
createApp({
data() {
return {
results: {"BTC": {"USD":3759.91,"EUR":3166.21},
"ETH": {"USD":281.7,"EUR":236.25},
"NEW Currency":{"USD":5.60,"EUR":4.70}}
}
}
}).mount('#app')
Шаг 4 — Получение данных из API
https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR
, который запрашивает Биткойн и Эфириум в долларах США и евро.curl
, чтобы сделать запрос к API, чтобы увидеть ответ в сеансе терминала:mounted()
из Vue в сочетании с функцией GET
библиотеки Axios, чтобы получить данные и сохранить их в results
массив в модели данных. Функция mounted
вызывается после монтирования приложения Vue к элементу. Как только приложение Vue будет смонтировано, мы отправим запрос к API и сохраним результаты. Веб-страница будет уведомлена об изменении, и значения появятся на странице.index.html
и загрузите библиотеку Axios, добавив скрипт под строкой, в которую вы включили Vue:...
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="vueApp.js"></script>
...
vueApp.js
.vueApp.js
, чтобы он делал запрос к API и заполнил модель данных результатами.const url = "https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR";
const { createApp } = Vue
createApp({
data() {
return {
results:[]
}
},
mounted() {
axios.get(url).then(response => {
this.results = response.data
})
}
}).mount('#app')
results
и заменили его пустым массивом. У нас не будет данных при первой загрузке нашего приложения, но представление HTML ожидает, что некоторые данные будут перебираться при загрузке.axios.get
использует обещание. Когда API успешно возвращает данные, выполняется код в блоке then
, и данные сохраняются в нашей переменной results
.index.html
в веб-браузере. На этот раз вы увидите текущие цены на криптовалюты.Заключение