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

Spread the love

Перевод статьи: 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> &#8364 {{ 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.

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

Vue app with Bitcoin, Ethereum and hypothetical currency mock price

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

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

Шаг 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.


Spread the love

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

Добавить комментарий

Ваш e-mail не будет опубликован.