Bermula dengan rangka kerja Vue: Cara mendapatkan maklumat penyanyi melalui NetEase Cloud API

Bermula dengan rangka kerja Vue: Cara mendapatkan maklumat penyanyi melalui NetEase Cloud API

Pengenalan:
Vue.js ialah rangka kerja JavaScript popular yang boleh digunakan untuk membina antara muka pengguna. Vue menyediakan cara yang ringkas dan jelas untuk mengurus data dan memaparkan halaman, menjadikannya lebih mudah untuk membangun dan menyelenggara aplikasi web. Artikel ini akan memperkenalkan cara mendapatkan maklumat penyanyi melalui Vue.js dan NetEase Cloud API, serta memberikan contoh kod yang berkaitan.

1. Persekitaran dan Persediaan Pembangunan
   Sebelum anda bermula, pastikan anda memasang versi terkini Node.js dan Vue CLI. Jika anda belum memasang Vue CLI, anda boleh menjalankan arahan berikut pada baris arahan untuk memasangnya:

npm install -g @vue/cli

Selepas pemasangan selesai, anda boleh memasukkan arahan berikut pada baris arahan untuk mencipta projek Vue baharu:

vue create music-app

Masukkan direktori projek :

cd music-app

2. Dapatkan akses kepada NetEase Cloud API
   Untuk menggunakan NetEase Cloud API, kita perlu mendapatkan akses terlebih dahulu. Buka halaman dokumentasi API Awan NetEase (https://binaryify.github.io/NeteaseCloudMusicApi/#/) dalam penyemak imbas anda, ikut arahan dalam dokumen dan dapatkan kebenaran akses API.
3. Buat komponen Vue
   Buat komponen folder baharu dalam direktori src, dan buat fail komponen Vue bernama Singer.vue dalam folder komponen. Singer.vue akan digunakan untuk memaparkan maklumat penyanyi Contoh kod adalah seperti berikut:

<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. Menggunakan komponen Singer
   Gunakan komponen Singer yang baru dibuat dalam App.vue. Contoh kod adalah seperti berikut:

<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>

Dalam kod di atas, kami mengimport komponen Singer yang baru kami buat dalam App.vue dan menggunakan komponen Singer dalam templat. Kami memberikan atribut id kepada komponen Singer untuk mengenal pasti ID penyanyi secara unik. Apabila komponen Singer diberikan, fungsi yang dipasang dipanggil, permintaan API dihantar untuk mendapatkan maklumat penyanyi, data yang diperoleh kemudian disimpan dalam pembolehubah penyanyi, dan akhirnya dipaparkan dalam templat.

5. Kompil dan Jalankan
   Selepas menyimpan semua fail, jalankan arahan berikut dalam baris arahan untuk menyusun dan jalankan:

npm run serve

Tunggu sehingga kompilasi selesai dan penyemak imbas akan membuka aplikasi secara automatik. Anda sepatutnya dapat melihat halaman dengan maklumat artis.

Ringkasan:
Melalui tutorial dalam artikel ini, kami mempelajari cara mendapatkan maklumat penyanyi melalui Vue.js dan NetEase Cloud API. Kami mencipta komponen Vue bernama Singer dan menggunakannya dalam App.vue untuk memaparkan maklumat penyanyi. Dalam komponen Singer, kami menghantar permintaan API kepada NetEase Cloud API untuk mendapatkan maklumat penyanyi dan memaparkan data pada halaman. Saya doakan anda berjaya membangunkan aplikasi menggunakan rangka kerja Vue!

Di atas ialah kandungan artikel tentang bermula dengan rangka kerja Vue: cara mendapatkan maklumat penyanyi melalui API Awan NetEase saya harap ia akan membantu anda.

Atas ialah kandungan terperinci Bermula dengan rangka kerja Vue: Cara mendapatkan maklumat penyanyi melalui NetEase Cloud API. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!