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

Vue Advanced Tutorial: Cara menggunakan NetEase Cloud API untuk melaksanakan fungsi kegemaran lagu

Pengenalan:
Vue.js ialah rangka kerja JavaScript progresif untuk membina antara muka pengguna, dan NetEase Cloud API ialah antara muka rangkaian terbuka yang menyediakan Banyak berkaitan muzik fungsi. Tutorial ini akan mengajar anda cara menggunakan API Awan Vue.js dan NetEase untuk melaksanakan fungsi kegemaran lagu yang mudah, membolehkan pengguna menambah, memadam dan memainkan muzik kegemaran mereka.

Persediaan persekitaran:
Sebelum bermula, sila pastikan anda telah memasang Vue.js dan axios (pustaka JavaScript untuk menghantar permintaan HTTP).

Langkah 1: Dapatkan kebenaran API Awan NetEase
Pertama, kami perlu memohon akaun pembangun di tapak web rasmi NetEase Cloud dan mendapatkan appKey dan appSecret yang diperlukan untuk API. Selepas permohonan berjaya, anda akan menerima kod kebenaran (token) untuk mengakses NetEase Cloud API.

Langkah 2: Buat projek Vue
Laksanakan arahan berikut dalam baris arahan untuk mencipta projek Vue baharu:

vue create music-app

Kemudian pergi ke direktori projek dan mulakan pelayan pembangunan:

cd music-app
npm run serve

Langkah 3: Tulis kod
Pertama, kita perlu mencipta Komponen bernama Music.vue digunakan untuk memaparkan senarai muzik dan butang tindakan. Cipta fail Music.vue dalam direktori src/components dan tulis kod berikut di dalamnya:

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

Dalam kod di atas, kami menggunakan axios untuk menghantar permintaan HTTP untuk mendapatkan senarai muzik, menambah muzik, memadam muzik dan bermain melalui Muzik NetEase Cloud API. Ambil perhatian bahawa anda perlu menggantikan this.token dengan kod kebenaran anda sendiri.

Langkah 4: Gunakan komponen Muzik
Gunakan komponen Muzik dalam App.vue. Ubah suai fail src/App.vue, kodnya adalah seperti berikut:

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

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

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

Kini, kami telah menyelesaikan penyepaduan Vue.js dan NetEase Cloud API, dan boleh menjalankan projek dan melihat kesannya.

npm run serve

Lawati http://localhost:8080, anda akan melihat halaman kegemaran lagu di mana anda boleh menambah, memadam dan memainkan muzik.

Ringkasan:
Melalui tutorial ini, kami mempelajari cara menggunakan Vue.js dan NetEase Cloud API untuk melaksanakan fungsi kegemaran lagu yang ringkas. Dalam projek sebenar, anda boleh mengembangkan dan mengoptimumkan kod dan menambah lebih banyak fungsi mengikut keperluan anda. Saya harap tutorial ini akan membantu anda mempelajari Vue.js dan menggunakan API Awan NetEase.

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