TOC

Comment utiliser Vue.js et Axios pour afficher des données à partir d’une API

introduction

Vue.js est un cadre JavaScript frontal permettant de créer des interfaces utilisateur. Il a été conçu dès le départ pour être progressivement adoptable et s’intègre bien à d’autres bibliothèques ou à des projets existants. Cela convient parfaitement aux petits projets ainsi qu’aux applications sophistiquées d’une seule page lorsqu’il est utilisé avec d’autres outils et bibliothèques.

Une API, ou Application Programming Interface, est un intermédiaire logiciel permettant à deux applications de communiquer entre elles. Une API expose souvent des données que d’autres développeurs peuvent utiliser dans leurs propres applications, sans se soucier des bases de données ni des différences entre les langages de programmation. Les développeurs extraient fréquemment les données d’une API renvoyant des données au format JSON, qu’ils intègrent dans des applications frontales. Vue.js convient parfaitement à la consommation de ces types d’API.

Dans ce didacticiel, vous allez créer une application Vue utilisant l’API Cryptocompare pour afficher les prix actuels de deux des principales crypto-monnaies: Bitcoin et Etherium. En plus de Vue, vous utiliserez la bibliothèque Axios pour effectuer des demandes d’API et traiter les résultats obtenus. Axios convient parfaitement, car il transforme automatiquement les données JSON en objets JavaScript et prend en charge Promises, ce qui conduit au code plus facile à lire et à déboguer. Et pour que tout soit beau, nous allons utiliser le framework CSS Foundation.

Conditions préalables

Avant de commencer ce tutoriel, vous aurez besoin des éléments suivants:

Étape 1 - Création d’une application Vue de base

Créons une application Vue de base. Nous allons construire une seule page HTML avec des données simulées que nous remplacerons éventuellement par des données en direct de l’API. Nous allons utiliser Vue.js pour afficher ces données simulées. Pour cette première étape, nous allons garder tout le code dans un seul fichier.

Créez un nouveau fichier nommé + index.html en utilisant votre éditeur de texte.

Dans ce fichier, ajoutez le balisage HTML suivant, qui définit un squelette HTML et extrait le cadre Foundation CSS et la bibliothèque Vue.js à partir de réseaux de diffusion de contenu (CDN). En utilisant un CDN, il n’ya pas de code supplémentaire à télécharger pour commencer à créer votre application.

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>

La ligne + {{BTCinUSD}} + est un espace réservé pour les données que Vue.js fournira. C’est ainsi que Vue nous permet de restituer les données de manière déclarative dans l’UI. Définissons ces données.

Juste en dessous de la balise + <script> + qui inclut Vue, ajoutez ce code qui créera une nouvelle application Vue et définira une structure de données que nous afficherons sur la page:

index.html

...

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

   </script>
...

Ce code crée une nouvelle instance de l’application Vue et attache l’instance à l’élément avec le + id + de + app +. Vue appelle ce processus mounting une application. Nous définissons une nouvelle instance Vue et la configurons en passant une configuration à l’adresse object. Cet objet contient une option https://vuejs.org/v2/api/#el [+ el +] qui spécifie le + id + de l’élément sur lequel nous voulons monter cette application et un https: // vuejs .org / v2 / api / # Options-Données [+ data +] qui contient les données que nous voulons disponibles pour la vue.

Dans cet exemple, notre modèle de données contient une seule paire clé-valeur contenant une valeur factice pour le prix de Bitcoin: + {BTCinUSD: 3759.91} +. Ces données seront affichées sur notre page HTML, ou notre view, à l’endroit où nous avons placé la clé entre deux accolades, comme ceci:

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

Nous finirons par remplacer cette valeur codée en dur par des données en direct de l’API.

Ouvrez ce fichier dans votre navigateur. Vous verrez la sortie suivante sur votre écran, qui affiche les données fictives:

image: https: //assets.digitalocean.com/articles/vuejs_api_cryptocurrency/NyjwbIM.png [Une application montrant des données factices pour le prix du bitcoin en dollars américains]

Nous affichons le prix aux États-Unis. dollars. Pour l’afficher dans une devise supplémentaire, telle que l’euro, nous allons ajouter une autre paire clé-valeur dans notre modèle de données et ajouter une autre colonne dans le balisage. Tout d’abord, modifiez le modèle de données:

index.html

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

 </script>

Ajoutez ensuite une nouvelle section à la balise affichant le prix en euros sous le code existant.

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>

Enregistrez maintenant le fichier et rechargez-le dans votre navigateur. L’application affiche maintenant le prix du bitcoin à la fois en euros et en dollars américains.

image: https: //assets.digitalocean.com/articles/vuejs_api_cryptocurrency/jTDUE3m.png [Application Vue avec un prix fictif du Bitcoin en USD et en Euros]

Nous avons effectué tout le travail dans un seul fichier. Séparons les choses pour améliorer la maintenabilité.

Étape 2 - Séparer JavaScript et HTML pour plus de clarté

Pour apprendre comment les choses fonctionnent, nous avons placé tout le code dans un seul fichier. Séparons maintenant le code de l’application en deux fichiers distincts, + index.html et` + vue App.js`. Le fichier + index.html gérera la partie balisage et le fichier JavaScript contiendra la logique de l’application. Cela rendra notre application plus facile à gérer. Nous conserverons les deux fichiers dans le même répertoire.

Tout d’abord, modifiez le fichier + index.html + et supprimez le code JavaScript en le remplaçant par un lien vers le fichier + vueApp.js +.

Localisez cette section du fichier:

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

Et modifiez-le pour qu’il ressemble à ceci:

index.html

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

...

Créez ensuite le fichier + vue App.js dans le même répertoire que le fichier` + index.html`.

