Vue テクノロジーの共有: NetEase Cloud API を使用して MV プレーヤーのグローバル検索機能を実装する方法

Vue テクノロジーの共有: NetEase Cloud API を使用して MV プレーヤーのグローバル検索機能を実装する方法

現代の音楽時代において、MV (ミュージック ビデオ) の重要性がますます注目を集めています。私たちはユーザーとして、お気に入りの MV を 1 つのプラットフォームで包括的に検索して再生できることを望んでいます。この記事では、Vue フレームワークと NetEase Cloud API を使用して、シンプルな MV プレーヤーのグローバル検索機能を実装する方法を紹介します。

1. 準備
   まず、始める前に、いくつかのツールとリソースを準備する必要があります。まず、Vue プロジェクトを迅速に構築するためのツールである Vue CLI をインストールする必要があります。次のコマンドを使用してグローバルにインストールできます:

npm install -g @vue/cli

次に、新しい Vue プロジェクトを作成する必要があります。コマンド ラインで次のコマンドを使用して作成できます:

vue create mv-player

作成が完了したら、プロジェクト ディレクトリに入り、必要な依存関係をいくつかインストールします:

cd mv-player
npm install axios

プロジェクトでは、次のコマンドも実行します。 need a MV プレーヤーのコンポーネントを表示します。人気の Vue UI フレームワークである Element UI を使用して、インターフェイスを迅速に構築できます。要素 UI をインストールします:

vue add element

2. NetEase Cloud API の開発者アカウントとキーを取得する
   NetEase Cloud API を使用する前に、開発者アカウントを申請し、開発者キー キーを取得する必要があります。 NetEase Cloud公式Webサイトに登録して申し込むだけです。アプリケーションが完了すると、次のような情報を取得できます。

API地址：http://api.music.163.com
开发者账号：your_account@example.com
开发者密钥：your_developer_key

3. グローバル検索コンポーネントの作成
   次に、ユーザー入力を受け取るグローバル検索コンポーネントを作成する必要があります。そして、検索のために NetEase Cloud API にリクエストを送信します。 src ディレクトリに、コンポーネント フォルダーを作成し、その中に SearchBar.vue ファイルを作成します。このファイルでは、グローバル検索のロジックを実装できます。

まず、HTTP リクエストを送信するために axios を導入する必要があります。コンポーネントのスクリプト セクションに、次のコードを追加します。

import axios from 'axios'

export default {
  name: 'SearchBar',
  data() {
    return {
      keyword: ''
    }
  },
  methods: {
    search() {
      axios.get('http://api.music.163.com/search', {
        params: {
          keywords: this.keyword
        }
      })
      .then(response => {
        // 处理搜索结果
      })
      .catch(error => {
        console.error(error)
      })
    }
  }
}

上記のコードでは、ユーザーが入力したキーワードを保存するデータ属性を定義します。検索メソッドでは、axios を使用して NetEase Cloud API の検索インターフェイスに GET リクエストを送信し、キーワードをパラメータとして渡します。 then コールバックでは、API から返された検索結果を処理できます。

次に、コンポーネントのテンプレートにテキスト入力ボックスと検索ボタンを追加する必要があります。テンプレート セクションに、次のコードを追加します。

<template>
  <div>
    <input v-model="keyword" type="text" placeholder="请输入关键字" />
    <button @click="search">搜索</button>
  </div>
</template>

上記のコードでは、v-model ディレクティブを使用して、ユーザーが入力したキーワードをコンポーネントのデータ属性にバインドします。ユーザーが検索ボタンをクリックすると、検索メソッドが呼び出されます。

最後に、コンポーネントのスタイルにいくつかの基本スタイルを追加します。 Element UI が提供するスタイルを使用して、コンポーネントをすばやく美しくすることができます。スタイル セクションに、次のコードを追加します。

<style scoped>
input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  margin-left: 10px;
  padding: 10px;
  background-color: #409EFF;
  color: #fff;
  border-radius: 4px;
}
</style>

