TOC

Verwenden von Vue.js und Axios zum Anzeigen von Daten von einer API

Einführung

Vue.js ist ein Front-End-JavaScript-Framework zum Erstellen von Benutzeroberflächen. Es wurde von Grund auf so konzipiert, dass es schrittweise angepasst werden kann, und lässt sich gut in andere Bibliotheken oder bestehende Projekte integrieren. Dies macht es zu einer guten Wahl für kleine Projekte sowie für anspruchsvolle Anwendungen mit nur einer Seite, wenn es mit anderen Werkzeugen und Bibliotheken verwendet wird.

Eine API oder Anwendungsprogrammierschnittstelle ist ein Softwarevermittler, mit dem zwei Anwendungen miteinander kommunizieren können. Eine API stellt häufig Daten bereit, die andere Entwickler in ihren eigenen Apps verwenden können, ohne sich um Datenbanken oder Unterschiede in den Programmiersprachen sorgen zu müssen. Entwickler rufen häufig Daten von einer API ab, die Daten im JSON-Format zurückgibt, die sie in Front-End-Anwendungen integrieren. Vue.js eignet sich hervorragend zum Konsumieren solcher APIs.

In diesem Lernprogramm erstellen Sie eine Vue-Anwendung, die die Cryptocompare API verwendet, um die aktuellen Preise von zwei führenden Kryptowährungen anzuzeigen: Bitcoin und Etherium. Zusätzlich zu Vue verwenden Sie die Axios library, um API-Anfragen zu stellen und die erhaltenen Ergebnisse zu verarbeiten. Axios eignet sich hervorragend, da es JSON-Daten automatisch in JavaScript-Objekte umwandelt und Promises unterstützt, was zu Code führt, der das ist einfacher zu lesen und zu debuggen. Damit die Dinge gut aussehen, verwenden wir das Foundation CSS-Framework.

Voraussetzungen

Bevor Sie mit diesem Lernprogramm beginnen, benötigen Sie Folgendes:

Schritt 1 - Erstellen einer grundlegenden Vue-Anwendung

Erstellen wir eine grundlegende Vue-Anwendung. Wir erstellen eine einzelne HTML-Seite mit nachgebildeten Daten, die wir schließlich durch Live-Daten aus der API ersetzen. Wir werden Vue.js verwenden, um diese verspotteten Daten anzuzeigen. In diesem ersten Schritt wird der gesamte Code in einer einzigen Datei gespeichert.

Erstellen Sie mit Ihrem Texteditor eine neue Datei mit dem Namen "+ index.html".

Fügen Sie dieser Datei das folgende HTML-Markup hinzu, das ein HTML-Skelett definiert und das Foundation CSS-Framework sowie die Bibliothek Vue.js aus Content Delivery Networks (CDNs) abruft. Wenn Sie ein CDN verwenden, müssen Sie keinen zusätzlichen Code herunterladen, um mit dem Aufbau Ihrer App zu beginnen.

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>

Die Zeile + {{BTCinUSD}} + ist ein Platzhalter für die Daten, die Vue.js bereitstellt. Auf diese Weise können wir mit Vue Daten in der Benutzeroberfläche deklarativ rendern. Definieren wir diese Daten.

Fügen Sie direkt unterhalb des Tags "+ <script> +", das Vue enthält, diesen Code hinzu, der eine neue Vue-Anwendung erstellt und eine Datenstruktur definiert, die auf der Seite angezeigt wird:

index.html

...

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

   </script>
...

Dieser Code erstellt eine neue Vue-App-Instanz und hängt die Instanz mit der + id + von + app + an das Element an. Vue nennt diesen Prozess mounting eine Anwendung. Wir definieren eine neue Vue-Instanz und konfigurieren sie, indem wir eine Konfiguration object übergeben. Dieses Objekt enthält eine https://vuejs.org/v2/api/#el [+ el +] -Option, die die + id + des Elements angibt, auf dem diese Anwendung bereitgestellt werden soll, sowie eine https: // vuejs -Option .org / v2 / api / # Options-Data [+ data +] Option, die die Daten enthält, die wir für die Ansicht verfügbar machen möchten.

In diesem Beispiel enthält unser Datenmodell ein einzelnes Schlüssel-Wert-Paar, das einen Scheinwert für den Preis von Bitcoin enthält: + {BTCinUSD: 3759.91} +. Diese Daten werden auf unserer HTML-Seite oder unserer Ansicht an der Stelle angezeigt, an der wir den Schlüssel in doppelten geschweiften Klammern eingeschlossen haben:

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

Wir werden diesen fest codierten Wert schließlich durch Live-Daten aus der API ersetzen.

Öffnen Sie diese Datei in Ihrem Browser. Auf Ihrem Bildschirm wird die folgende Ausgabe angezeigt, in der die Scheindaten angezeigt werden:

