Как использовать Vue.js и Axios для отображения данных из API

Вступление

Vue.js представляет собой интерфейсную среду JavaScript для создания пользовательских интерфейсов. Он спроектирован с нуля для постепенного принятия и хорошо интегрируется с другими библиотеками или существующими проектами. Это делает его подходящим для небольших проектов, а также сложных одностраничных приложений при использовании с другими инструментами и библиотеками.

API, или интерфейс прикладного программирования, является программным посредником, который позволяет двум приложениям общаться друг с другом. API часто предоставляет данные, которые другие разработчики могут использовать в своих собственных приложениях, не беспокоясь о базах данных или различиях в языках программирования. Разработчики часто получают данные из API, который возвращает данные в формате JSON, который они интегрируют в интерфейсные приложения. Vue.js отлично подходит для использования этих видов API.

В этом руководстве вы создадите приложение Vue, которое использует Cryptocompare API для отображения текущих цен двух ведущих криптовалют: биткойнов и Etherium. В дополнение к Vue вы будете использовать Axios для отправки запросов API и обработки полученных результатов. Axios отлично подходит, потому что он автоматически преобразует данные JSON в объекты JavaScript и поддерживает Promises, что приводит к коду, который легче читать и отлаживать. И чтобы все выглядело хорошо, мы будем использовать фреймворк Foundation CSS.

Предпосылки

Перед началом этого урока вам понадобится следующее:

Текстовый редактор, который поддерживает подсветку синтаксиса JavaScript, например http://atom.io [Atom], Visual Studio Code или https://www.sublimetext.com/ [ Возвышенный текст. Эти редакторы доступны в Windows, macOS и Linux.
Знакомство с использованием HTML и JavaScript вместе. Подробнее читайте в How To Add JavaScript to HTML.
Знакомство с форматом данных JSON, о котором вы можете узнать больше в How для работы с 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, вам не нужно загружать дополнительный код, чтобы начать сборку приложения.

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 и присоединяет экземпляр к элементу с помощью + id + из + app +. Vue называет этот процесс mounting приложением. Мы определяем новый экземпляр Vue и настраиваем его, передавая конфигурацию object. Этот объект содержит опцию https://vuejs.org/v2/api/#el [+ el +], которая указывает + id + элемента, на который мы хотим смонтировать это приложение, и https: // vuejs .org / v2 / api / # Options-Data [+ data +] опция, которая содержит данные, которые мы хотим получить для представления.

В этом примере наша модель данных содержит одну пару ключ-значение, которая содержит фиктивное значение для цены Биткойна: + {BTCinUSD: 3759.91} +. Эти данные будут отображаться на нашей HTML-странице или в нашем view там, где мы заключили ключ в двойные фигурные скобки, например:

<div class="card-divider">
 <p>{{ BTCinUSD }}</p>
</div>

В конечном итоге мы заменим это жестко запрограммированное значение живыми данными из API.

Откройте этот файл в вашем браузере. Вы увидите следующий вывод на вашем экране, который отображает фиктивные данные:

изображение: https: //assets.digitalocean.com/articles/vuejs_api_cryptocurrency/NyjwbIM.png [приложение Vue, показывающее фиктивные данные о цене биткойнов в долларах США]

Мы показываем цену в США. долларов. Чтобы отобразить его в дополнительной валюте, например в евро, мы добавим еще одну пару ключ-значение в нашу модель данных и добавим еще один столбец в разметке. Сначала измените модель данных:

index.html

 <script>
 const vm = new Vue({
         el: '#app',
         //Mock data for the value of BTC in USD
         data: { BTCinUSD: 3759.91 }
       });

 </script>

Затем добавьте новый раздел к разметке, который отображает цену в евро под существующим кодом.

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">
         {{BTCinUSD}}
       </div>
     </div>
   </div>












 </div>

Теперь сохраните файл и перезагрузите его в вашем браузере. Приложение теперь отображает цену Биткойн как в евро, так и в долларах США.

image: https: //assets.digitalocean.com/articles/vuejs_api_cryptocurrency/jTDUE3m.png [приложение Vue с фиктивной ценой на биткойны в долларах США и евро]

Мы сделали всю работу в одном файле. Давайте разделим вещи, чтобы улучшить ремонтопригодность.

Шаг 2 - Разделение JavaScript и HTML для ясности

