Tutoriel avancé Vue : Comment utiliser l'API NetEase Cloud pour implémenter la fonction de classement des chansons

Tutoriel avancé Vue : Comment utiliser l'API NetEase Cloud pour implémenter la fonction de classement des chansons

Introduction :
Vue.js est un framework JavaScript populaire qui peut nous aider à créer facilement des applications frontales interactives. Dans cet article, nous apprendrons comment utiliser Vue.js et l'API NetEase Cloud pour implémenter la fonction de classement des chansons. À travers cet exemple, nous comprendrons davantage l'utilisation de Vue.js et comment interagir avec les API externes.

1. Travail de préparation :
   Avant de commencer, nous devons préparer le travail suivant :
2. Assurez-vous d'avoir installé la dernière version de Vue CLI
3. Enregistrez un compte développeur sur le site officiel de NetEase Cloud pour obtenir la clé API

4. Créer un nouveau projet Vue :
   Tout d'abord, nous devons créer un nouveau projet Vue. Exécutez la commande suivante dans le terminal pour créer un nouveau projet Vue :

   vue create song-ranking

   Ensuite, sélectionnez la configuration par défaut et attendez que Vue CLI génère automatiquement le modèle de projet.

5. Ajoutez les dépendances requises :
   Allez dans le dossier du projet et exécutez la commande suivante pour ajouter les dépendances requises :

   cd song-ranking
   npm install axios

   La commande ci-dessus installera la bibliothèque axios, qui est une bibliothèque couramment utilisée pour envoyer des requêtes HTTP.

6. Obtenez la clé API :
   Connectez-vous au site Web des développeurs NetEase Cloud et créez une nouvelle application. Dans votre application, vous obtiendrez une clé API. Copiez cette clé, nous l'utiliserons dans le code suivant.

7. Créer des composants :
   Créez un nouveau dossier de composants dans le dossier src et créez-y un fichier nommé SongRanking.vue. Ouvrez le fichier et saisissez ce qui suit :

   <template>
     <div>
    <h3>歌曲排行榜</h3>
    <ul>
      <li v-for="song in songs" :key="song.id">
        {{ song.name }} - {{ song.artist }}
      </li>
    </ul>
     </div>
   </template>
   
   <script>
   import axios from 'axios';
   
   export default {
     data() {
    return {
      songs: []
    };
     },
     mounted() {
    this.getSongRanking();
     },
     methods: {
    async getSongRanking() {
      try {
        const response = await axios.get(
          'https://api.apiopen.top/musicBroadcasting'
        );
   
        this.songs = response.data.result[0].songList;
      } catch (error) {
        console.error(error);
      }
    }
     }
   }
   </script>
   
   <style scoped>
   h3 {
     font-size: 20px;
     color: #333;
   }
   
   ul {
     list-style-type: none;
     padding: 0;
   }
   
   li {
     margin: 10px 0;
     font-size: 14px;
     color: #666;
   }
   </style>

8. Utilisation du composant :
   Utilisons maintenant le composant que nous venons de créer. Dans le fichier App.vue du dossier src, supprimez le modèle par défaut et ajoutez le contenu suivant :

   <template>
     <div id="app">
    <SongRanking />
     </div>
   </template>
   
   <script>
   import SongRanking from './components/SongRanking.vue';
   
   export default {
     name: 'App',
     components: {
    SongRanking
     }
   }
   </script>
   
   <style>
   #app {
     font-family: Avenir, sans-serif;
   }
   </style>

9. Exécutez le projet :
   Exécutez la commande suivante pour démarrer le serveur de développement et voyez l'effet dans le navigateur :

   npm run serve

Conclusion :
Grâce aux étapes ci-dessus, nous avons implémenté avec succès une fonction simple de classement des chansons à l'aide de Vue.js et de l'API NetEase Cloud. Nous avons appris à créer des composants Vue et à interagir avec les données d'API externes. Cela nous permettra d'explorer davantage d'applications basées sur Vue.js et d'autres API. J'espère que cet article pourra vous être utile pour votre apprentissage avancé de Vue.js !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!