Vue开发实战：如何利用网易云API实现个性化歌曲库

1.前言

Vue是一款非常流行的前端框架，使用Vue可以快速高效地开发出各种各样的Web应用。在开发过程中，数据层的处理与前端展示是比较重要的两个方面。本文将介绍如何利用Vue框架并结合网易云API实现个性化歌曲库的方法。

2.网易云API

2.1 申请API

首先，我们需要先去网易云开放平台申请API key。步骤如下：

登录网易云音乐开放平台 https://music.163.com/

申请开发者账号，填写相关信息并提交审核。

审核通过后，登录后台获取API key。

API文档地址：https://github.com/Binaryify/NeteaseCloudMusicApi/blob/master/README.md

2.2 对API进行封装

我们可以对API进行封装，以方便Vue的调用。这里借助于 axios 和 qrcode 进行开发。结合Vue的组件化特性，我们建立一个封装了API的组件 `NetEaseCloudMusicAPI`：

import axios from 'axios'
import QRCode from 'qrcode'
const request = axios.create({
  baseURL: 'http://localhost:3000',   // 本地开发的服务器地址
  timeout: 5000,   // 超时时间
  headers: { 'Content-Type': 'application/json' }
})
export default {
  // 根据歌单ID获取歌曲列表
  fetchPlaylistById (id) {
    return request.post('/playlist/detail', { id })
  }
}

3.Vue开发

3.1项目初始化

我们需要在本地创建一个新的Vue工程，使用Vue-CLI可以很简单地实现。使用如下命令进行初始化：

vue create my-project

选择默认的配置即可。初始化完成后，进入目录，运行开发服务器：

cd my-project
npm run serve

现在你可以在浏览器中访问开发服务器地址：`http://localhost:8080`。

3.2 开发视图组件

我们创建一个视图组件，命名为 `SongList`，并在页面中引入，代码如下所示：

<template>
  <div>
    <h2>歌曲列表</h2>
    
      <li v-for="song in songs">{{ song.name }}</li>
    
  </div>
</template>
<script>
import NetEaseCloudMusicAPI from '@/api/NetEaseCloudMusicAPI'
export default {
  name: 'SongList',
  data () {
    return {
      songs: []
    }
  },
  created () {
    this.fetchSongs()
  },
  methods: {
    fetchSongs () {
      NetEaseCloudMusicAPI.fetchPlaylistById('123456').then(res => {
        this.songs = res.data.songs
      })
    }
  }
}
</script>

由代码可知：组件中使用了一个任务：`fetchSongs`，该方法触发时，将调用我们刚才封装好的API，获取歌单中的歌曲列表，并绑定到视图组件的数据属性 `songs` 上。视图组件使用了 v-for 循环输出每一首歌曲的名称。

总结

到这里，我们就学习了如何封装并调用网易云API，并使用Vue框架分别实现了歌曲列表页。实现过程中，我们使用了Vue的组件化特性，将不同的功能封装到了不同的组件中，清晰地实现了业务逻辑。同时我们也学习到了如何在Vue中调用API，以及如何将API包装为一个Vue插件，方便其他开发者使用。