Premiers pas avec le framework Vue : Comment obtenir des informations sur le chanteur via l'API NetEase Cloud

Démarrez avec le framework Vue : Comment obtenir des informations sur le chanteur via l'API NetEase Cloud

Introduction :
Vue.js est un framework JavaScript populaire qui peut être utilisé pour créer des interfaces utilisateur. Vue fournit un moyen concis et clair de gérer les données et de rendre les pages, facilitant ainsi le développement et la maintenance d'applications Web. Cet article explique comment obtenir des informations sur le chanteur via Vue.js et l'API NetEase Cloud, et fournit des exemples de code pertinents.

1. Environnement de développement et préparation
   Avant de commencer, assurez-vous d'avoir installé les dernières versions de Node.js et de Vue CLI. Si vous n'avez pas installé Vue CLI, vous pouvez exécuter la commande suivante sur la ligne de commande pour l'installer :

npm install -g @vue/cli

Une fois l'installation terminée, vous pouvez saisir la commande suivante sur la ligne de commande pour créer un nouveau projet Vue :

vue create music-app

Entrez dans le répertoire du projet :

cd music-app

2. Obtenez l'accès à l'API NetEase Cloud
   Pour utiliser l'API NetEase Cloud, nous devons d'abord y accéder. Ouvrez la page de documentation de l'API NetEase Cloud (https://binaryify.github.io/NeteaseCloudMusicApi/#/) dans votre navigateur, suivez les instructions du document et obtenez l'autorisation d'accès à l'API.
3. Créer un composant Vue
   Créez un nouveau dossier composants dans le répertoire src et créez un fichier de composant Vue nommé Singer.vue dans le dossier composants. Singer.vue sera utilisé pour afficher les informations du chanteur. L'exemple de code est le suivant :

<template>
  <div>
    <h2>{{ singer.name }}</h2>
    <img :src="singer.avatar" :alt="singer.name" />
    <p>{{ singer.intro }}</p>
  </div>
</template>

<script>
export default {
  name: 'Singer',
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      singer: {}
    }
  },
  mounted() {
    this.getSingerInfo()
  },
  methods: {
    getSingerInfo() {
      // 发送API请求获取歌手信息
      // 这里假设我们已经在本地搭建了网易云API的服务器，并且将其部署到了http://localhost:3000/
      const url = `http://localhost:3000/artists/${this.id}`
      fetch(url)
        .then(response => response.json())
        .then(data => {
          this.singer = data
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>

4. Utilisation du composant Singer
   Utilisez le composant Singer que vous venez de créer dans App.vue. L'exemple de code est le suivant :

<template>
  <div>
    <h1>歌手信息</h1>
    <Singer :id="123" />
  </div>
</template>

<script>
import Singer from './components/Singer.vue'

export default {
  name: 'App',
  components: {
    Singer
  }
}
</script>

<style>
...
</style>

Dans le code ci-dessus, nous avons importé le composant Singer que nous venons de créer dans App.vue et utilisé le composant Singer dans le modèle. Nous transmettons un attribut id au composant Singer pour identifier de manière unique l'ID du chanteur. Lorsque le composant Singer est rendu, la fonction montée est appelée, une requête API est envoyée pour obtenir les informations du chanteur, les données obtenues sont ensuite enregistrées dans la variable singer, et enfin affichées dans le modèle.

5. Compiler et exécuter
   Après avoir enregistré tous les fichiers, exécutez la commande suivante dans la ligne de commande pour compiler et exécuter :

npm run serve

Attendez la fin de la compilation et le navigateur ouvrira automatiquement l'application. Vous devriez pouvoir voir une page avec des informations sur l'artiste.

Résumé :
Grâce au didacticiel de cet article, nous avons appris comment obtenir des informations sur le chanteur via Vue.js et l'API NetEase Cloud. Nous avons créé un composant Vue nommé Singer et l'avons utilisé dans App.vue pour afficher les informations sur le chanteur. Dans le composant Singer, nous envoyons une requête API à l'API NetEase Cloud pour obtenir les informations sur le chanteur et afficher les données sur la page. Je vous souhaite du succès dans le développement d'applications utilisant le framework Vue !

Ce qui précède est le contenu de l'article sur la prise en main du framework Vue : comment obtenir des informations sur le chanteur via l'API NetEase Cloud. J'espère que cela 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!