Чтобы узнать, как все работает, мы поместили весь код в один файл. Теперь давайте разделим код приложения на два отдельных файла: + index.html и` + vue App.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>

...

Затем создайте файл + vue App.js в том же каталоге, что и файл` + index.html`.

В этом новом файле поместите тот же код JavaScript, который изначально был в файле + index.html +, без тегов + <script> +:

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 для перебора данных

В настоящее время мы показываем некоторые ложные данные о цене биткойна. Но давайте добавим Ethereum. Для этого мы реструктурируем наши данные и изменим представление для работы с новыми данными.

Откройте файл + vue App.js и измените модель данных так, чтобы она выглядела следующим образом:

vueApp.js

const vm = new Vue({
       el: '#app',
       data: {


       }
     });

Наша модель данных стала немного более сложной с вложенной структурой данных. Теперь у нас есть ключ с именем + results +, который содержит две записи; один для цен на биткойны и другой для цен на Etherium. Эта новая структура позволит нам уменьшить некоторое дублирование, на наш взгляд. Он также напоминает данные, которые мы получим из API-интерфейса шифрования.

Сохраните файл. Теперь давайте изменим нашу разметку, чтобы обрабатывать данные более программным способом.

Откройте файл + 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">
         {{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>
...

Замените его этим кодом, который перебирает набор данных, который вы определили.

index.html

...
 <div class="columns medium-4" >
   <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> &#8364 {{ result.EUR }}</p>
     </div>
   </div>
 </div>
...

Этот код использует директиву https://vuejs.org/v2/api/#v-for [+ v-for +], которая действует как цикл for. Он перебирает все пары ключ-значение в нашей модели данных и отображает данные для каждой из них.

Когда вы перезагрузите это в браузере, вы увидите поддельные цены:

изображение: https: //assets.digitalocean.com/articles/vuejs_api_cryptocurrency/PMg24or.png [приложение Vue с ценой на биткойны и Ethereum]

Эта модификация позволяет нам добавлять новую валюту к данным + results в` + vue App.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}

       }
     });

Не забудьте добавить запятую после входа в Etherium.

Если вы сейчас загрузите страницу в веб-браузере, вы увидите новую запись:

image: https: //assets.digitalocean.com/articles/vuejs_api_cryptocurrency/lYEvm4r.png [приложение Vue с биткойнами, Ethereum и гипотетической ценой валюты]

После того, как мы обработаем данные программным способом, нам не нужно добавлять новые столбцы в разметку вручную.

Теперь давайте получим реальные данные.

Шаг 4 - Получение данных из API

Пришло время заменить наши макетные данные живыми данными из API-интерфейса cryptocompare, чтобы показать цену Биткойн и Эфириум на веб-странице в долларах США и евро.

Чтобы получить данные для нашей страницы, мы сделаем запрос на следующий URL, который запрашивает биткойны и этериумы в долларах США и евро:

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 из нашего приложения.

Чтобы сделать запрос, мы будем использовать функцию https://vuejs.org/v2/api/#mounting [+ mount () +] из Vue в сочетании с функцией + GET + библиотеки Axios для получить данные и сохранить их в массиве + results + в модели данных. Функция + mount + вызывается после монтирования приложения Vue к элементу. Как только приложение Vue будет смонтировано, мы отправим запрос в API и сохраним результаты. Веб-страница будет уведомлена об изменении, и значения появятся на странице.

Сначала откройте + index.html + и загрузите библиотеку Axios, добавив скрипт под строкой, в которую вы включили Vue:

index.html

...
   <script src="https://unpkg.com/vue"></script>

...

Сохраните файл, затем откройте + vue App.js и измените его, чтобы он отправлял запрос в API и заполнял модель данных результатами.

vueApp.js

const vm = new Vue({
       el: '#app',
       data: {







     });

Обратите внимание, что мы удалили значение по умолчанию для + results + и заменили его пустым массивом. У нас не будет данных при первой загрузке нашего приложения, но мы не хотим, чтобы что-то сломалось. Наше представление HTML ожидает, что некоторые данные будут перебираться при загрузке.

Функция + axios.get + использует Promise. Когда API успешно возвращает данные, выполняется код внутри блока + then +, и данные сохраняются в нашей переменной + results +.

Сохраните файл и перезагрузите страницу + index.html в веб-браузере. На этот раз вы увидите текущие цены на криптовалюты.

Если вы этого не сделаете, посмотрите учебник How To Use JavaScript Developer Console и используйте консоль JavaScript для отладки вашего кода.

Заключение

Менее чем за пятьдесят строк вы создали приложение, потребляющее API, используя только три инструмента: Vue.js, Axios и Cryptocompare API. Вы узнали, как отображать данные на странице, перебирать результаты и заменять статические данные результатами API.

Теперь, когда вы понимаете основы, вы можете добавить другие функции в ваше приложение. Измените это приложение для отображения дополнительных валют или используйте методы, которые вы изучили в этом руководстве, для создания других веб-приложений с использованием другого API.

TOC

Как использовать Vue.js и Axios для отображения данных из API

Вступление

Предпосылки

Шаг 1 - Создание базового приложения Vue

Шаг 2 - Разделение JavaScript и HTML для ясности

Шаг 3 - Использование Vue для перебора данных

Шаг 4 - Получение данных из API

Заключение

Related