Vue と NetEase Cloud API を使用して音楽プレイリストの追加、削除、編集機能を実装する方法

Vue と NetEase Cloud API を使用して音楽プレイリストの追加、削除、編集機能を実装する方法

音楽は私たちの生活に欠かせないものであり、インターネットの発達により音楽の普及も進んでいます。もっと便利。 NetEase Cloud Music は、中国最大のオンライン音楽プラットフォームの 1 つとして、ユーザーに豊富な音楽リソースを提供します。ただし、音楽を収集するのが好きなユーザーにとって、NetEase Cloud Music のデフォルトのプレイリスト機能を使用して自分の音楽を管理することは十分な柔軟性ではない可能性があります。この記事では、Vue フレームワークと NetEase Cloud API を使用して、追加、削除、編集機能を備えた個人用の音楽プレイリストを作成する方法を学びます。

この機能を実装するには、まず Vue と、Vue を使用してユーザー インターフェイスを構築する方法を理解する必要があります。 Vue は、インタラクティブな Web アプリケーションの構築に役立つ軽量の JavaScript フレームワークです。次に、NetEase Cloud API の基本的な機能と使用法を理解する必要があります。 NetEase Cloud APIは、必要な音楽データと操作インターフェースを提供します。

始める前に、基本的な Vue プロジェクトを準備する必要があります。 Vue CLI を使用すると、新しい Vue プロジェクトをすばやく作成できます。 Vue CLI をインストールした後、次のコマンドを使用してプロジェクトを作成します:

vue create music-playlist

作成が完了したら、プロジェクト ディレクトリに入り、開発サーバーを起動します:

cd music-playlist
npm run serve

これで、ビルドを開始できます。私たちの音楽プレイリストアプリケーション。まず、プレイリストのリストを表示するコンポーネントを作成する必要があります。 src/components ディレクトリに 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 をコンポーネントのデータ 属性。編集ダイアログ ボックスは、v-if ディレクティブを使用して表示と非表示を切り替えます。編集ダイアログ ボックスで、ユーザーは曲名を変更し、「保存」ボタンをクリックして PUT リクエストを開始し、変更内容をバックエンド サーバーに保存できます。保存後、プレイリストを更新し、編集ダイアログを非表示にします。

上記のコード例により、Vue と NetEase Cloud API を介した音楽プレイリストの追加、削除、編集機能が完成しました。検索機能の追加やドラッグアンドドロップによる並べ替えなど、ニーズに応じてアプリケーションをさらに改良できます。この記事が強力な音楽プレイリスト アプリケーションの構築に役立つことを願っています。

以上がVue と NetEase Cloud API を使用して音楽プレイリストの追加、削除、編集機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。