Vue 上級チュートリアル: NetEase Cloud API を使用して曲のお気に入り機能を実装する方法

Vue 上級チュートリアル: NetEase Cloud API を使用して曲のお気に入り機能を実装する方法

はじめに:
Vue.js はユーザー インターフェイスを構築するための進歩的な JavaScript フレームワークであり、NetEase Cloud API はオープンな多数の音楽関連機能を提供するネットワーク インターフェイス。このチュートリアルでは、Vue.js と NetEase Cloud API を使用して、ユーザーがお気に入りの音楽を追加、削除、再生できるようにする簡単な曲のお気に入り機能を実装する方法を説明します。

環境の準備:
開始する前に、Vue.js と axios (HTTP リクエストを送信するための JavaScript ライブラリ) がインストールされていることを確認してください。

ステップ 1: NetEase Cloud API 権限を取得する
まず、NetEase Cloud 公式 Web サイトで開発者アカウントを申請し、API に必要な appKey と appSecret を取得する必要があります。申請が成功すると、NetEase Cloud API にアクセスするための認証コード (トークン) を受け取ります。

ステップ 2: Vue プロジェクトを作成する
コマンド ラインで次のコマンドを実行して、新しい Vue プロジェクトを作成します:

vue create music-app

次に、プロジェクト ディレクトリに入り、開発サーバーを起動します:

cd music-app
npm run serve

ステップ 3: コードを記述する
まず、音楽リストと操作ボタンを表示する Music.vue という名前のコンポーネントを作成する必要があります。 src/components ディレクトリに Music.vue ファイルを作成し、次のコードを記述します。

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

上記のコードでは、axios を使用して HTTP リクエストを送信し、音楽リストを取得し、NetEase を通じて音楽を追加します。クラウド API、音楽の削除と音楽の再生。 this.token を独自の認証コードに置き換える必要があることに注意してください。

ステップ 4: 音楽コンポーネントを使用する
App.vue で音楽コンポーネントを使用します。 src/App.vue ファイルを変更します。コードは次のとおりです。

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

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

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

これで、Vue.js と NetEase Cloud API の統合が完了し、プロジェクトを実行して効果を確認できます。

npm run serve

http://localhost:8080 にアクセスすると、音楽の追加、削除、再生ができる曲のお気に入りページが表示されます。

概要:
このチュートリアルを通じて、Vue.js と NetEase Cloud API を使用して簡単な曲のお気に入り機能を実装する方法を学びました。実際のプロジェクトでは、必要に応じてコードを拡張および最適化し、機能を追加できます。このチュートリアルが Vue.js の学習と NetEase Cloud API の使用に役立つことを願っています。

以上がVue 上級チュートリアル: NetEase Cloud API を使用して曲のお気に入り機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。