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

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

Introduction :
Vue.js est un framework JavaScript progressif pour la création d'interfaces utilisateur, et l'API NetEase Cloud est une interface réseau ouverte qui fournit de nombreuses fonctionnalités liées à la musique. fonctions. Ce didacticiel vous apprendra à utiliser Vue.js et l'API NetEase Cloud pour implémenter une fonction simple de favoris de chansons, permettant aux utilisateurs d'ajouter, de supprimer et de lire leur musique préférée.

Préparation de l'environnement :
Avant de commencer, assurez-vous d'avoir installé Vue.js et axios (une bibliothèque JavaScript pour l'envoi de requêtes HTTP).

Étape 1 : Obtenir les autorisations de l'API NetEase Cloud
Tout d'abord, nous devons demander un compte de développeur sur le site officiel de NetEase Cloud et obtenir l'appKey et l'appSecret requis pour l'API. Une fois votre candidature réussie, vous recevrez un code d'autorisation (jeton) pour accéder à l'API NetEase Cloud.

Étape 2 : Créer un projet Vue
Exécutez la commande suivante dans la ligne de commande pour créer un nouveau projet Vue :

vue create music-app

Allez ensuite dans le répertoire du projet et démarrez le serveur de développement :

cd music-app
npm run serve

Étape 3 : Écrivez le code
Tout d'abord, nous devons créer un composant nommé Music.vue qui permet d'afficher la liste des musiques et les boutons d'action. Créez le fichier Music.vue dans le répertoire src/components et écrivez-y le code suivant :

<template>
  <div>
    <ul>
      <li v-for="music in musics" :key="music.id">
        {{ music.name }}
        <button @click="play(music.id)">播放</button>
        <button @click="remove(music.id)">删除</button>
      </li>
    </ul>
    <input type="text" v-model="input" placeholder="歌曲名">
    <button @click="add">添加</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      musics: [],
      input: ''
    };
  },
  methods: {
    fetchMusics() {
      axios.get('https://api.music.163.com/v1/song/playlist', {
        headers: {
          'Authorization': 'Bearer ' + this.token
        }
      })
      .then(response => {
        this.musics = response.data;
      })
      .catch(error => {
        console.log(error);
      });
    },
    add() {
      axios.post('https://api.music.163.com/v1/song', {
        name: this.input
      }, {
        headers: {
          'Authorization': 'Bearer ' + this.token
        }
      })
      .then(response => {
        this.input = '';
        this.fetchMusics();
      })
      .catch(error => {
        console.log(error);
      });
    },
    remove(id) {
      axios.delete('https://api.music.163.com/v1/song/' + id, {
        headers: {
          'Authorization': 'Bearer ' + this.token
        }
      })
      .then(response => {
        this.fetchMusics();
      })
      .catch(error => {
        console.log(error);
      });
    },
    play(id) {
      axios.put('https://api.music.163.com/v1/song/' + id, {
        headers: {
          'Authorization': 'Bearer ' + this.token
        }
      })
      .then(response => {
        console.log('正在播放歌曲：' + id);
      })
      .catch(error => {
        console.log(error);
      });
    }
  },
  mounted() {
    this.fetchMusics();
  }
};
</script>

Dans le code ci-dessus, nous utilisons axios pour envoyer des requêtes HTTP pour obtenir la liste de musique, ajouter de la musique, supprimer de la musique et jouer via le Musique de l'API NetEase Cloud. Notez que vous devez remplacer this.token par votre propre code d'autorisation.

Étape 4 : Utiliser le composant Musique
Utilisez le composant Musique dans App.vue. Modifiez le fichier src/App.vue, le code est le suivant :

<template>
  <div id="app">
    <Music></Music>
  </div>
</template>

<script>
import Music from './components/Music.vue';

export default {
  name: 'App',
  components: {
    Music
  }
};
</script>

Maintenant, nous avons terminé l'intégration de Vue.js et de l'API NetEase Cloud, et pouvons exécuter le projet et voir l'effet.

npm run serve

Visitez http://localhost:8080, vous verrez une page de favoris de chansons où vous pourrez ajouter, supprimer et écouter de la musique.

Résumé : 
Grâce à ce didacticiel, nous avons appris à utiliser Vue.js et l'API NetEase Cloud pour implémenter une fonction simple de favoris de chansons. Dans les projets réels, vous pouvez développer et optimiser le code et ajouter plus de fonctions en fonction de vos besoins. J'espère que ce tutoriel vous sera utile pour apprendre Vue.js et utiliser l'API NetEase Cloud.

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!