Tutorial lanjutan Vue: Cara melaksanakan pengesyoran automatik senarai main muzik melalui NetEase Cloud API

Tutorial Lanjutan Vue: Cara melaksanakan pengesyoran automatik senarai main muzik melalui NetEase Cloud API

Abstrak:
Dalam artikel ini, kami akan memperkenalkan cara menggunakan rangka kerja Vue dan NetEase Cloud API untuk melaksanakan fungsi pengesyoran automatik senarai main muzik. Melalui tutorial ini, anda akan belajar cara membina aplikasi cadangan muzik ringkas melalui kaedah pembangunan komponen Vue, dan menggunakan NetEase Cloud API untuk mendapatkan data muzik. Akhir sekali, kami akan menggunakan contoh kod untuk menunjukkan cara melaksanakan fungsi pengesyoran automatik.

1. Persediaan
Sebelum kita mula, kita perlu memastikan bahawa perancah Vue dan kebergantungan yang berkaitan telah dipasang. Anda boleh menggunakan arahan berikut untuk menyemak sama ada ia telah berjaya dipasang:

# 检查Vue是否成功安装
vue --version

2. Buat projek Vue
Pertama, kita perlu menggunakan perancah Vue untuk mencipta projek baharu. Gunakan arahan berikut untuk mencipta projek bernama "music-recommendation":

# 创建项目
vue create music-recommendation

3 Pasang dependencies
Seterusnya, pergi ke folder projek dan pasang dependencies yang diperlukan:

# 进入项目文件夹
cd music-recommendation

# 安装axios
npm install axios --save

axios ialah perpustakaan permintaan rangkaian yang biasa digunakan, kami akan gunakannya untuk meminta API Awan NetEase untuk mendapatkan data muzik.

4 Buat komponen
Pertama, kita perlu mencipta komponen yang dipanggil "Cadangan". Cipta fail Recommendation.vue di bawah folder src/components dan isi dengan kod berikut:

<template>
  <div>
    <h2 id="音乐推荐">音乐推荐</h2>
    <ul>
      <li v-for="song in songs" :key="song.id">
        {{ song.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      songs: []
    };
  },
  mounted() {
    this.fetchSongs();
  },
  methods: {
    fetchSongs() {
      axios.get('https://api.music.163.com/recommend/songs')
        .then(response => {
          this.songs = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

5. Menggunakan komponen
Seterusnya, kita perlu menambah komponen Pengesyoran pada fail App.vue. Buka fail src/App.vue dan ubah suai kod seperti berikut:

<template>
  <div id="app">
    <img src="/static/imghwm/default1.png"  data-src="./assets/logo.png"  class="lazy"  alt="Vue logo">
    <Recommendation />
  </div>
</template>

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

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

6. Jalankan projek
Sekarang, kami telah selesai menulis kod. Jalankan arahan berikut untuk memulakan projek:

npm run serve

Buka http://localhost:8080/ dalam penyemak imbas, anda sepatutnya dapat melihat halaman cadangan muzik yang ringkas dan memaparkan data muzik yang diperoleh melalui NetEase Cloud API.

7. Laksanakan fungsi pengesyoran automatik
Kini, kita perlu membuat beberapa pengubahsuaian pada kod untuk mencapai fungsi pengesyoran automatik. Pertama, kita perlu menambah pemasa dalam kaedah komponen Pengesyoran dan memanggil kaedah fetchSongs sekali-sekala untuk mendapatkan data muzik terkini. Ubah suai kod seperti berikut:

// ...
methods: {
  fetchSongs() {
    axios.get('https://api.music.163.com/recommend/songs')
      .then(response => {
        this.songs = response.data;
      })
      .catch(error => {
        console.error(error);
      })
      .finally(() => {
        setTimeout(this.fetchSongs, 30000); // 每30秒调用一次fetchSongs方法
      });
  }
}
// ...

8. Ringkasan
Melalui tutorial ini, kami mempelajari cara menggunakan rangka kerja Vue dan API Awan NetEase untuk melaksanakan fungsi pengesyoran automatik senarai main muzik. Kami menggunakan kaedah pembangunan komponen Vue untuk membina aplikasi cadangan muzik yang ringkas, dan meminta NetEase Cloud API untuk mendapatkan data muzik melalui perpustakaan axios. Akhir sekali, kami menunjukkan cara melaksanakan fungsi pengesyoran automatik melalui contoh kod. Saya harap tutorial ini akan membantu pembelajaran lanjutan anda tentang Vue.

Atas ialah kandungan terperinci Tutorial lanjutan Vue: Cara melaksanakan pengesyoran automatik senarai main muzik melalui NetEase Cloud API. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!