image: https: //assets.digitalocean.com/articles/vuejs_api_cryptocurrency/NyjwbIM.png [Vue-App mit falschen Daten zum Bitcoin-Preis in US-Dollar]

Wir zeigen den Preis in den USA an. Dollar. Um es in einer zusätzlichen Währung wie dem Euro anzuzeigen, fügen wir ein weiteres Schlüssel-Wert-Paar in unser Datenmodell ein und fügen eine weitere Spalte in das Markup ein. Ändern Sie zunächst das Datenmodell:

index.html

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

 </script>

Fügen Sie dann dem Markup einen neuen Abschnitt hinzu, in dem der Preis in Euro unter dem vorhandenen Code angezeigt wird.

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>

Speichern Sie nun die Datei und laden Sie sie erneut in Ihren Browser. Die App zeigt jetzt den Preis von Bitcoin sowohl in Euro als auch in US-Dollar an.

image: https://assets.digitalocean.com/articles/vuejs_api_cryptocurrency/jTDUE3m.png [Vue-App mit nachgemachtem Bitcoin-Preis in USD und Euro]

Wir haben die gesamte Arbeit in einer einzigen Datei erledigt. Lassen Sie uns die Dinge aufteilen, um die Wartbarkeit zu verbessern.

Schritt 2 - Trennung von JavaScript und HTML zur besseren Übersicht

Um zu erfahren, wie die Dinge funktionieren, haben wir den gesamten Code in einer einzigen Datei gespeichert. Trennen wir nun den Anwendungscode in zwei separate Dateien: "+ index.html " und " vueApp.js ". Die Datei " index.html" behandelt den Markup-Teil und die JavaScript-Datei enthält die Anwendungslogik. Dadurch wird unsere App wartungsfreundlicher. Wir behalten beide Dateien im selben Verzeichnis.

Ändern Sie zunächst die Datei "+ index.html " und entfernen Sie den JavaScript-Code. Ersetzen Sie diesen durch einen Link zur Datei " vueApp.js +".

Suchen Sie diesen Abschnitt der Datei:

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>
...

Und ändern Sie es so, dass es so aussieht:

index.html

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

...

Erstellen Sie dann die Datei "+ vue App.js" im selben Verzeichnis wie die Datei "+ index.html".

Platzieren Sie in dieser neuen Datei denselben JavaScript-Code, der ursprünglich in der Datei "+ index.html " enthalten war, ohne die Tags " <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 }
     });

Speichern Sie die Datei und laden Sie die + index.html + im Browser neu. Sie sehen das gleiche Ergebnis, das Sie zuvor gesehen haben.

Wir möchten mehr Kryptowährungen unterstützen als nur Bitcoiin. Schauen wir uns also an, wie wir das tun.

Schritt 3 - Verwenden von Vue zum Durchlaufen von Daten

Derzeit werden einige Scheindaten zum Bitcoin-Preis angezeigt. Aber lassen Sie uns Ethereum hinzufügen. Zu diesem Zweck strukturieren wir unsere Daten neu und ändern die Ansicht, um mit den neuen Daten zu arbeiten.

Öffnen Sie die Datei "+ vue App.js" und ändern Sie das Datenmodell so, dass es wie folgt aussieht:

vueApp.js

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


       }
     });

Unser Datenmodell ist mit einer verschachtelten Datenstruktur etwas komplexer geworden. Wir haben jetzt einen Schlüssel mit dem Namen "+ results +", der zwei Datensätze enthält. eine für Bitcoin-Preise und eine für Etherium-Preise. Durch diese neue Struktur können wir aus unserer Sicht einige Überschneidungen reduzieren. Es ähnelt auch den Daten, die wir von der Cryptocompare-API erhalten.

Speicher die Datei. Ändern wir nun unser Markup, um die Daten auf programmatischere Weise zu verarbeiten.

Öffnen Sie die Datei "+ index.html" und suchen Sie diesen Abschnitt der Datei, in dem der Bitcoin-Preis angezeigt wird:

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>
...

Ersetzen Sie ihn durch diesen Code, der über das von Ihnen definierte Dataset iteriert.

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>
...

In diesem Code wird die Anweisung https://vuejs.org/v2/api/#v-for [+ v-for +] verwendet, die sich wie eine for-Schleife verhält. Es durchläuft alle Schlüssel-Wert-Paare in unserem Datenmodell und zeigt die Daten für jedes einzelne an.

Wenn Sie dies im Browser neu laden, werden die gespielten Preise angezeigt:

image: https://assets.digitalocean.com/articles/vuejs_api_cryptocurrency/PMg24or.png [Vue-App mit nachgemachtem Preis für Bitcoin und Ethereum]

Mit dieser Änderung können wir den "+ Ergebnissen von" -Daten in "+ vue App.js" eine neue Währung hinzufügen und sie ohne weitere Änderungen auf der Seite anzeigen lassen. Fügen Sie dem Dataset einen weiteren verspotteten Eintrag hinzu, um dies zu testen:

