Vue 上級チュートリアル: NetEase Cloud API を使用して曲ランキング機能を実装する方法

Vue 上級チュートリアル: NetEase Cloud API を使用して曲ランキング機能を実装する方法

はじめに:
Vue.js は、インタラクティブなフロントエンド アプリを簡単に構築できる人気の JavaScript フレームワークです。この記事では、Vue.js と NetEase Cloud API を使用して曲ランキング機能を実装する方法を学びます。この例を通じて、Vue.js の使用法と外部 API と対話する方法をさらに理解します。

1. 準備作業:
   開始する前に、次の作業を準備する必要があります:
2. 最新バージョンの Vue CLI がインストールされていることを確認してください
3. NetEase Cloud 公式 Web サイトで開発者アカウントを登録して API キーを取得します

4. 新しい Vue プロジェクトを作成します:
   まず、新しい Vue プロジェクトを作成する必要があります。ターミナルで次のコマンドを実行して、新しい Vue プロジェクトを作成します。

   vue create song-ranking

   次に、デフォルト構成を選択し、Vue CLI がプロジェクト テンプレートを自動的に生成するまで待ちます。

5. 必要な依存関係を追加します:
   プロジェクト フォルダーを入力し、次のコマンドを実行して必要な依存関係を追加します:

   cd song-ranking
   npm install axios

   上記のコマンドは axios ライブラリをインストールします, これは、HTTP リクエストを送信するためによく使用されるライブラリです。

6. API キーを取得します:
   NetEase Cloud 開発者 Web サイトにログインし、新しいアプリケーションを作成します。アプリケーションで API キーを取得します。このキーをコピーします。後続のコードで使用します。

7. コンポーネントの作成:
   src フォルダーに新しいフォルダー コンポーネントを作成し、その中に SongRanking.vue という名前のファイルを作成します。ファイルを開いて次のように入力します:

   <template>
     <div>
    <h3>歌曲排行榜</h3>
    <ul>
      <li v-for="song in songs" :key="song.id">
        {{ song.name }} - {{ song.artist }}
      </li>
    </ul>
     </div>
   </template>
   
   <script>
   import axios from 'axios';
   
   export default {
     data() {
    return {
      songs: []
    };
     },
     mounted() {
    this.getSongRanking();
     },
     methods: {
    async getSongRanking() {
      try {
        const response = await axios.get(
          'https://api.apiopen.top/musicBroadcasting'
        );
   
        this.songs = response.data.result[0].songList;
      } catch (error) {
        console.error(error);
      }
    }
     }
   }
   </script>
   
   <style scoped>
   h3 {
     font-size: 20px;
     color: #333;
   }
   
   ul {
     list-style-type: none;
     padding: 0;
   }
   
   li {
     margin: 10px 0;
     font-size: 14px;
     color: #666;
   }
   </style>

8. コンポーネントの使用:
   次に、作成したばかりのコンポーネントを使用しましょう。 src フォルダーの App.vue ファイルで、デフォルトのテンプレートを削除し、次のコードを追加します。

   <template>
     <div id="app">
    <SongRanking />
     </div>
   </template>
   
   <script>
   import SongRanking from './components/SongRanking.vue';
   
   export default {
     name: 'App',
     components: {
    SongRanking
     }
   }
   </script>
   
   <style>
   #app {
     font-family: Avenir, sans-serif;
   }
   </style>

9. プロジェクトを実行します。
   次のコマンドを実行して、開発サーバーを起動します。ブラウザで効果を確認します:

   npm run serve

結論:
上記の手順により、Vue.js と NetEase Cloud API を使用して簡単な曲ランキング機能を実装することに成功しました。 Vue コンポーネントを作成し、外部 API からのデータを操作する方法を学びました。これにより、Vue.js やその他の API に基づいたアプリケーションをさらに探索するための基礎が築かれます。この記事が Vue.js の高度な学習に役立つことを願っています。

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