簡單易用的Vue教學：如何利用網易雲API建立音樂網站-Vue.js-PHP中文網

簡單易用的Vue教學：如何利用網易雲API建立音樂網站

王林

發布： 2023-07-18 09:46:39

原創

1560 人瀏覽過

簡單易用的Vue教學：如何利用網易雲API建立音樂網站

引言：
Vue.js是一款輕量級、高效靈活的前端框架，它可以幫助我們構建互動性強、使用者體驗友善的網頁應用程式。本教學將介紹如何使用Vue.js和網易雲API來建立一個簡單的音樂網站。透過這個項目，您將學會如何使用Vue.js和API進行資料交互，並獲得一些有關Vue.js的基本知識。

準備工作：
首先，我們需要建立一個新的Vue專案。如果您還沒有安裝Vue CLI，可以透過以下命令進行安裝：

npm install -g @vue/cli

登入後複製

安裝完成後，使用下列命令建立新的Vue專案：

vue create music-website

登入後複製

進入專案目錄並啟動開發伺服器：

cd music-website
npm run serve

登入後複製

新增網雲API：
開啟網雲音樂開放平台（https://music.163.com/guides/），申請開發者帳號並創建一個新的應用。取得到應用程式的App Key和App Secret後，我們就可以開始加入網易雲API了。

在專案的根目錄下建立一個.env文件，並新增以下內容：

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

登入後複製

然後在專案的根目錄下執行以下命令安裝axios庫：

npm install axios

登入後複製

在src目錄下建立一個utils資料夾，並在其中建立一個api.js檔案。在api.js檔案中，我們可以編寫與網路易雲API互動的程式碼。以下是一個簡單的範例：

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

登入後複製

建立音樂頁面：
在src目錄下建立一個views資料夾，並在其中建立一個Music.vue檔案。在Music.vue檔案中，我們可以編寫音樂頁面的程式碼。以下是一個簡單的範例：

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

登入後複製

設定路由和主頁：
在src目錄下建立一個router資料夾，並在其中建立一個index.js檔案。在index.js檔案中，我們可以設定路由。以下是一個簡單的範例：

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

登入後複製

在src目錄下的main.js檔案中，我們需要引入路由並設定Vue實例。以下是一個簡單的範例：

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

登入後複製