Démarrez rapidement avec Vue : Comment obtenir la liste des albums de musique via l'API NetEase Cloud

Démarrez rapidement avec Vue : Comment obtenir la liste des albums de musique via l'API NetEase Cloud

Introduction :
Vue, en tant que framework JavaScript populaire, a été largement utilisé dans le développement front-end. Sa facilité d'utilisation et sa flexibilité permettent aux développeurs de le faire. Créez rapidement diverses applications Web interactives. Cet article expliquera comment utiliser le framework Vue pour obtenir la liste des albums musicaux via l'API NetEase Cloud afin de développer une application de lecteur de musique simple.

Étape 1 : Créer un projet Vue
Tout d'abord, exécutez la commande suivante dans la ligne de commande pour créer un nouveau projet Vue :

vue create music-player

Ensuite, installez les modules axios et jsonp dans le répertoire racine du projet pour lancer des requêtes HTTP :

cd music-player
npm install axios jsonp --save

Étape 2 : Obtenir l'autorisation de l'API NetEase Cloud
Avant d'utiliser l'API NetEase Cloud, nous devons d'abord obtenir l'autorisation. Visitez la plateforme de développement Netease Cloud (https://neteasecloudmusicapi.vercel.app/), cliquez sur le bouton « Utiliser maintenant » dans le coin supérieur droit, puis cliquez sur le bouton « Connexion mobile » dans la nouvelle fenêtre contextuelle et utilisez votre numéro de téléphone mobile et votre code de vérification.

Après vous être connecté avec succès, cliquez sur « Générer un jeton » dans le menu de gauche, puis copiez la valeur du jeton généré. Ce jeton sera utilisé pour l'autorisation des requêtes API ultérieures.

Étape 3 : Créer un composant Vue
Créez un fichier nommé AlbumList.vue dans le répertoire src pour afficher la liste des albums de musique. Dans ce fichier, nous présenterons les modules axios et jsonp et définirons un tableau albums pour enregistrer les données de l'album. Le code spécifique est le suivant :

<template>
  <div>
    <ul>
      <li v-for="album in albums" :key="album.id">{{ album.name }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';
import jsonp from 'jsonp';

export default {
  data() {
    return {
      albums: [],
    };
  },
  mounted() {
    this.getAlbums();
  },
  methods: {
    getAlbums() {
      const url = 'https://neteasecloudmusicapi.vercel.app/album/newest';

      axios.get(url).then((response) => {
        this.albums = response.data.albums;
      });
    },
  },
};
</script>

<style>
</style>

Étape 4 : Introduisez le composant AlbumList dans App.vue
Ouvrez le fichier App.vue et dans la balise