Schneller Einstieg in Vue: So erhalten Sie die Musikalbumliste über die NetEase Cloud API

Erste Schritte mit Vue: So erhalten Sie die Musikalbumliste über die NetEase Cloud API

Einführung:
Vue wird als beliebtes JavaScript-Framework häufig in der Front-End-Entwicklung verwendet. Seine Benutzerfreundlichkeit und Flexibilität ermöglichen es Entwicklern Erstellen Sie schnell verschiedene interaktive Webanwendungen. In diesem Artikel wird erläutert, wie Sie mithilfe des Vue-Frameworks die Liste der Musikalben über die NetEase Cloud-API abrufen und so eine einfache Musik-Player-Anwendung entwickeln können.

Schritt 1: Erstellen Sie ein Vue-Projekt
Führen Sie zunächst den folgenden Befehl in der Befehlszeile aus, um ein neues Vue-Projekt zu erstellen:

vue create music-player

Dann installieren Sie die Module axios und jsonp im Stammverzeichnis des Projekts, um HTTP-Anfragen zu initiieren:

cd music-player
npm install axios jsonp --save

Schritt 2: NetEase Cloud API-Autorisierung einholen
Bevor wir die NetEase Cloud API verwenden können, müssen wir zunächst eine Autorisierung einholen. Besuchen Sie die Netease Cloud Developer Platform (https://neteasecloudmusicapi.vercel.app/), klicken Sie oben rechts auf die Schaltfläche „Jetzt verwenden“, dann im neuen Popup-Fenster auf die Schaltfläche „Mobile Anmeldung“ und verwenden Sie sie Ihre Mobiltelefonnummer und Ihren Bestätigungscode. Melden Sie sich an.

Nachdem Sie sich erfolgreich angemeldet haben, klicken Sie im linken Menü auf „Token generieren“ und kopieren Sie dann den generierten Tokenwert. Dieser Token wird für die Autorisierung nachfolgender API-Anfragen verwendet.

Schritt 3: Vue-Komponente erstellen
Erstellen Sie eine Datei mit dem Namen AlbumList.vue im src-Verzeichnis, um die Musikalbumliste anzuzeigen. In dieser Datei stellen wir die Module axios und jsonp vor und definieren ein Album-Array zum Speichern von Albumdaten. Der spezifische Code lautet wie folgt:

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

Schritt 4: Fügen Sie die AlbumList-Komponente in App.vue ein.
Öffnen Sie die App.vue-Datei und fügen Sie im