Отображение данных из API с помощью Vue.js и Axios
Vue.js – это среда JavaScript для создания пользовательских интерфейсов. Она постепенно внедряется и хорошо интегрируется с другими библиотеками или существующими проектами. Благодаря этому она отлично подходит для обслуживания небольших проектов, а также сложных одностраничных приложений, которые работают с другими инструментами и библиотеками.
API, или интерфейс прикладного программирования является программным посредником, который позволяет двум приложениям взаимодействовать друг с другом. API часто предоставляет данные, которые другие разработчики могут использовать в своих приложениях, не беспокоясь о базах данных или различиях в языках программирования. Разработчики часто извлекают данные из интерфейса API, который возвращает данные в формате JSON; затем эти данные можно интегрировать в интерфейсные приложения. Vue.js отлично подходит для использования этих API.
В этом мануале вы создадите приложение Vue, которое использует Cryptocompare API, что позволяет отображать текущие цены двух ведущих криптовалют – Bitcoin и Etherium. В дополнение к Vue нужно использовать библиотеку Axios для создания запросов API и обработки полученных результатов.
Примечание: Согласно лицензии Cryptocompare API можно использовать только в некоммерческих целях. См. условия лицензирования, если вы хотите использовать его в коммерческом проекте.
Требования
- Текстовый редактор с поддержкой JavaScript (например, Atom, Visual Studio Code или Sublime Text, эти редакторы доступны для Windows, macOS и Linux).
- Умение комбинировать HTML и JavaScript (читайте Добавление кода JavaScript в HTML).
- Навыки работы с API (умение отправлять запросы).
1: Создание базового приложения Vue
Сначала нужно создать простое приложение Vue. Оно будет состоять из одной страницы HTML с фиктивными данными, которые вы в конечном итоге замените настоящими данными из API. Используйте Vue.js для отображения этих фиктивных данных. на данном этапе можно сохранить весь код в одном файле.
В текстовом редакторе создайте файл index.html.
В этот файл добавьте следующую HTML-разметку, которая определит скелет HTML и загрузит фреймворк 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"></script>
</body>
</html>
Строка {{BTCinUSD}} – это заполнитель для данных, которые предоставит Vue.js. Именно так Vue позволяет декларировать рендеринг данных в пользовательском интерфейсе. Давайте определим эти данные.
Прямо под тегом <script>, который включает Vue, вставьте этот код, который создаст новое приложение Vue и определит структуру данных, которая будет отображаться на странице:
...
<script>
const vm = new Vue({
el: '#app',
//Mock data for the value of BTC in USD
data: { BTCinUSD: 3759.91}
});
</script>
...
Этот код создает новый экземпляр приложения Vue и прикрепляет экземпляр к элементу с идентификатором id app. Vue вызывает этот процесс при установке приложения. Код определяет новый экземпляр Vue и настраивает его, передавая объект конфигурации. Этот объект содержит параметр el (он указывает id элемента, к которому нужно подключить это приложение) и параметр data (содержит данные, которые будут доступны для представления).
Читайте также: Объекты в JavaScript
В этом примере модель данных содержит единственную пару «ключ-значение», которая представляет макет стоимости Bitcoin: { BTCinUSD: 3759.91 }. Эти данные будут отображаться на HTML-странице или в представлении в том месте, где ключ взят в двойные фигурные скобки:
<div class="card-divider">
<p>{{ BTCinUSD }}</p>
</div>
В конечном итоге это жестко закодированное значение будет заменено живыми данными из API.
Откройте этот файл в своем браузере. На экране вы увидите данные макета.
Цена отображается в долларах США. Чтобы отобразить ее в другой валюте, например, в евро, нужно добавить еще одну пару «ключ-значение» в модель данных и вставить еще один столбец разметки. Во-первых, измените модель данных:
<script>
const vm = new Vue({
el: '#app',
//Mock data for the value of BTC in USD
data: { BTCinUSD: 3759.91, BTCinEURO:3166.21 }
});
</script>
Затем добавьте в конец кода новый раздел, отображающий цену в евро.
<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>
Теперь сохраните файл и перезагрузите его в своем браузере. Приложение теперь отображает цену биткоина как в евро, так и в долларах США.
Все это можно сделать в одном файле. Попробуйте разделить функции, чтобы приложение было проще поддерживать.
2: Разделение JavaScript и HTML
Чтобы узнать, как все работает, вы поместили весь код в один файл. Теперь разделите код приложения на два отдельных файла: index.html и vueApp.js. Файл index.html обрабатывает разметку, а файл JavaScript будет содержать логику приложения. Это сделает наше приложение более удобным в поддержке. Сохраните оба файла в одном каталоге.
Сначала измените файл 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>
...
Затем создайте файл vueApp.js в том же каталоге, что и файл index.html.
В этот новый файл поместите тот же код JavaScript, который был изначально в файле 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 }
});
Сохраните файл и перезагрузите index.html в браузере. Вы увидите тот же результат, что и раньше.
Теперь нужно научить приложение поддерживать больше криптовалют.
3: Итерация данных с помощью Vue
В настоящее время приложение показывает фиктивные данные о цене Bitcoin. Попробуйте добавить в приложение Etherium. Для этого нужно реструктурировать данные и изменить представление для работы с новыми данными.
Откройте файл 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. Эта новая структура позволит избежать дублирования кода в представлении. Она также напоминает данные, которые выдает 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. Она выполняет итерацию по всем парам «ключ-значение» в модели данных и отображает данные для каждой пары.
Обновите страницу в браузере, и вы увидите фиктивные цены.
Эта модификация позволяет добавить новую валюту в результат 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
Пришло время с помощью cryptocompare API заменить фиктивные данные живыми, чтобы отобразить реальную цену 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'
Вы увидите такой результат:
{"BTC":{"USD":11388.18,"EUR":9469.64},"ETH":{"USD":1037.02,"EUR":865.99}}
Этот результат выглядит точно так же, как жестко закодированная модель данных, которая использовалась ранее. Все, что вам нужно сделать – это заменить данные, сделав запрос на этот URL-адрес из вашего приложения.
Чтобы сделать запрос, можно использовать функцию Vue mounted() в сочетании с функцией GET библиотеки Axios для извлечения данных и сохранения их в массиве results в модели данных. Функция mounted вызывается сразу после монтирования приложения Vue. Как только приложение Vue смонтировано, оно отправит запрос API и сохранит результаты. Изменения будут переданы веб-странице, и на ней будут отображаться новые значения.
Сначала откройте index.html и загрузите библиотеку Axios, добавив скрипт после строки, которая включает Vue:
...
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
...
Сохраните файл, затем откройте vueApp.js и измените его, чтобы он мог отправлять запросы API и заполнять модель полученными данными:
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
})
}
});
Обратите внимание, что значения результатов по умолчанию можно удалить и заменить их пустым массивом. При первом запуске приложения данных быть не должно, но без пустого массива приложение не сможет работать. Представление HTML ожидает, что некоторые данные переберутся при загрузке.
Функция axios.get использует Promise. Когда API возвращает данные, выполняется код внутри блока then, и данные сохраняются в переменной results.
Сохраните файл и перезагрузите страницу index.html в веб-браузере. На этот раз вы увидите текущие цены на криптовалюты.
Если у вас возникли проблемы, обратитесь к мануалу Использование консоли разработчика JavaScript и попробуйте устранить неполадки через консоль.
Заключение
Вам понадобилось менее 50 строк и всего три инструмента (Vue.js, Axios и Cryptocompare API), чтобы создать приложение, использующее API. Вы узнали, как отображать данные на странице, итерировать результаты и заменять статические данные результатами API.
Теперь, когда вы понимаете основные принципы работы, вы можете добавить в свое приложение новые функции (например, отобразить другие валюты) или создать похожее приложение на основе другого API.
Tags: API, Axios, HTML, Javascript, Vue.js