Как использовать Vue.js и Axios для отображения данных из API
Перевод статьи: How to Use Vue.js and Axios to Display Data from an API
Статья предназначения для новичком с Vue.js. В ней рассказывается о том как использовать Axios для получения данные из внешнего API
Введение
Vue.js — это JavaScript-фреймворк для создания пользовательских интерфейсов. Он хорошо интегрируется с другими библиотеками или существующими проектами. Это делает его подходящим инструментом как для небольших проектов, так и для сложных одностраничных приложений.
API, или интерфейс прикладного программирования, является программным посредником, который позволяет двум приложениям общаться друг с другом. API часто предоставляет данные, которые другие разработчики могут использовать в своих собственных приложениях, не беспокоясь о базах данных или различиях в языках программирования. Разработчики часто получают данные из API в формате JSON, которые они интегрируют в интерфейсные приложения. Vue.js отлично подходит для использования этих видов API.
В этом руководстве вы создадите приложение Vue, которое использует Cryptocompare API для отображения текущих цен двух ведущих криптовалют: Bitcoin и Etherium. В дополнение к Vue вы так же используете библиотеку Axios для выполнения запросов API и обработки полученных результатов. Axios отличный выбор для этих целей, потому что она автоматически преобразует данные JSON в объекты JavaScript а так же поддерживает Promises, что позволяет создавать код, который легче читать и отлаживать. И чтобы все выглядело красиво, мы используем фреймворк Foundation CSS для стилей.
Примечание: API Cryptocompare бесплатно лицензируется только для некоммерческого использования. Смотрите их условия лицензирования, если вы хотите использовать его в коммерческом проекте.
Шаг 1 — Создание базового приложения Vue
Давайте создадим базовое приложение на Vue. Мы создадим одну HTML-страницу с некоторыми фейковыми данными, которые в конечном итоге заменим на реальные данные из API. Для этого первого шага мы будем хранить весь код в одном файле.
Создайте новый файл index.html, используя ваш текстовый редактор.
В этом файле добавьте следующую HTML-разметку, которая определяет HTML-скелет, стили из среды Foundation CSS и библиотеку Vue.js из CDN. Используя CDN, вам не нужно загружать дополнительный код, чтобы начать работу над app.index.html.
<!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"></script>
</body>
</html>
Строка {{ BTCinUSD }} является заполнителем для данных, которые предоставит Vue.js. Таким образом Vue позволяет нам визуализировать данные в пользовательском интерфейсе. Давайте определим эти данные.
Прямо под тегом <script>, который включает Vue, добавьте следующий код, который создаст новое приложение Vue, и определит структуру данных, которую мы будем отображать на странице: index.html
...
<script>
const vm = new Vue({
el: '#app',
//Mock data for the value of BTC in USD
data: { BTCinUSD: 3759.91}
});
</script>
...
Этот код создает новый экземпляр приложения Vue и присоединит экземпляр Vue к элементу с id app. Vue называет этот процесс монтированием приложения. Мы определяем новый экземпляр Vue и настраиваем его, передавая объект конфигурации. Этот объект содержит опцию el, которая указывает идентификатор элемента id, к которому мы хотим подключить это приложение, и опцию data, которая содержит данные, которые мы хотим получить для представления.
В этом примере наша модель данных содержит одну пару ключ-значение, которая содержит фиктивное значение для цены Биткойна: BTCinUSD: 3759.91. Эти данные будут отображаться на нашей HTML-странице или в нашем представлении в том месте, где мы заключили переменную в двойные фигурные скобки, например:
<div class="card-divider">
<p>{{ BTCinUSD }}</p>
</div>
В конечном итоге мы заменим это жестко запрограммированное значение реальными данными из API.
Откройте этот файл в вашем браузере. Вы увидите следующий вывод на вашем экране, который отображает фиктивные данные:
Мы показываем цену в долларах США. Чтобы отобразить его в дополнительной валюте, например в евро, мы добавим еще одну пару ключ-значение в нашу модель данных и добавим еще один столбец в разметке. Сначала измените модель данных: index.html
<script>
const vm = new Vue({
el: '#app',
//Mock data for the value of BTC in USD
data: { BTCinUSD: 3759.91, BTCinEURO:3166.21 }
});
</script>
Затем добавьте новый раздел в разметку, который отображает цену в евро ниже существующего code.index.html
<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.
Найдите этот раздел файла: index.html
...
<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>
...
И измените его так, чтобы он выглядел так: index.html
...
<script src="https://unpkg.com/vue"></script>
<script src="vueApp.js"></script>
...
Затем создайте файл vueApp.js в том же каталоге, что и файл index.html.
В этом новом файле поместите тот же код JavaScript, который изначально был в файле index.html, без <script> тегов tags:vueApp.js
const vm = new Vue({
el: '#app',
// Mock data for the value of BTC in USD
data: { BTCinUSD: 3759.91, BTCinEURO:3166.21 }
});
Сохраните файл и перезагрузите index.html в браузере. Вы увидите тот же результат, который вы видели ранее.
Давайте добавим еще одну криптовалюту.
Шаг 3 — Использование Vue для перебора данных
В настоящее время мы показываем некоторые фиктивные данные по цене Биткойн. Но давайте добавим Etherium тоже. Для этого мы реструктурируем наши данные и изменим представление для работы с новыми данными.
Откройте файл vueApp.js и измените модель данных так, чтобы она выглядела следующим образом: vueApp.js
const vm = new Vue({
el: '#app',
data: {
results: {"BTC": {"USD":3759.91,"EUR":3166.21},
"ETH": {"USD":281.7,"EUR":236.25}}
}
});
Наша модель данных стала немного более сложной с вложенной структурой данных. Теперь у нас есть ключ с именем results, который содержит две записи; один для цен в Bitcoin и другой для цен в Etherium. Эта новая структура позволит нам уменьшить дублирование. Он также напоминает данные, которые мы получим из API-интерфейса cryptocompare.
Сохраните файл. Теперь давайте изменим нашу разметку.
Откройте файл index.html и найдите этот раздел файла, в котором мы отображаем цену Биткойн: index.html
...
<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>
...
Замените его на этот код, который перебирает набор данных, который вы определили. Index.html
...
<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. Она перебирает все пары ключ-значение в нашей модели данных и отображает данные для каждой из них.
Когда вы перезагрузите это в браузере, вы увидите цены:
Эта модификация позволяет нам добавлять новую валюту к results в vueApp.js и отображать ее на странице без дальнейших изменений. Добавьте другую запись в набор данных, чтобы это попробовать: vueApp.js
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.
Если вы сейчас загрузите страницу в веб-браузере, вы увидите новую запись:
После того, как мы обработаем данные программно, нам не нужно добавлять новые столбцы в разметку вручную.
Теперь давайте получим реальные данные.
Шаг 4 — Получение данных из API
Пришло время заменить наши макетные данные живыми данными из API-интерфейса cryptocompare, чтобы показать цену Bitcoin и Ethereum на веб-странице в долларах США и евро.
Чтобы получить данные для нашей страницы, мы сделаем запрос по следующему URL, который запрашивает Bitcoin и Etherium в долларах США и евро:
https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR
Этот API вернет JSON-ответ. Используйте curl, чтобы сделать запрос к API, чтобы увидеть ответ:
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}}
Этот результат выглядит точно так же, как жестко закодированная модель данных, которую вы использовали на предыдущем шаге. Все, что нам нужно сделать сейчас, это удалить текущие данные и сделать запрос на этот URL из нашего приложения.
Чтобы сделать запрос, мы используем функцию mounted() из Vue в сочетании с функцией GET библиотеки Axios, чтобы извлечь данные и сохранять их в модели данных в массиве results . Функция mountedвызывается, когда приложение Vue монтируется на элемент. Как только приложение Vue будет смонтировано, мы отправим запрос в API и сохраним результаты. Веб-страница будет уведомлена об изменении, и значения появятся на странице.
Сначала откройте index.html и загрузите библиотеку Axios, добавив скрипт под строкой, в которую вы включили Vue: index.html.
...
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
...
Сохраните файл, затем откройте vueApp.js и измените его, чтобы он отправлял запрос в API и заполнял модель данных results.vueApp.js.
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
})
}
});
Обратите внимание, что мы удалили значение по умолчанию для results и заменили его пустым массивом. У нас не будет данных при первой загрузке нашего приложения, но мы не хотим, чтобы что-то сломалось. Наше представление HTML ожидает, что некоторые данные будут перебираться при загрузке.
Функция axios.get использует Promise. Когда API возвращает данные успешно, выполняется код в блоке then, и данные сохраняются в нашей переменной results.
Сохраните файл и перезагрузите страницу index.html в веб-браузере. На этот раз вы увидите текущие цены на криптовалюты.
Заключение
Менее чем за пятьдесят строк вы создали приложение, работающее с API, используя только три инструмента: Vue.js, Axios и API Cryptocompare. Вы узнали, как отображать данные на странице, перебирать результаты и заменять статические данные результатами API.
Теперь, когда вы понимаете основы, вы можете добавить другие функции в ваше приложение. Измените это приложение для отображения дополнительных валют или используйте методы, которые вы изучили в этом руководстве, для создания других веб-приложений с использованием другого API.
Хорошая статья!
spasibo
Отличная статья прямо с официальной документации
Почему я нихера не понимаю
Потому, что ты ёп твою мать не читал основы
Если запихнуть axios в функцию, которая вызывается по кнопке, то запрос выполняется, но обновленный this.results, не хочет выводиться. Где почитать как это правильно делать?
может потерян контекст?