Mulakan dengan cepat dengan Vue: Cara mendapatkan senarai album muzik melalui API Awan NetEase

Mulakan dengan cepat dengan Vue: Cara mendapatkan senarai album muzik melalui NetEase Cloud API

Pengenalan:
Vue, sebagai rangka kerja JavaScript yang popular, telah digunakan secara meluas dalam pembangunan bahagian hadapan Kemudahan penggunaan dan fleksibilitinya membolehkan pembangun cepat Membina pelbagai aplikasi web interaktif. Artikel ini akan memperkenalkan cara menggunakan rangka kerja Vue untuk mendapatkan senarai album muzik melalui API Awan NetEase untuk membangunkan aplikasi pemain muzik yang ringkas.

Langkah 1: Buat projek Vue
Mula-mula, laksanakan arahan berikut dalam baris arahan untuk mencipta projek Vue baharu:

vue create music-player

Kemudian, pasang modul axios dan jsonp dalam direktori akar projek untuk memulakan permintaan HTTP:

cd music-player
npm install axios jsonp --save

Langkah 2: Dapatkan kebenaran API Awan NetEase
Sebelum menggunakan API Awan NetEase, kami perlu mendapatkan kebenaran terlebih dahulu. Lawati Platform Pembangun Awan Netease (https://neteasecloudmusicapi.vercel.app/), klik butang "Gunakan Sekarang" di penjuru kanan sebelah atas, kemudian klik butang "Log Masuk Mudah Alih" dalam tetingkap pop timbul baharu dan gunakan nombor telefon mudah alih dan kod pengesahan anda.

Selepas log masuk berjaya, klik "Jana token" pada menu kiri, dan kemudian salin nilai token yang dijana ini akan digunakan untuk kebenaran permintaan API berikutnya.

Langkah 3: Cipta komponen Vue
Buat fail bernama AlbumList.vue dalam direktori src untuk memaparkan senarai album muzik. Dalam fail ini, kami akan memperkenalkan modul axios dan jsonp, dan mentakrifkan tatasusunan album untuk menyimpan data album. Kod khusus adalah seperti berikut:

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

Langkah 4: Perkenalkan komponen AlbumList ke dalam App.vue
Buka fail App.vue dan dalam teg