Vue 上級チュートリアル: NetEase Cloud API を使用して曲の再生履歴機能を実装する方法

Vue 上級チュートリアル: NetEase Cloud API を使用して曲の再生履歴機能を実装する方法

はじめに:
インターネットの急速な発展に伴い、音楽は人々の生活に欠かせないものになりました。現代では、多くの人が NetEase Cloud Music を通じてお気に入りの音楽を楽しみ、膨大な音楽ライブラリと高音質だけでなく、豊富なコミュニティ機能も提供しています。この記事では、Vue フレームワークと NetEase Cloud API を使用して、ユーザーが簡単に再生履歴を確認できる曲の再生履歴機能を実装する方法を紹介します。

1. 準備
   始める前に、いくつかのツールとリソースを準備する必要があります:
2. Vue CLI: Vue プロジェクトを迅速に構築するためのスキャフォールディング ツール
3. NetEaseクラウド API: 音楽データの取得に使用されます

まず、次のコマンドを使用して Vue CLI をインストールする必要があります:

npm install -g @vue/cli

次に、Vue CLI を使用して新しいプロジェクトを作成できます。

vue create my-music-app
cd my-music-app

2. NetEase Cloud API を取得する
   NetEase Cloud API を使用するには、まず API キーを取得する必要があります。まず NetEase Cloud Developer Center で開発者アカウントを登録し、対応する API キーを申請してください。

3. 曲の再生履歴機能の実装
   Vue プロジェクトでは、Vue Router を使用して異なるページを切り替えることができます。まず、Vue Router をインストールし、曲の再生履歴を表示する新しいページを作成する必要があります。コマンドラインに次のコマンドを入力して Vue Router をインストールします。

   npm install vue-router

次に、src ディレクトリに新しいフォルダー Pages を作成し、その中に History という名前のフォルダーを作成します。その中に History.vue というファイルを作成します。以下はサンプル コードです:

<template>
  <div>
    <h1>歌曲播放历史记录</h1>
    <ul>
      <li v-for="song in songs" :key="song.id">
        {{ song.name }} - {{ song.artist }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      songs: []
    };
  },
  methods: {
    fetchHistory() {
      // 在这里调用网易云API获取歌曲播放历史记录
    }
  },
  mounted() {
    this.fetchHistory();
  }
};
</script>

App.vue に履歴コンポーネントをインポートし、router/index.js にルーティングを設定して、ユーザーがリンクをクリックして曲の再生履歴ページにアクセスできるようにします。以下はサンプル コードです。

// App.vue
<template>
  <div id="app">
    <router-view/>
    <router-link to="/history">查看播放历史记录</router-link>
  </div>
</template>

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

// router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import History from '../pages/History/History.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/history',
    name: 'History',
    component: History
  }
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;

4. NetEase Cloud API を呼び出して曲の再生履歴を取得する
   NetEase Cloud API を呼び出して曲の再生履歴を取得するには、Axios を使用できます。 HTTPリクエストを送信するためのライブラリ。まず、プロジェクトに Axios をインストールする必要があります。コマンド ラインに次のコマンドを入力します。

   npm install axios

次に、API を呼び出して取得したデータをページに表示するコードを History コンポーネントに追加する必要があります。以下はサンプル コードです。

// History.vue
<script>
import axios from 'axios';

export default {
  data() {
    return {
      songs: []
    };
  },
  methods: {
    async fetchHistory() {
      try {
        const response = await axios.get('https://api.music.163.com/history');
        this.songs = response.data;
      } catch (error) {
        console.error(error);
      }
    }
  },
  mounted() {
    this.fetchHistory();
  }
};
</script>

ここまでで、NetEase Cloud API を使用して曲の再生履歴機能を実装する手順が完了しました。ユーザーはリンクをクリックして曲の再生履歴ページにアクセスできるようになり、最近再生した曲に関する情報が表示されます。

結論:
この記事では、Vue フレームワークと NetEase Cloud API を使用して、曲の再生履歴の機能を実装する方法を詳しく紹介します。この記事を読むことで、読者は Vue Router を使用してルート スイッチングを実装する方法、NetEase Cloud API を呼び出して曲の再生履歴を取得する方法、取得したデータをページに表示する方法を学ぶことができます。この記事が読者の皆様のお役に立ち、Vue フレームワークと NetEase Cloud API をより柔軟に使用してさまざまな機能を実装できるようになることを願っています。

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