Maison > Article > interface Web > Comment obtenir des mises à jour en temps réel des résultats de recherche de musique via l'API Vue et NetEase Cloud

Comment obtenir des mises à jour en temps réel des résultats de recherche de musique via l'API Vue et NetEase Cloud

WBOYoriginal: 2023-07-20 15:33:22898parcourir

Avec le développement rapide d'Internet, le partage de musique est devenu un élément essentiel de la vie des gens. Sur les plateformes musicales telles que NetEase Cloud Music, nous pouvons trouver une variété de musiques, mais parfois nous pouvons avoir l'impression que la fonction de recherche n'est pas assez en temps réel ou effectuer des recherches personnalisées pour une musique spécifique. Cet article explique comment implémenter des mises à jour en temps réel des résultats de recherche de musique via l'API Vue et NetEase Cloud.

Vue est un framework frontal populaire doté de fonctionnalités réactives qui peuvent nous aider à obtenir un rendu dynamique des pages et une liaison bidirectionnelle des données. L'API NetEase Cloud est une interface fournie par NetEase Cloud Music, grâce à laquelle des informations détaillées et des résultats de recherche de musique peuvent être obtenus.

Tout d'abord, nous devons créer une instance Vue et la lier à l'élément DOM de la page. Vous pouvez utiliser CDN pour introduire Vue, ou vous pouvez installer Vue via npm.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Music Search</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <input type="text" v-model="keyword" @input="searchMusic">
    <ul>
      <li v-for="song in songs" :key="song.id">{{ song.name }}</li>
    </ul>
  </div>
</body>
</html>

// index.js
const app = new Vue({
  el: '#app',
  data: {
    keyword: '',
    songs: []
  },
  methods: {
    searchMusic() {
      // 发送HTTP请求，获取音乐搜索结果
      fetch(`https://api.imjad.cn/cloudmusic/?type=search&search_type=1&s=${this.keyword}`)
        .then(response => response.json())
        .then(data => {
          this.songs = data.result.songs;
        })
        .catch(error => console.error(error));
    }
  }
});

Dans le code ci-dessus, nous avons créé une instance Vue et défini deux attributs, mot-clé et chansons, dans l'objet de données. Le mot-clé est utilisé pour lier la valeur de la zone de saisie et les chansons sont utilisées pour stocker les résultats de la recherche musicale. Dans l'objet méthodes, nous définissons une méthode nommée searchMusic, qui sera exécutée lorsque la valeur de la zone de saisie change.

Dans la méthode searchMusic, nous utilisons la fonction fetch pour envoyer une requête HTTP pour rechercher de la musique via l'API NetEase Cloud. Dans le résultat renvoyé, nous obtiendrons un résultat de tableau contenant des informations musicales, que nous attribuons à l'attribut songs. En raison de la nature réactive de Vue, la page sera automatiquement mise à jour en fonction des valeurs des chansons.

Grâce à l'API Vue et NetEase Cloud, nous pouvons réaliser des mises à jour en temps réel des résultats de recherche de musique. Lorsque l'utilisateur saisit un mot-clé dans la zone de saisie, la page enverra une requête HTTP basée sur le mot-clé et mettra à jour les résultats de la recherche musicale. De cette manière, les utilisateurs peuvent obtenir des résultats de recherche plus précis en temps réel, améliorant ainsi l’expérience utilisateur.

Il est à noter que afin d'éviter d'envoyer fréquemment des requêtes HTTP, vous pouvez utiliser la fonction anti-rebond pour limiter la méthode searchMusic. La fonction anti-rebond peut limiter l'exécution de la méthode à une seule fois dans un certain intervalle de temps afin de réduire le nombre de requêtes.

// index.js
const app = new Vue({
  el: '#app',
  data: {
    keyword: '',
    songs: []
  },
  methods: {
    searchMusic: _.debounce(function() {
      // 发送HTTP请求，获取音乐搜索结果
      fetch(`https://api.imjad.cn/cloudmusic/?type=search&search_type=1&s=${this.keyword}`)
        .then(response => response.json())
        .then(data => {
          this.songs = data.result.songs;
        })
        .catch(error => console.error(error));
    }, 500)
  }
});

Grâce aux exemples de code ci-dessus, nous pouvons réaliser des mises à jour en temps réel des résultats de recherche de musique via l'API Vue et NetEase Cloud. J'espère que cet article vous sera utile !

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!

npm 前端框架接口对象 dom http

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser l'API Vue et NetEase Cloud pour développer un système de recommandation de playlist personnaliséArticle suivant：Comment utiliser l'API Vue et NetEase Cloud pour développer un système de recommandation de playlist personnalisé

Articles Liés

Voir plus