Tutorial Vue yang ringkas dan mudah digunakan: Cara menggunakan NetEase Cloud API untuk membina tapak web muzik

Tutorial Vue yang ringkas dan mudah digunakan: Cara membina tapak web muzik menggunakan NetEase Cloud API

Pengenalan:
Vue.js ialah rangka kerja bahagian hadapan yang ringan, cekap dan fleksibel yang boleh membantu kami membina sangat interaktif dan pengguna- aplikasi Web mesra. Tutorial ini akan memperkenalkan cara menggunakan Vue.js dan NetEase Cloud API untuk membina tapak web muzik ringkas. Melalui projek ini, anda akan belajar cara menggunakan Vue.js dan API untuk interaksi data, dan memperoleh beberapa pengetahuan asas tentang Vue.js.

1. Persediaan:
   Pertama, kita perlu mencipta projek Vue baharu. Jika anda belum memasang Vue CLI, anda boleh memasangnya dengan arahan berikut:

npm install -g @vue/cli

Selepas pemasangan selesai, gunakan arahan berikut untuk mencipta projek Vue baharu:

vue create music-website

Pergi ke direktori projek dan mulakan pembangunan pelayan:

cd music-website
npm run serve

2. Tambah NetEase Cloud API:
   Buka Platform Terbuka Muzik Awan NetEase (https://music.163.com/guides/), mohon akaun pembangun dan cipta aplikasi baharu. Selepas mendapatkan Kunci Apl dan Rahsia Apl aplikasi, kami boleh mula menambahkan API Awan NetEase.

Buat fail .env dalam direktori akar projek dan tambah kandungan berikut:

VUE_APP_APP_KEY=您的App Key
VUE_APP_APP_SECRET=您的App Secret

Kemudian jalankan arahan berikut dalam direktori akar projek untuk memasang perpustakaan axios:

npm install axios

Buat folder utils dalam direktori src, Dan buat fail api.js di dalamnya. Dalam fail api.js, kita boleh menulis kod yang berinteraksi dengan API Awan NetEase. Berikut ialah contoh mudah:

import axios from 'axios';

const appKey = process.env.VUE_APP_APP_KEY;
const appSecret = process.env.VUE_APP_APP_SECRET;

// 获取音乐排行榜
export const getTopList = async () => {
  const response = await axios.get(`https://api.music.163.com/toplist/detail?appKey=${appKey}&appSecret=${appSecret}`);
  return response.data;
}

// 获取歌曲详情
export const getSongDetail = async (songId) => {
  const response = await axios.get(`https://api.music.163.com/song/detail?songId=${songId}&appKey=${appKey}&appSecret=${appSecret}`);
  return response.data;
}

// 搜索歌曲
export const searchSong = async (keyword) => {
  const response = await axios.get(`https://api.music.163.com/search?keyword=${keyword}&appKey=${appKey}&appSecret=${appSecret}`);
  return response.data;
}

3. Cipta halaman muzik:
   Buat folder pandangan dalam direktori src dan cipta fail Music.vue di dalamnya. Dalam fail Music.vue, kita boleh menulis kod untuk halaman muzik. Berikut ialah contoh mudah:

<template>
  <div>
    <h1>音乐网站</h1>
    <div>
      <h2>热门排行榜</h2>
      <ul>
        <li v-for="song in topList" :key="song.id">{{ song.name }}</li>
      </ul>
    </div>
    <div>
      <h2>搜索歌曲</h2>
      <input v-model="keyword" placeholder="请输入关键字">
      <button @click="searchSong">搜索</button>
      <ul>
        <li v-for="song in searchResult" :key="song.id">{{ song.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import { getTopList, searchSong } from '../utils/api';

export default {
  name: 'Music',
  data() {
    return {
      topList: [],
      keyword: '',
      searchResult: []
    }
  },
  methods: {
    async fetchTopList() {
      this.topList = await getTopList();
    },
    async searchSong() {
      this.searchResult = await searchSong(this.keyword);
    }
  },
  mounted() {
    this.fetchTopList();
  }
}
</script>

<style>
/* 样式 */
</style>

4. Konfigurasikan penghalaan dan halaman utama:
   Buat folder penghala di bawah direktori src dan buat fail index.js di dalamnya. Dalam fail index.js, kami boleh mengkonfigurasi penghalaan. Berikut ialah contoh mudah:

import Vue from 'vue'
import Router from 'vue-router'
import Music from '../views/Music.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Music',
      component: Music
    }
  ]
})

Dalam fail main.js dalam direktori src, kita perlu memperkenalkan penghalaan dan mengkonfigurasi contoh Vue. Berikut ialah contoh mudah:

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

5. Jalankan projek:
   Kini, kita boleh menjalankan projek dan melihat kesannya. Jalankan projek melalui arahan berikut:

npm run serve

Kemudian buka http://localhost:8080 dalam penyemak imbas, dan anda boleh melihat tapak web muzik yang kami buat.

Kesimpulan:
Melalui tutorial Vue yang ringkas dan mudah digunakan ini, kami mempelajari cara menggunakan Vue.js dan NetEase Cloud API untuk membina tapak web muzik. Melalui projek ini, kami mempelajari penggunaan asas Vue dan beberapa teknik Vue biasa. Saya harap tutorial ini dapat membantu anda memulakan Vue dan mencetuskan minat anda dalam pembangunan bahagian hadapan.

Atas ialah kandungan terperinci Tutorial Vue yang ringkas dan mudah digunakan: Cara menggunakan NetEase Cloud API untuk membina tapak web muzik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!