Comment implémenter les fonctions d'ajout, de suppression et d'édition de listes de lecture musicales via l'API Vue et NetEase Cloud

Comment implémenter les fonctions d'ajout, de suppression et d'édition de listes de lecture musicales via l'API Vue et NetEase Cloud

La musique est un élément indispensable de nos vies, et le développement d'Internet a également rendu la diffusion de la musique plus pratique. NetEase Cloud Music, l'une des plus grandes plateformes de musique en ligne en Chine, offre aux utilisateurs une multitude de ressources musicales. Cependant, pour les utilisateurs qui aiment collectionner de la musique, la gestion de leur propre musique via la fonction de liste de lecture par défaut de NetEase Cloud Music n'est peut-être pas assez flexible. Dans cet article, nous apprendrons comment créer une liste de lecture musicale personnelle avec des fonctions d'ajout, de suppression et d'édition en utilisant le framework Vue et l'API NetEase Cloud.

Pour implémenter cette fonctionnalité, nous devons d'abord comprendre Vue et comment utiliser Vue pour créer des interfaces utilisateur. Vue est un framework JavaScript léger qui peut nous aider à créer des applications Web interactives. Ensuite, nous devons nous familiariser avec les fonctions de base et l'utilisation de l'API NetEase Cloud. L'API NetEase Cloud peut fournir les données musicales et l'interface de fonctionnement dont nous avons besoin.

Avant de commencer, nous devons préparer un projet Vue de base. Vous pouvez utiliser Vue CLI pour créer rapidement un nouveau projet Vue. Après avoir installé Vue CLI, créez le projet avec la commande suivante :

vue create music-playlist

Une fois la création terminée, nous entrons dans le répertoire du projet et démarrons le serveur de développement :

cd music-playlist
npm run serve

Maintenant, nous pouvons commencer à créer notre application de playlist musicale. Tout d’abord, nous devons créer un composant pour afficher la liste de playlist. Créez un fichier nommé Playlist.vue dans le répertoire src/components et ajoutez le code suivant : 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

Ce qui précède est un simple composant Vue, qui affichera une page vide contenant les données de la liste de séquences. Nous utilisons la commande v-for pour parcourir les données de la playlist et utilisons la commande v-bind pour définir le id de chaque chanson comme li L'attribut key de l'élément .

Dans le code ci-dessus, nous appelons la méthode fetchPlaylist dans le hook de cycle de vie monté pour obtenir les données de la playlist. Cette méthode utilise la fonction fetch de JavaScript pour lancer une requête GET, et l'adresse de la requête est http://localhost:3000/playlist. Veuillez vous assurer d'avoir configuré un simple serveur backend dans votre environnement local, qui sera utilisé comme source de données. Vous pouvez utiliser Express ou d'autres frameworks backend pour créer le serveur. 🎜🎜Ensuite, nous devons implémenter la fonction d'ajout de chansons. Ajoutez le code suivant dans le composant Playlist.vue : 🎜rrreee🎜Dans le code ci-dessus, nous avons ajouté une zone de saisie et un bouton "Ajouter" pour permettre à l'utilisateur de saisir des informations sur la chanson et de les ajouter à la chanson Single hit. La directive v-model lie la valeur de la zone de saisie à l'attribut newSong Nous pouvons obtenir la valeur de la zone de saisie via this.newSong. Lorsque l'on clique sur le bouton "Ajouter", nous appelons la méthode <code>addSong pour lancer une requête POST et envoyer la valeur de la zone de saisie au serveur back-end en tant que corps de la requête. Après avoir terminé l'ajout, nous actualisons la liste de lecture et effaçons la zone de saisie. 🎜🎜Maintenant, nous avons implémenté les fonctions d'affichage des listes de lecture, d'obtention de listes de lecture et d'ajout de chansons. Ensuite, implémentons la fonction de suppression de chansons. Tout d'abord, ajoutez le code suivant dans le composant Playlist.vue : 🎜rrreee🎜Dans le code ci-dessus, nous avons ajouté un bouton "Supprimer" pour chaque chanson. Lorsque vous cliquez sur le bouton, nous appelons la méthode deleteSong pour lancer une requête DELETE et envoyons le id de la chanson à supprimer au serveur backend dans le cadre de la requête. chemin. Une fois la suppression terminée, actualisez la liste de lecture. 🎜🎜Enfin, implémentons la fonction d'édition de chansons. Ajoutez le code suivant dans le composant Playlist.vue : 🎜rrreee🎜Dans le code ci-dessus, nous avons ajouté un bouton "Modifier" pour chaque chanson. Lorsque le bouton est cliqué, nous appelons la méthode editSong pour afficher la boîte de dialogue d'édition, et stockons le id et le name de la chanson à modifier. édité dans l'attribut data du composant. La boîte de dialogue d'édition utilise la directive v-if pour afficher et masquer. Dans la boîte de dialogue d'édition, l'utilisateur peut modifier le nom de la chanson et cliquer sur le bouton « Enregistrer » pour lancer une requête PUT afin d'enregistrer les modifications sur le serveur backend. Après avoir enregistré, actualisez la liste de lecture et masquez la boîte de dialogue d'édition. 🎜🎜Grâce aux exemples de code ci-dessus, nous avons complété les fonctions d'ajout, de suppression et d'édition de listes de lecture musicales via l'API Vue et NetEase Cloud. Vous pouvez encore améliorer l'application en fonction de vos besoins, comme l'ajout de fonctions de recherche, le tri par glisser-déposer et d'autres fonctionnalités. J'espère que cet article pourra vous aider à créer une puissante application de playlist musicale. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!