Perkongsian teknologi Vue: Cara menggunakan NetEase Cloud API untuk melaksanakan fungsi carian global pemain MV

Perkongsian teknologi Vue: Cara menggunakan NetEase Cloud API untuk melaksanakan fungsi carian global pemain MV

Dalam era muzik moden, kepentingan MV (Music Video) telah menarik lebih banyak perhatian. Sebagai pengguna, kami berharap dapat mencari MV kegemaran kami secara menyeluruh pada satu platform dan memainkannya. Artikel ini akan memperkenalkan cara menggunakan rangka kerja Vue dan NetEase Cloud API untuk melaksanakan fungsi carian global pemain MV mudah.

1. Persediaan
   Pertama sekali, sebelum kita mula, kita perlu menyediakan beberapa alatan dan sumber. Pertama, kita perlu memasang Vue CLI, alat untuk membina projek Vue dengan cepat. Ia boleh dipasang secara global dengan arahan berikut:

npm install -g @vue/cli

Selepas itu, kita perlu mencipta projek Vue baharu. Ia boleh dibuat dalam baris arahan dengan arahan berikut:

vue create mv-player

Selepas penciptaan selesai, kami memasuki direktori projek dan memasang beberapa kebergantungan yang diperlukan:

cd mv-player
npm install axios

Dalam projek, kami juga memerlukan komponen untuk memaparkan pemain MV . Kita boleh menggunakan UI Elemen, rangka kerja UI Vue yang popular, untuk membina antara muka dengan cepat. Pasang UI Elemen:

vue add element

2. Dapatkan akaun pembangun dan kunci NetEase Cloud API
   Sebelum menggunakan NetEase Cloud API, kami perlu memohon akaun pembangun dan mendapatkan kunci pembangun. Hanya mendaftar dan memohon di laman web rasmi NetEase Cloud. Selepas aplikasi selesai, kami boleh mendapatkan maklumat yang serupa dengan yang berikut:

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

3. Buat komponen carian global
   Seterusnya, kita perlu mencipta komponen carian global untuk menerima input pengguna dan menghantar permintaan ke NetEase Cloud API untuk carian . Dalam direktori src, cipta folder komponen dan buat fail SearchBar.vue di dalamnya. Dalam fail ini, kita boleh melaksanakan logik carian global.

Pertama, kami perlu memperkenalkan axios untuk menghantar permintaan HTTP. Dalam bahagian skrip komponen, tambahkan kod berikut:

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

Dalam kod di atas, kami menentukan atribut data untuk menyimpan kata kunci yang dimasukkan oleh pengguna. Dalam kaedah carian, kami menggunakan axios untuk menghantar permintaan GET ke antara muka carian NetEase Cloud API dan lulus kata kunci sebagai parameter. Dalam panggilan balik itu, kami boleh mengendalikan hasil carian yang dikembalikan oleh API.

Seterusnya, kita perlu menambah kotak input teks dan butang carian pada templat komponen. Dalam bahagian templat, tambahkan kod berikut:

<template>
  <div>
    <input v-model="keyword" type="text" placeholder="请输入关键字" />
    <button @click="search">搜索</button>
  </div>
</template>

Dalam kod di atas, kami menggunakan arahan model-v untuk mengikat kata kunci yang dimasukkan oleh pengguna dengan atribut data komponen. Apabila pengguna mengklik butang carian, kaedah carian dipanggil.

Akhir sekali, kami menambah beberapa gaya asas pada gaya komponen. Anda boleh menggunakan gaya yang disediakan oleh UI Elemen untuk mencantikkan komponen dengan cepat. Dalam bahagian gaya, tambah kod berikut:

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

Pada ketika ini, kami telah menyelesaikan penulisan komponen carian global.

4. Gunakan komponen carian global dalam komponen Apl
   Seterusnya, kita perlu menggunakan komponen carian global dalam komponen Apl dan memaparkan hasil carian. Dalam direktori src, buka fail App.vue. Mula-mula, perkenalkan komponen carian global:

import SearchBar from './components/SearchBar.vue'

Kemudian, dalam bahagian templat komponen, tambahkan kod berikut:

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

Dalam kod di atas, kami menggunakan arahan v-for untuk melintasi tatasusunan mvs, iaitu digunakan untuk menyimpan hasil carian. Dalam setiap hasil carian, kami memaparkan muka depan, nama dan maklumat artis MV.

Kemudian, dalam bahagian skrip komponen, tambahkan kod berikut:

export default {
  name: 'App',
  components: {
    SearchBar
  },
  data() {
    return {
      mvs: []
    }
  }
}

Dalam kod di atas, kami mentakrifkan mvs atribut data untuk menyimpan hasil carian.

Seterusnya, dalam kaedah carian komponen carian global, kami boleh memproses hasil carian dan menyimpannya ke atribut mvs komponen Apl. Kod untuk mengubah suai komponen carian global adalah seperti berikut:

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

Dalam kod di atas, kami menghantar hasil carian kepada komponen induk melalui ini.$emit. Dalam komponen Apl, kami menambah kaedah yang mendengar acara ini dan menyimpan hasil carian pada atribut mvs. Ubah suai kod komponen Apl seperti berikut:

export default {
  name: 'App',
  components: {
    SearchBar
  },
  data() {
    return {
      mvs: []
    }
  },
  methods: {
    handleSearchResult(mvs) {
      this.mvs = mvs
    }
  }
}

Akhir sekali, dalam templat komponen carian global, tambahkan pendengar acara carian untuk komponen SearchBar dan panggil kaedah yang sepadan dalam komponen induk. Ubah suai kod komponen carian global seperti berikut:

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

Kini, kami telah menyelesaikan pelaksanaan fungsi carian global pemain MV. Dengan memasukkan kata kunci dalam komponen carian global dan mengklik butang carian, hasil carian boleh dipaparkan.

Ringkasnya, artikel ini memperkenalkan cara menggunakan rangka kerja Vue dan NetEase Cloud API untuk melaksanakan fungsi carian global pemain MV. Dengan menulis komponen carian global, kami boleh menghantar permintaan carian dengan mudah ke NetEase Cloud API dan memaparkan hasil carian. Saya harap artikel ini akan membantu anda mempelajari teknologi Vue.

Atas ialah kandungan terperinci Perkongsian teknologi Vue: Cara menggunakan NetEase Cloud API untuk melaksanakan fungsi carian global pemain MV. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!