Cara melaksanakan fungsi penambahan, pemadaman dan penyuntingan senarai main muzik melalui API Awan Vue dan NetEase

Cara melaksanakan fungsi penambahan, pemadaman dan penyuntingan senarai main muzik melalui Vue dan NetEase Cloud API

Muzik merupakan bahagian yang amat diperlukan dalam kehidupan kita, dan pembangunan Internet juga telah menjadikan penyebaran muzik lebih mudah. NetEase Cloud Music, sebagai salah satu platform muzik dalam talian terbesar di China, menyediakan pengguna dengan banyak sumber muzik. Walau bagaimanapun, bagi pengguna yang suka mengumpul muzik, mengurus muzik mereka sendiri melalui fungsi senarai main lalai NetEase Cloud Music mungkin tidak cukup fleksibel. Dalam artikel ini, kita akan belajar cara membina senarai main muzik peribadi dengan penambahan, pemadaman dan fungsi penyuntingan menggunakan rangka kerja Vue dan NetEase Cloud API.

Untuk melaksanakan ciri ini, pertama sekali kita perlu memahami Vue dan cara menggunakan Vue untuk membina antara muka pengguna. Vue ialah rangka kerja JavaScript ringan yang boleh membantu kami membina aplikasi web interaktif. Seterusnya, kita perlu biasa dengan fungsi asas dan penggunaan API Awan NetEase. NetEase Cloud API boleh menyediakan data muzik dan antara muka operasi yang kami perlukan.

Sebelum bermula, kita perlu menyediakan projek asas Vue. Anda boleh menggunakan Vue CLI untuk mencipta projek Vue baharu dengan cepat. Selepas memasang Vue CLI, cipta projek dengan arahan berikut:

vue create music-playlist

Selepas penciptaan selesai, kami memasuki direktori projek dan memulakan pelayan pembangunan:

cd music-playlist
npm run serve

Kini, kami boleh mula membina aplikasi senarai main muzik kami. Pertama, kita perlu mencipta komponen untuk memaparkan senarai senarai main. Cipta fail bernama Playlist.vue dalam direktori src/components dan tambahkan kod berikut: Playlist.vue的文件，并添加以下代码：

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

<script>
export default {
  data() {
    return {
      songs: [], // 歌单数据
    };
  },
  mounted() {
    this.fetchPlaylist(); // 获取歌单数据
  },
  methods: {
    async fetchPlaylist() {
      // 发起GET请求获取歌单数据
      const response = await fetch('http://localhost:3000/playlist');
      const data = await response.json();
      this.songs = data;
    },
  },
};
</script>

以上是一个简单的Vue组件，它将会显示一个包含歌单数据的无序列表。我们使用v-for指令来遍历歌单数据，并使用v-bind指令将每首歌的id作为li元素的key属性。

在上面的代码中，我们在mounted生命周期钩子中调用fetchPlaylist方法来获取歌单数据。该方法使用JavaScript的fetch函数发起GET请求，请求地址为http://localhost:3000/playlist。请确保你已经在本地环境中搭建了一个简单的后端服务器，该服务器将用来作为数据源。你可以使用Express或者其他后端框架来搭建服务器。

接下来，我们需要实现添加歌曲的功能。在Playlist.vue组件中添加以下代码：

<template>
  <!-- ... -->
  <div>
    <input type="text" v-model="newSong" placeholder="输入歌名和歌手">
    <button @click="addSong">添加</button>
  </div>
  <!-- ... -->
</template>

<script>
export default {
  // ...
  data() {
    return {
      newSong: '', // 用于存储输入框的值
    };
  },
  // ...
  methods: {
    // ...
    async addSong() {
      // 发起POST请求以添加歌曲
      await fetch('http://localhost:3000/playlist', {
        method: 'POST',
        body: JSON.stringify({ name: this.newSong }),
        headers: { 'Content-Type': 'application/json' },
      });
      this.fetchPlaylist(); // 刷新歌单
      this.newSong = ''; // 清空输入框
    },
  },
};
</script>

在上面的代码中，我们添加了一个输入框和一个“添加”按钮来允许用户输入歌曲信息并将其添加到歌单中。v-model指令绑定了输入框的值到newSong属性上，我们可以通过this.newSong来获取输入框的值。当点击“添加”按钮时，我们调用addSong方法来发起一个POST请求，将输入框的值作为请求体发送给后端服务器。完成添加后，我们刷新歌单并清空输入框。

现在，我们已经实现了显示歌单、获取歌单和添加歌曲的功能。接下来，让我们来实现删除歌曲的功能。首先，在Playlist.vue组件中添加以下代码：

<template>
  <!-- ... -->
  <ul>
    <li v-for="song in songs" :key="song.id">
      {{ song.name }}
      <button @click="deleteSong(song.id)">删除</button>
    </li>
  </ul>
  <!-- ... -->
</template>

<script>
export default {
  // ...
  methods: {
    // ...
    async deleteSong(songId) {
      // 发起DELETE请求以删除歌曲
      await fetch(`http://localhost:3000/playlist/${songId}`, {
        method: 'DELETE',
      });
      this.fetchPlaylist(); // 刷新歌单
    },
  },
};
</script>

在上面的代码中，我们为每一首歌曲添加了一个“删除”按钮。当点击该按钮时，我们调用deleteSong方法来发起一个DELETE请求，并将要删除歌曲的id作为请求路径的一部分发送给后端服务器。完成删除后，刷新歌单。

最后，让我们实现编辑歌曲功能。在Playlist.vue组件中添加以下代码：

