Tutorial lanjutan Vue: Cara menggunakan NetEase Cloud API untuk melaksanakan fungsi ranking lagu

Tutorial Lanjutan Vue: Cara menggunakan NetEase Cloud API untuk melaksanakan fungsi ranking lagu

Pengenalan:
Vue.js ialah rangka kerja JavaScript popular yang boleh membantu kami membina aplikasi bahagian hadapan interaktif dengan mudah. Dalam artikel ini, kita akan mempelajari cara menggunakan Vue.js dan NetEase Cloud API untuk melaksanakan fungsi ranking lagu. Melalui contoh ini, kami akan lebih memahami penggunaan Vue.js dan cara berinteraksi dengan API luaran.

1. Kerja penyediaan:
   Sebelum bermula, kami perlu menyediakan kerja berikut:
2. Pastikan anda telah memasang versi terkini Vue CLI
3. Daftar akaun pembangun di laman web rasmi NetEase Cloud untuk mendapatkan kunci API

4. Buat projek Vue baharu:
   Pertama, kita perlu mencipta projek Vue baharu. Jalankan arahan berikut dalam terminal untuk mencipta projek Vue baharu:

   vue create song-ranking

   Kemudian, pilih konfigurasi lalai dan tunggu sehingga CLI Vue menjana templat projek secara automatik.

5. Tambah kebergantungan yang diperlukan:
   Pergi ke dalam folder projek dan jalankan arahan berikut untuk menambah kebergantungan yang diperlukan:

   cd song-ranking
   npm install axios

   Arahan di atas akan memasang perpustakaan axios, yang merupakan perpustakaan yang biasa digunakan untuk menghantar permintaan HTTP.

6. Dapatkan kunci API:
   Log masuk ke tapak web pembangun NetEase Cloud dan buat aplikasi baharu. Dalam aplikasi anda, anda akan mendapat kunci API. Salin kunci ini, kami akan menggunakannya dalam kod seterusnya.

7. Buat komponen:
   Buat komponen folder baharu dalam folder src dan buat fail bernama SongRanking.vue di dalamnya. Buka fail dan masukkan yang berikut:

   <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. Menggunakan komponen:
   Sekarang, mari gunakan komponen yang baru kita buat. Dalam fail App.vue dalam folder src, padamkan templat lalai dan tambah kandungan berikut:

   <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. Jalankan projek:
   Jalankan arahan berikut untuk memulakan pelayan pembangunan dan lihat kesan dalam penyemak imbas:

   npm run serve

Kesimpulan:
Melalui langkah di atas, kami berjaya melaksanakan fungsi ranking lagu yang mudah menggunakan Vue.js dan NetEase Cloud API. Kami belajar cara membuat komponen Vue dan berinteraksi dengan data daripada API luaran. Ini akan meletakkan asas untuk kami meneroka lebih banyak aplikasi berdasarkan Vue.js dan API lain. Saya harap artikel ini boleh membantu pembelajaran lanjutan anda tentang Vue.js!

Atas ialah kandungan terperinci Tutorial lanjutan Vue: Cara menggunakan NetEase Cloud API untuk melaksanakan fungsi ranking lagu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!