Введение
Vue.js — это фронтенд-фреймворк на JavaScript для создания пользовательских интерфейсов. Он разработан с нуля таким образом, чтобы его можно было внедрять постепенно и чтобы он хорошо интегрировался с другими библиотеками или существующими проектами. Такой подход делает его подходящим как для небольших проектов, так и для сложных одностраничных приложений при использовании с другими инструментами и библиотеками.
API, или интерфейс прикладного программирования, — это программный интерфейс, позволяющий двум приложениям взаимодействовать друг с другом. API часто предоставляет данные, которые другие разработчики могут использовать в своих приложениях, не беспокоясь о базах данных или различиях в языках программирования. Разработчики часто получают данные из API, который возвращает данные в формате JSON, а затем интегрируют их во фронтенд-приложения. Vue.js хорошо подходит для использования таких API.
В этом уроке вы создадите приложение Vue, которое будет использовать API Cryptocompare для отображения текущих цен на две ведущие криптовалюты: Bitcoin и Ethereum. Помимо Vue, вы будете использовать библиотеку Axios для выполнения API-запросов и обработки возвращаемых результатов. Axios замечательна тем, что автоматически преобразует данные JSON в объекты JavaScript и поддерживает промисы, что делает код более читабельным и удобным для отладки. А чтобы всё выглядело красиво, мы будем использовать фреймворк CSS Foundation.
Предпосылки
- Текстовый редактор, поддерживающий подсветку синтаксиса JavaScript, например Atom, Visual Studio Code или Sublime Text. Эти редакторы доступны для Windows, macOS и Linux.
- Знание принципов совместного использования HTML и JavaScript. Подробнее см. в разделе «Как добавить JavaScript в HTML».
- Знакомство с форматом данных JSON: здесь вы сможете узнать больше о том, как работать с JSON в JavaScript.
- Начало работы с API-запросами. Для получения исчерпывающего руководства по работе с API ознакомьтесь с руководством «Как использовать Web API в Python3». Хотя оно написано для Python, оно все равно поможет вам понять основные концепции работы с API.
Шаг 1 – Создание базового приложения Vue
На этом этапе вы создадите базовое Vue-приложение. Мы создадим одну HTML-страницу с некоторыми фиктивными данными, которые в конечном итоге заменим реальными данными из API. Для отображения этих фиктивных данных мы будем использовать Vue.js. На этом первом этапе весь код будет находиться в одном файле.
С помощью текстового редактора создайте новый файл с именем index.html.
В этот файл добавьте следующую HTML-разметку, которая определяет HTML-скелет и загружает фреймворк CSS Foundation и библиотеку 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، این کد را برای ایجاد یک برنامه جدید Vue اضافه کنید و یک ساختار داده برای نمایش در صفحه تعریف کنید:
...
<script>
const { createApp } = Vue
createApp({
data() {
return {
BTCinUSD: 3759.91
}
}
}).mount('#app')
</script>
Этот код создает новый экземпляр приложения Vue и привязывает его к элементу с идентификатором приложения. Vue называет этот процесс монтированием приложения. Мы определяем новый экземпляр Vue и настраиваем его, передавая ему объект конфигурации. Мы передаем экземпляру createApp объект данных, который возвращает значение BTCinUSD. Кроме того, мы вызываем метод mount экземпляра createApp с аргументом #app, который указывает идентификатор элемента, к которому мы хотим привязать это приложение, и параметром данных, содержащим данные, которые мы хотим сделать доступными в представлении.
В этом примере наша модель данных содержит одну пару ключ-значение, в которой фиктивное значение представляет собой цену биткоина: { 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>Затем раздел <div class> Замените существующий текст следующими строками.
<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>Теперь сохраните файл и загрузите его в браузере. Приложение отобразит цену биткоина как в евро, так и в долларах США.
На этом этапе вы создадите своё Vue-приложение с тестовыми данными, чтобы убедиться в их корректной загрузке. До сих пор мы делали всё в одном файле, поэтому теперь мы разделим всё на отдельные файлы для улучшения удобства сопровождения.
Шаг 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.
В этот новый файл вставьте тот же JavaScript-код, который изначально находился в файле index.html, но без тега <code>. قرار دهید:
const { createApp } = Vue createApp({ data() { return { BTCinUSD: 3759.91, BTCinEURO: 3166.21 } } }).mount('#app')Сохраните файл и перезагрузите index.html в браузере. Вы увидите тот же результат, что и раньше.
Здесь вы отделили приложение от разметки. Далее вы добавите больше данных для поддержки большего количества криптовалют, помимо Биткоина.
Шаг 3 – Использование Vue для итерации по данным
На этом этапе вы восстановите данные и измените их отображение, чтобы показать цены на Bitcoin и Ethereum.
Откройте файл vueApp.js и измените часть data model, отвечающую за возвращаемые значения, следующим образом:
const { createApp } = Vue
createApp({
data() {
return {
results: {"BTC": {"USD":3759.91,"EUR":3166.21}, "ETH": {"USD":281.7,"EUR":236.25}}
}
}
}).mount('#app')Наша модель данных стала немного сложнее из-за вложенной структуры данных. Теперь у нас есть ключ с именем results, содержащий две записи: одну для цены Bitcoin и одну для цены Ethereum. Эта новая структура позволяет нам уменьшить дублирование в представлении. Она также напоминает данные, которые мы получаем из API Cryptocompare.
Сохраните файл.
Теперь давайте изменим разметку, чтобы обрабатывать данные более планомерно.
Откройте файл 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 { 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')После записи Ethereum поставьте запятую в конце. Сохраните файл.
Если вы теперь загрузите страницу в веб-браузере, вы увидите новую запись:
При программном анализе данных нам не нужно вручную добавлять новые столбцы в разметку.
Здесь вы использовали примерные данные для просмотра цен нескольких валют. Теперь давайте получим фактические данные, используя API Cryptocompare.
Шаг 4 – Получение данных из API
На этом этапе вы заменяете смоделированные данные реальными данными из API Cryptocompare, чтобы отобразить цены на Bitcoin и Ethereum на веб-странице в долларах США и евро.
Для получения данных для нашей страницы мы отправляем запрос по адресу 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":21694.18,"EUR":21407.64},"ETH":{"USD":1504.02,"EUR":1485.99}}Этот результат аналогичен закодированной модели данных, которую вы использовали на предыдущем шаге, но с текущими значениями Bitcoin и Ethereum. Теперь нам остается только изменить данные, запросив этот URL-адрес из нашего приложения.
Для запроса мы используем функцию `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 использует Promise. Когда API успешно возвращает данные, выполняется код внутри блока, и данные сохраняются в переменной results.
Сохраните файл и перезагрузите страницу index.html в вашем веб-браузере. На этот раз вы увидите текущую цену криптовалют.
Если вы ничего не видите, вы можете ознакомиться с инструкцией по использованию консоли разработчика JavaScript и использовать консоль JavaScript для отладки своего кода. Обновление страницы с данными API может занять минуту.
Вы также можете ознакомиться с этим репозиторием на GitHub, который содержит HTML- и JS-файлы, доступные для загрузки и перекрестной проверки. Вы также можете клонировать этот репозиторий.
На данном этапе вы модифицировали свое приложение таким образом, чтобы оно могло получать данные в режиме реального времени для анализа.
Результат
Менее чем за пятьдесят строк кода вы создали приложение, использующее API, всего с помощью трех инструментов: Vue.js, Axios и Cryptocompare API. Вы научились отображать данные на странице, перебирать результаты и заменять статические данные результатами API.
Теперь, когда вы понимаете основы, вы можете добавить в свое приложение дополнительные функции. Измените это приложение, чтобы отображать дополнительные валюты, или используйте методы, изученные в этом руководстве, для создания других веб-приложений с использованием другого API.
