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.

1. Préparation
   Tout d'abord, avant de commencer, nous devons préparer quelques outils et ressources. Tout d’abord, nous devons installer Vue CLI, un outil permettant de créer rapidement des projets Vue. Il peut être installé globalement avec la commande suivante :

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

2. Obtenez le compte de développeur et la clé de l'API NetEase Cloud
   Avant d'utiliser l'API NetEase Cloud, nous devons demander un compte de développeur et obtenir la clé de développeur. Inscrivez-vous simplement et postulez sur le site officiel de NetEase Cloud. Une fois la candidature terminée, nous pouvons obtenir des informations similaires aux suivantes :

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

3. Créer un composant de recherche global
   Ensuite, nous devons créer un composant de recherche global pour recevoir les entrées de l'utilisateur et envoyer des requêtes à l'API NetEase Cloud pour la recherche. . Dans le répertoire src, créez un dossier de composants et créez-y un fichier SearchBar.vue. Dans ce fichier, nous pouvons implémenter la logique de recherche globale.

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.

4. Utilisez le composant de recherche globale dans le composant App
   Ensuite, nous devons utiliser le composant de recherche globale dans le composant App et afficher les résultats de la recherche. Dans le répertoire src, ouvrez le fichier App.vue. Tout d'abord, introduisez le 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 =&gt; {
        this.$emit('search', response.data.result.mvs)
      })
      .catch(error =&gt; {
        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!