この時点で、グローバル検索コンポーネントの作成が完了しました。

4. アプリ コンポーネントでのグローバル検索コンポーネントの使用
   次に、アプリ コンポーネントでグローバル検索コンポーネントを使用し、検索結果を表示する必要があります。 src ディレクトリで App.vue ファイルを開きます。まず、グローバル検索コンポーネントを導入します:

import SearchBar from './components/SearchBar.vue'

次に、コンポーネントのテンプレート部分に次のコードを追加します:

<template>
  <div class="app">
    <SearchBar></SearchBar>
    <div v-for="mv in mvs" :key="mv.id">
      <img src="/static/imghwm/default1.png"  data-src="mv.cover"  class="lazy"  : alt="mv cover" />
      <span>{{ mv.name }}</span>
      <span>{{ mv.artist }}</span>
    </div>
  </div>
</template>

上記のコードでは、v- for ディレクティブは、検索結果を保存するために使用される mvs 配列を走査します。各検索結果には、MV のジャケット、名前、アーティスト情報が表示されます。

次に、コンポーネントのスクリプト セクションに次のコードを追加します。

export default {
  name: 'App',
  components: {
    SearchBar
  },
  data() {
    return {
      mvs: []
    }
  }
}

上記のコードでは、検索結果を保存するためのデータ属性 mvs を定義します。

次に、グローバル検索コンポーネントの検索メソッドで、検索結果を処理し、App コンポーネントの mvs 属性に保存します。グローバル検索コンポーネントを変更するコードは次のとおりです。

import axios from 'axios'

export default {
  name: 'SearchBar',
  data() {
    return {
      keyword: ''
    }
  },
  methods: {
    search() {
      axios.get('http://api.music.163.com/search', {
        params: {
          keywords: this.keyword
        }
      })
      .then(response => {
        this.$emit('search', response.data.result.mvs)
      })
      .catch(error => {
        console.error(error)
      })
    }
  }
}

上記のコードでは、this.$emit を通じて検索結果を親コンポーネントに渡します。 App コンポーネントに、このイベントをリッスンし、検索結果を mvs 属性に保存するメソッドを追加します。 App コンポーネントのコードを次のように変更します。

export default {
  name: 'App',
  components: {
    SearchBar
  },
  data() {
    return {
      mvs: []
    }
  },
  methods: {
    handleSearchResult(mvs) {
      this.mvs = mvs
    }
  }
}

最後に、グローバル検索コンポーネントのテンプレートで、SearchBar コンポーネントの検索イベント リスナーを追加し、親コンポーネントの対応するメソッドを呼び出します。グローバル検索コンポーネントのコードを次のように変更します。

<template>
  <div>
    <input v-model="keyword" type="text" placeholder="请输入关键字" />
    <button @click="search">搜索</button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'SearchBar',
  data() {
    return {
      keyword: ''
    }
  },
  methods: {
    search() {
      axios.get('http://api.music.163.com/search', {
        params: {
          keywords: this.keyword
        }
      })
      .then(response =&gt; {
        this.$emit('search', response.data.result.mvs)
      })
      .catch(error =&gt; {
        console.error(error)
      })
    }
  }
}
</script>

これで、MV プレーヤーのグローバル検索機能の実装が完了しました。グローバル検索コンポーネントにキーワードを入力して検索ボタンをクリックすると、検索結果が表示されます。

要約すると、この記事では、Vue フレームワークと NetEase Cloud API を使用して MV プレーヤーのグローバル検索機能を実装する方法を紹介します。グローバル検索コンポーネントを作成することで、検索リクエストを NetEase Cloud API に簡単に送信し、検索結果を表示できます。この記事が Vue テクノロジーの学習に役立つことを願っています。

以上がVue テクノロジーの共有: NetEase Cloud API を使用して MV プレーヤーのグローバル検索機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。