<template>
  <!-- ... -->
  <ul>
    <li v-for="song in songs" :key="song.id">
      <!-- ... -->
      <button @click="editSong(song)">编辑</button>
    </li>
  </ul>
  <!-- ... -->
  <div v-if="showEditModal">
    <h3>编辑歌曲</h3>
    <input type="text" v-model="editSongName">
    <button @click="saveChanges">保存</button>
  </div>
</template>

<script>
export default {
  // ...
  data() {
    return {
      showEditModal: false, // 是否显示编辑对话框
      editSongId: '', // 正在编辑的歌曲的id
      editSongName: '', // 用于存储编辑后的歌名
    };
  },
  // ...
  methods: {
    // ...
    editSong(song) {
      this.showEditModal = true; // 显示编辑对话框
      this.editSongId = song.id; // 更新正在编辑的歌曲id
      this.editSongName = song.name; // 更新正在编辑的歌曲名
    },
    async saveChanges() {
      // 发起PUT请求以保存歌曲修改
      await fetch(`http://localhost:3000/playlist/${this.editSongId}`, {
        method: 'PUT',
        body: JSON.stringify({ name: this.editSongName }),
        headers: { 'Content-Type': 'application/json' },
      });
      this.fetchPlaylist(); // 刷新歌单
      this.showEditModal = false; // 隐藏编辑对话框
    },
  },
};
</script>

在上面的代码中，我们为每一首歌曲添加了一个“编辑”按钮。当点击该按钮时，我们调用editSong方法来显示编辑对话框，并将要编辑歌曲的id和name存储在组件的data属性中。编辑对话框使用v-ifrrreee

Di atas ialah komponen Vue yang mudah, yang akan memaparkan halaman kosong yang mengandungi data Susunan senarai main. Kami menggunakan perintah v-for untuk melintasi data senarai main dan menggunakan perintah v-bind untuk menetapkan id setiap lagu sebagai li Atribut key bagi elemen .

Dalam kod di atas, kami memanggil kaedah fetchPlaylist dalam cangkuk kitaran hayat mounted untuk mendapatkan data senarai main. Kaedah ini menggunakan fungsi fetch JavaScript untuk memulakan permintaan GET dan alamat permintaan ialah http://localhost:3000/playlist. Sila pastikan anda telah menyediakan pelayan bahagian belakang yang ringkas dalam persekitaran setempat anda, yang akan digunakan sebagai sumber data. Anda boleh menggunakan rangka kerja Express atau backend lain untuk membina pelayan. 🎜🎜Seterusnya, kita perlu melaksanakan fungsi menambah lagu. Tambahkan kod berikut dalam komponen Playlist.vue: 🎜rrreee🎜Dalam kod di atas, kami telah menambah kotak input dan butang "Tambah" untuk membolehkan pengguna memasukkan maklumat lagu dan menambahkannya ke lagu Single hit. Arahan v-model mengikat nilai kotak input kepada atribut newSong Kita boleh mendapatkan nilai kotak input melalui this.newSong. Apabila butang "Tambah" diklik, kami memanggil kaedah addSong untuk memulakan permintaan POST dan menghantar nilai kotak input ke pelayan bahagian belakang sebagai badan permintaan. Selepas melengkapkan penambahan, kami memuat semula senarai main dan mengosongkan kotak input. 🎜🎜Kini, kami telah melaksanakan fungsi memaparkan senarai main, mendapatkan senarai main dan menambah lagu. Seterusnya, mari kita laksanakan fungsi memadam lagu. Mula-mula, tambah kod berikut dalam komponen Playlist.vue: 🎜rrreee🎜Dalam kod di atas, kami telah menambah butang "Padam" untuk setiap lagu. Apabila butang diklik, kami memanggil kaedah deleteSong untuk memulakan permintaan DELETE dan menghantar id lagu untuk dipadamkan ke pelayan backend sebagai sebahagian daripada permintaan laluan. Selepas menyelesaikan pemadaman, muat semula senarai main. 🎜🎜Akhir sekali, mari kita laksanakan fungsi penyuntingan lagu. Tambahkan kod berikut dalam komponen Playlist.vue: 🎜rrreee🎜Dalam kod di atas, kami telah menambah butang "Edit" untuk setiap lagu. Apabila butang diklik, kami memanggil kaedah editSong untuk memaparkan kotak dialog penyuntingan dan menyimpan id dan nama lagu yang akan diedit dalam atribut data komponen. Kotak dialog edit menggunakan arahan v-if untuk memaparkan dan menyembunyikan. Dalam kotak dialog penyuntingan, pengguna boleh mengubah suai nama lagu dan klik butang "Simpan" untuk memulakan permintaan PUT untuk menyimpan pengubahsuaian pada pelayan bahagian belakang. Selepas menyimpan, muat semula senarai main dan sembunyikan kotak dialog pengeditan. 🎜🎜Melalui contoh kod di atas, kami telah melengkapkan fungsi penambahan, pemadaman dan penyuntingan senarai main muzik melalui API Awan Vue dan NetEase. Anda boleh menambah baik lagi aplikasi mengikut keperluan anda, seperti menambah fungsi carian, pengisihan seret dan lepas dan ciri lain. Saya harap artikel ini dapat membantu anda membina aplikasi senarai main muzik yang berkuasa. 🎜

Atas ialah kandungan terperinci Cara melaksanakan fungsi penambahan, pemadaman dan penyuntingan senarai main muzik melalui API Awan Vue dan NetEase. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!