vueApp.js

const vm = new Vue({
       el: '#app',
       data: {
         results: {"BTC":{"USD":3759.91,"EUR":3166.21},
                   "ETH":{"USD":281.7,"EUR":236.25}

       }
     });

Vergessen Sie nicht, das nachstehende Komma nach dem Eintrag in Etherium einzufügen.

Wenn Sie die Seite jetzt in den Webbrowser laden, wird der neue Eintrag angezeigt:

image: https: //assets.digitalocean.com/articles/vuejs_api_cryptocurrency/lYEvm4r.png [Vue-App mit Bitcoin, Ethereum und hypothetischem Währungs-Scheinpreis]

Sobald wir die Daten programmgesteuert angepackt haben, müssen wir dem Markup keine neuen Spalten mehr manuell hinzufügen.

Lassen Sie uns nun echte Daten abrufen.

Schritt 4 - Abrufen von Daten von der API

Es ist an der Zeit, unsere nachgebildeten Daten durch Live-Daten aus der Cryptocompare-API zu ersetzen, um den Preis für Bitcoin und Ethereum auf der Webseite in US-Dollar und Euro anzuzeigen.

Um die Daten für unsere Seite zu erhalten, senden Sie eine Anfrage an die folgende URL, in der Bitcoin und Etherium in US-Dollar und Euro angefordert werden:

https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR

Diese API gibt eine JSON-Antwort zurück. Verwenden Sie + curl +, um eine Anforderung an die API zu senden und die Antwort anzuzeigen:

curl 'https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD,EUR'

Die Ausgabe sieht folgendermaßen aus:

Output{"BTC":{"USD":11388.18,"EUR":9469.64},"ETH":{"USD":1037.02,"EUR":865.99}}

Dieses Ergebnis sieht genauso aus wie das im vorherigen Schritt verwendete fest codierte Datenmodell. Jetzt müssen wir nur noch die Daten austauschen, indem wir von unserer App aus eine Anfrage an diese URL senden.

Um die Anfrage zu stellen, verwenden wir die https://vuejs.org/v2/api/#mounted [+ mounted () +] -Funktion von Vue in Kombination mit der + GET + -Funktion der Axios-Bibliothek an Holen Sie die Daten und speichern Sie sie im Array "+ results " des Datenmodells. Die Funktion " eingehängt +" wird aufgerufen, sobald die Vue-App an ein Element angehängt wurde. Sobald die Vue-App aktiviert ist, stellen wir die Anforderung an die API und speichern die Ergebnisse. Die Webseite wird über die Änderung informiert und die Werte werden auf der Seite angezeigt.

Öffnen Sie zuerst + index.html + und laden Sie die Axios-Bibliothek, indem Sie ein Skript unterhalb der Zeile einfügen, in der Sie Vue eingefügt haben:

index.html

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

...

Speichern Sie die Datei, öffnen Sie "+ vue App.js" und ändern Sie sie so, dass sie eine Anforderung an die API sendet und das Datenmodell mit den Ergebnissen füllt.

vueApp.js

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







     });

Beachten Sie, dass wir den Standardwert für "+ results +" entfernt und durch ein leeres Array ersetzt haben. Wir haben keine Daten, wenn unsere App zum ersten Mal geladen wird, aber wir möchten nicht, dass die Dinge kaputt gehen. Unsere HTML-Ansicht erwartet, dass einige Daten beim Laden wiederholt werden.

Die Funktion "+ axios.get " verwendet eine https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises[Promise]. Wenn die API erfolgreich Daten zurückgibt, wird der Code im Block " then " ausgeführt und die Daten werden in unserer Variablen " results +" gespeichert.

Speichern Sie die Datei und laden Sie die Seite "+ index.html" im Webbrowser neu. Diesmal sehen Sie die aktuellen Preise der Kryptowährungen.

Wenn nicht, lesen Sie das Tutorial How To Use the JavaScript Developer Console und verwenden Sie es die JavaScript-Konsole, um Ihren Code zu debuggen.

Fazit

In weniger als fünfzig Zeilen haben Sie eine API-intensive Anwendung mit nur drei Tools erstellt: Vue.js, Axios und die Cryptocompare-API. Sie haben gelernt, wie Sie Daten auf einer Seite anzeigen, Ergebnisse durchlaufen und statische Daten durch Ergebnisse einer API ersetzen.

Nachdem Sie die Grundlagen verstanden haben, können Sie Ihrer Anwendung weitere Funktionen hinzufügen. Ändern Sie diese Anwendung, um zusätzliche Währungen anzuzeigen, oder verwenden Sie die Techniken, die Sie in diesem Lernprogramm gelernt haben, um andere Webanwendungen mit einer anderen API zu erstellen.

Related