How to implement the addition, deletion and editing functions of music playlists through Vue and NetEase Cloud API

How to implement the addition, deletion and editing functions of music playlists through Vue and NetEase Cloud API

Music is an indispensable part of our lives, and the development of the Internet has also made the dissemination of music more convenient. NetEase Cloud Music, as one of the largest online music platforms in China, provides users with a wealth of music resources. However, for users who like to collect music, managing their own music through the default playlist function of NetEase Cloud Music may not be flexible enough. In this article, we will learn how to build a personal music playlist with addition, deletion and editing functions by using the Vue framework and NetEase Cloud API.

To implement this feature, we first need to understand Vue and how to use Vue to build user interfaces. Vue is a lightweight JavaScript framework that can help us build interactive web applications. Next, we need to be familiar with the basic functions and usage of NetEase Cloud API. NetEase Cloud API can provide the music data and operation interface we need.

Before we start, we need to prepare a basic Vue project. You can use the Vue CLI to quickly create a new Vue project. After installing Vue CLI, create the project with the following command:

vue create music-playlist

After the creation is completed, we enter the project directory and start the development server:

cd music-playlist
npm run serve

Now, we can start building our music playlist application. First, we need to create a component to display the playlist list. Create a file named Playlist.vue in the src/components directory and add the following code:

<template>
  <div>
    <h2 id="我的音乐歌单">我的音乐歌单</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>

The above is a simple Vue component that will display a playlist containing An unordered list of data. We use the v-for instruction to traverse the playlist data, and use the v-bind instruction to set the id of each song as li The key attribute of the element.

In the above code, we call the fetchPlaylist method in the mounted life cycle hook to obtain the playlist data. This method uses JavaScript's fetch function to initiate a GET request, and the request address is http://localhost:3000/playlist. Please make sure you have set up a simple backend server in your local environment, which will be used as the data source. You can use Express or other backend frameworks to build the server.

Next, we need to implement the function of adding songs. Add the following code in the Playlist.vue component:

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

In the above code, we added an input box and an "Add" button to allow the user to enter song information and add it Add to playlist. The v-model directive binds the value of the input box to the newSong attribute. We can get the value of the input box through this.newSong. When the "Add" button is clicked, we call the addSong method to initiate a POST request and send the value of the input box to the back-end server as the request body. After completing the addition, we refresh the playlist and clear the input box.

Now, we have implemented the functions of displaying playlists, getting playlists and adding songs. Next, let's implement the function of deleting songs. First, add the following code in the Playlist.vue component:

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

In the above code, we have added a "Delete" button for each song. When the button is clicked, we call the deleteSong method to initiate a DELETE request, and send the id of the song to be deleted to the backend server as part of the request path. After completing the deletion, refresh the playlist.

Finally, let us implement the song editing function. Add the following code in the Playlist.vue component:

<template>
  <!-- ... -->
  <ul>
    <li v-for="song in songs" :key="song.id">
      <!-- ... -->
      <button @click="editSong(song)">编辑</button>
    </li>
  </ul>
  <!-- ... -->
  <div v-if="showEditModal">
    <h3 id="编辑歌曲">编辑歌曲</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>

In the above code, we have added an "Edit" button for each song. When the button is clicked, we call the editSong method to display the edit dialog box and store the id and name of the song to be edited in the component's data Attributes. The edit dialog box uses the v-if directive to display and hide. In the editing dialog box, the user can modify the song name and click the "Save" button to initiate a PUT request to save the modifications to the backend server. After saving, refresh the playlist and hide the editing dialog.

Through the above code examples, we have completed the addition, deletion and editing functions of music playlists through Vue and NetEase Cloud API. You can further improve the application according to your needs, such as adding search functions, drag-and-drop sorting, and other features. I hope this article can help you build a powerful music playlist application.

The above is the detailed content of How to implement the addition, deletion and editing functions of music playlists through Vue and NetEase Cloud API. For more information, please follow other related articles on the PHP Chinese website!