Maison > Article > interface Web > Partage de technologie Vue : Comment utiliser l'API NetEase Cloud pour implémenter la fonction de recherche globale de MV Player
Partage de la technologie Vue : Comment utiliser l'API NetEase Cloud pour implémenter la fonction de recherche globale du lecteur MV
À l'ère de la musique moderne, l'importance du MV (Music Video) a attiré de plus en plus d'attention. En tant qu'utilisateurs, nous espérons pouvoir rechercher de manière exhaustive nos MV préférés sur une seule plateforme et les lire. Cet article expliquera comment utiliser le framework Vue et l'API NetEase Cloud pour implémenter la fonction de recherche globale d'un simple lecteur MV.
npm install -g @vue/cli
Par la suite, nous devons créer un nouveau projet Vue. Il peut être créé en ligne de commande avec la commande suivante :
vue create mv-player
Une fois la création terminée, nous entrons dans le répertoire du projet et installons quelques dépendances nécessaires :
cd mv-player npm install axios
Dans le projet, nous avons également besoin d'un composant pour afficher le lecteur MV. . Nous pouvons utiliser Element UI, le framework Vue UI populaire, pour créer rapidement des interfaces. Installez Element UI :
vue add element
API地址:http://api.music.163.com 开发者账号:your_account@example.com 开发者密钥:your_developer_key
Tout d'abord, nous devons introduire les axios pour envoyer des requêtes HTTP. Dans la section script du composant, ajoutez le code suivant :
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) }) } } }
Dans le code ci-dessus, nous avons défini un attribut data pour stocker les mots-clés saisis par l'utilisateur. Dans la méthode de recherche, nous utilisons axios pour envoyer une requête GET à l'interface de recherche de l'API NetEase Cloud et transmettre les mots-clés en tant que paramètres. Dans le rappel then, nous pouvons gérer les résultats de recherche renvoyés par l'API.
Ensuite, nous devons ajouter une zone de saisie de texte et un bouton de recherche au modèle du composant. Dans la section modèle, ajoutez le code suivant :
<template> <div> <input v-model="keyword" type="text" placeholder="请输入关键字" /> <button @click="search">搜索</button> </div> </template>
Dans le code ci-dessus, nous utilisons la directive v-model pour lier les mots-clés saisis par l'utilisateur avec l'attribut data du composant. Lorsque l'utilisateur clique sur le bouton de recherche, la méthode de recherche est appelée.
Enfin, nous ajoutons quelques styles de base au style du composant. Vous pouvez utiliser les styles fournis par Element UI pour embellir rapidement les composants. Dans la section style, ajoutez le code suivant :
<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>
À ce stade, nous avons terminé l'écriture du composant de recherche globale.
import SearchBar from './components/SearchBar.vue'
Ensuite, dans la partie modèle du composant, ajoutez le code suivant :
<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>
Dans le code ci-dessus, nous utilisons l'instruction v-for pour parcourir le tableau mvs, qui est utilisé pour stocker le résultat de la recherche. Dans chaque résultat de recherche, nous affichons la couverture, le nom et les informations sur l'artiste du MV.
Ensuite, dans la section script du composant, ajoutez le code suivant :
export default { name: 'App', components: { SearchBar }, data() { return { mvs: [] } } }
Dans le code ci-dessus, nous définissons un attribut de données mvs pour stocker les résultats de recherche.
Ensuite, dans la méthode de recherche du composant de recherche globale, nous pouvons traiter les résultats de la recherche et les enregistrer dans l'attribut mvs du composant App. Le code pour modifier le composant de recherche globale est le suivant :
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) }) } } }
Dans le code ci-dessus, nous transmettons les résultats de la recherche au composant parent via this.$emit. Dans le composant App, nous ajoutons une méthode qui écoute cet événement et enregistre les résultats de la recherche dans l'attribut mvs. Modifiez le code du composant App comme suit :
export default { name: 'App', components: { SearchBar }, data() { return { mvs: [] } }, methods: { handleSearchResult(mvs) { this.mvs = mvs } } }
Enfin, dans le modèle du composant de recherche global, ajoutez un écouteur d'événement de recherche pour le composant SearchBar et appelez la méthode correspondante dans le composant parent. Modifiez le code du composant de recherche globale comme suit :
<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>
Maintenant, nous avons terminé l'implémentation de la fonction de recherche globale du lecteur MV. En saisissant des mots-clés dans le composant de recherche globale et en cliquant sur le bouton de recherche, les résultats de la recherche peuvent être affichés.
Pour résumer, cet article présente comment utiliser le framework Vue et l'API NetEase Cloud pour implémenter la fonction de recherche globale du lecteur MV. En écrivant un composant de recherche global, nous pouvons facilement envoyer des requêtes de recherche à l'API NetEase Cloud et afficher les résultats de la recherche. J'espère que cet article vous aidera à apprendre la technologie Vue.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!