ホームページ > 記事 > ウェブフロントエンド > Vue テクノロジーの共有: NetEase Cloud API を使用して MV プレーヤーのグローバル検索機能を実装する方法
Vue テクノロジーの共有: NetEase Cloud API を使用して MV プレーヤーのグローバル検索機能を実装する方法
現代の音楽時代において、MV (ミュージック ビデオ) の重要性がますます注目を集めています。私たちはユーザーとして、お気に入りの MV を 1 つのプラットフォームで包括的に検索して再生できることを望んでいます。この記事では、Vue フレームワークと NetEase Cloud API を使用して、シンプルな MV プレーヤーのグローバル検索機能を実装する方法を紹介します。
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
API地址:http://api.music.163.com 开发者账号:your_account@example.com 开发者密钥:your_developer_key
まず、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>
この時点で、グローバル検索コンポーネントの作成が完了しました。
import SearchBar from './components/SearchBar.vue'
次に、コンポーネントのテンプレート部分に次のコードを追加します:
<template> <div class="app"> <SearchBar></SearchBar> <div v-for="mv in mvs" :key="mv.id"> <img :src="mv.cover" 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 => { this.$emit('search', response.data.result.mvs) }) .catch(error => { console.error(error) }) } } } </script>
これで、MV プレーヤーのグローバル検索機能の実装が完了しました。グローバル検索コンポーネントにキーワードを入力して検索ボタンをクリックすると、検索結果が表示されます。
要約すると、この記事では、Vue フレームワークと NetEase Cloud API を使用して MV プレーヤーのグローバル検索機能を実装する方法を紹介します。グローバル検索コンポーネントを作成することで、検索リクエストを NetEase Cloud API に簡単に送信し、検索結果を表示できます。この記事が Vue テクノロジーの学習に役立つことを願っています。
以上がVue テクノロジーの共有: NetEase Cloud API を使用して MV プレーヤーのグローバル検索機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。