Einfaches und benutzerfreundliches Vue-Tutorial: So verwenden Sie die NetEase Cloud API zum Erstellen einer Musik-Website

Einfaches und benutzerfreundliches Vue-Tutorial: So erstellen Sie eine Musik-Website mit der NetEase Cloud API

Einführung:
Vue.js ist ein leichtes, effizientes und flexibles Front-End-Framework, das uns dabei helfen kann, hochgradig interaktive und benutzerfreundliche Websites zu erstellen. benutzerfreundliche Webanwendung. In diesem Tutorial erfahren Sie, wie Sie mit Vue.js und der NetEase Cloud API eine einfache Musik-Website erstellen. Durch dieses Projekt lernen Sie, wie Sie Vue.js und API für die Dateninteraktion verwenden, und erwerben einige Grundkenntnisse über Vue.js.

1. Vorbereitung:
   Zuerst müssen wir ein neues Vue-Projekt erstellen. Wenn Sie Vue CLI nicht installiert haben, können Sie es mit dem folgenden Befehl installieren:

npm install -g @vue/cli

Nach Abschluss der Installation verwenden Sie den folgenden Befehl, um ein neues Vue-Projekt zu erstellen:

vue create music-website

Gehen Sie in das Projektverzeichnis und starten Sie die Entwicklung Server:

cd music-website
npm run serve

2. NetEase Cloud API hinzufügen:
   Öffnen Sie die NetEase Cloud Music Open Platform (https://music.163.com/guides/), beantragen Sie ein Entwicklerkonto und erstellen Sie eine neue Anwendung. Nachdem wir den App Key und das App Secret der Anwendung erhalten haben, können wir mit dem Hinzufügen der NetEase Cloud API beginnen.

Erstellen Sie eine .env-Datei im Stammverzeichnis des Projekts und fügen Sie den folgenden Inhalt hinzu:

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

Führen Sie dann den folgenden Befehl im Stammverzeichnis des Projekts aus, um die Axios-Bibliothek zu installieren:

npm install axios

Erstellen Sie einen Utils-Ordner in das src-Verzeichnis und erstellen Sie darin eine api.js-Datei. In der Datei api.js können wir Code schreiben, der mit der NetEase Cloud API interagiert. Hier ist ein einfaches Beispiel:

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. Erstellen Sie eine Musikseite:
   Erstellen Sie einen Views-Ordner im src-Verzeichnis und erstellen Sie darin eine Music.vue-Datei. In die Datei Music.vue können wir den Code für die Musikseite schreiben. Hier ist ein einfaches Beispiel:

<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. Routing und Homepage konfigurieren:
   Erstellen Sie einen Router-Ordner im src-Verzeichnis und erstellen Sie darin eine index.js-Datei. In der Datei index.js können wir das Routing konfigurieren. Das Folgende ist ein einfaches Beispiel:

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

In der Datei main.js im src-Verzeichnis müssen wir Routing einführen und die Vue-Instanz konfigurieren. Hier ist ein einfaches Beispiel:

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. Führen Sie das Projekt aus:
   Jetzt können wir das Projekt ausführen und die Auswirkungen sehen. Führen Sie das Projekt mit dem folgenden Befehl aus:

npm run serve

Öffnen Sie dann http://localhost:8080 im Browser und Sie können die von uns erstellte Musik-Website sehen.

Fazit:
Durch dieses einfache und benutzerfreundliche Vue-Tutorial haben wir gelernt, wie man mit Vue.js und der NetEase Cloud API eine Musik-Website erstellt. Durch dieses Projekt haben wir die grundlegende Verwendung von Vue und einige gängige Vue-Techniken erlernt. Ich hoffe, dass dieses Tutorial Ihnen den Einstieg in Vue erleichtern und Ihr Interesse an der Front-End-Entwicklung wecken kann.

Das obige ist der detaillierte Inhalt vonEinfaches und benutzerfreundliches Vue-Tutorial: So verwenden Sie die NetEase Cloud API zum Erstellen einer Musik-Website. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!