Dans ce nouveau fichier, placez le même code JavaScript qu’à l’origine dans le fichier + index.html +, sans les balises + <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 }
     });

Enregistrez le fichier et rechargez le fichier + index.html dans le navigateur. Vous verrez le même résultat que vous avez vu précédemment.

Nous souhaitons prendre en charge davantage de crypto-monnaies que Bitcoiin. Voyons comment procéder.

Étape 3 - Utiliser Vue pour itérer sur des données

Nous affichons actuellement des données factices sur le prix du bitcoin. Mais ajoutons Ethereum à. Pour ce faire, nous restructurons nos données et modifions la vue pour utiliser les nouvelles données.

Ouvrez le fichier + vue App.js et modifiez le modèle de données afin qu’il ressemble à ceci:

vueApp.js

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


       }
     });

Notre modèle de données est devenu un peu plus complexe avec une structure de données imbriquée. Nous avons maintenant une clé appelée + résultats + qui contient deux enregistrements; un pour les prix Bitcoin et un autre pour les prix Etherium. Cette nouvelle structure nous permettra de réduire certains dédoublements à notre avis. Cela ressemble également aux données que nous allons obtenir de l’API cryptocompare.

Enregistrez le fichier. Modifions maintenant notre balisage pour traiter les données de manière plus programmatique.

Ouvrez le fichier + index.html + et localisez cette section du fichier où nous affichons le prix de Bitcoin:

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

Remplacez-le par ce code qui itère sur l’ensemble de données que vous avez défini.

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

Ce code utilise la directive https://vuejs.org/v2/api/#v-for [+ v-for +] qui agit comme une boucle for. Il parcourt toutes les paires clé-valeur de notre modèle de données et affiche les données pour chacune d’elles.

Lorsque vous rechargez ceci dans le navigateur, vous verrez les prix simulés:

image: https: //assets.digitalocean.com/articles/vuejs_api_cryptocurrency/PMg24or.png [Application Vue avec prix fictif Bitcoin et Ethereum]

Cette modification nous permet d’ajouter une nouvelle devise aux données + résultats de dans` + vue App.js` et de l’afficher sur la page sans autre modification. Ajoutez une autre entrée fictive à l’ensemble de données pour essayer ceci:

vueApp.js

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

       }
     });

N’oubliez pas d’ajouter la virgule après l’entrée Etherium.

Si vous chargez maintenant la page dans le navigateur Web, la nouvelle entrée sera affichée:

image: https: //assets.digitalocean.com/articles/vuejs_api_cryptocurrency/lYEvm4r.png [Application Vue avec Bitcoin, Ethereum et prix fictif de la devise]

Une fois les données traitées par programme, il n’est plus nécessaire d’ajouter manuellement de nouvelles colonnes dans le balisage.

Récupérons maintenant des données réelles.

Étape 4 - Obtenir des données de l’API

Il est temps de remplacer nos données de base par des données en temps réel issues de l’API cryptocompare pour afficher le prix de Bitcoin et Ethereum sur la page Web en dollars américains et en euros.

Pour obtenir les données de notre page, nous allons demander à l’URL suivante, qui demande Bitcoin et Etherium en dollars américains et en euros:

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

Cette API retournera une réponse JSON. Utilisez + curl + pour adresser une requête à l’API afin d’afficher la réponse:

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

Vous verrez la sortie comme ceci:

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

Ce résultat ressemble exactement au modèle de données codé en dur que vous avez utilisé à l’étape précédente. Il ne nous reste plus qu’à échanger les données en envoyant une requête à cette URL depuis notre application.

Pour faire la demande, nous allons utiliser la fonction https://vuejs.org/v2/api/#mounted [+ monté () +]] de Vue avec la fonction + GET + de la bibliothèque Axios pour récupère les données et les stocke dans le tableau + results + dans le modèle de données. La fonction + mount + est appelée une fois l’application Vue montée sur un élément. Une fois que l’application Vue est montée, nous adressons la demande à l’API et enregistrons les résultats. La page Web sera informée du changement et les valeurs apparaîtront sur la page.

Tout d’abord, ouvrez + index.html et chargez la bibliothèque Axios en ajoutant un script en dessous de la ligne où vous avez inclus Vue:

index.html

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

...

Enregistrez le fichier, puis ouvrez + vue App.js et modifiez-le pour qu’il envoie une requête à l’API et remplisse le modèle de données avec les résultats.

vueApp.js

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







     });

Notez que nous avons supprimé la valeur par défaut pour + results + et l’avons remplacée par un tableau vide. Nous ne disposerons pas de données lors du premier chargement de notre application, mais nous ne voulons pas que les choses se cassent. Notre vue HTML s’attend à ce que certaines données se répètent lors du chargement.

La fonction + axios.get + utilise un Promise. Lorsque l’API renvoie correctement les données, le code situé dans le bloc + alors + est exécuté et les données sont enregistrées dans notre variable + résultats +.

Enregistrez le fichier et rechargez la page + index.html dans le navigateur Web. Cette fois, vous verrez les prix actuels des crypto-devises.

Sinon, consultez le didacticiel Comment utiliser la console de développement JavaScript et utilisez la console JavaScript pour déboguer votre code.

Conclusion

En moins de cinquante lignes, vous avez créé une application consommant des API à l’aide de trois outils seulement: Vue.js, Axios et l’API Cryptocompare. Vous avez appris à afficher les données sur une page, à parcourir les résultats et à remplacer les données statiques par les résultats d’une API.

Maintenant que vous comprenez les principes fondamentaux, vous pouvez ajouter d’autres fonctionnalités à votre application. Modifiez cette application pour afficher des devises supplémentaires ou utilisez les techniques que vous avez apprises dans ce didacticiel pour créer une autre application Web à l’aide d’une API différente.

Related