1. 前言
音乐是生活中不可或缺的一部分，随着互联网的发展，音乐行业也逐渐进入了数字化时代。在这个时代，我们可以利用网易云API获取歌曲信息并实现音乐播放记录功能。本文将详细介绍如何利用Vue和网易云API实现音乐播放记录功能。
2. Vue基础知识
2.1 Vue介绍
Vue 是一个渐进式 JavaScript 框架，它专注于构建用户界面。Vue 的核心库只关注视图层，易于上手。同时，Vue 也可以完美地驱动大型 Web 应用。
2.2 Vue 常用指令
指令（Directive）是 Vue.js 模板中最常用的一项功能。指令带有前缀 v-，表示它们是 Vue 提供的特殊特性。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于视图。
以下是一些常用的指令：
v-bind：动态地绑定一个或多个属性，语法为v-bind:[属性名]="表达式"。
v-model：实现表单元素和应用状态之间的双向绑定。
v-show：根据表达式的值，动态地切换元素的显示与隐藏。
v-for：根据数据源循环渲染元素，语法为v-for="item in items"。
v-if：根据表达式的值，动态地创建或销毁元素。
v-on：监听 DOM 事件，语法为v-on:[事件名]="方法名"。
3. 网易云API
3.1 简介
网易云API 是网易云音乐提供的一组开放接口，包括获取歌曲、歌单、歌词、评论等各种信息的接口。
3.2 使用方法
首先，我们需要注册网易云音乐开放平台账号并创建应用，然后在应用详情页中获取appKey和appSecret。然后，在 Vue 中发送 HTTP 请求来获取网易云音乐的数据。
axios.get("http://your.api.url", {
params: {
appKey: "your app key",
appSecret: "your app secret",
...
}
}).then(response => {
...
})
4. 实现音乐播放记录功能
4.1 播放音乐
在 Vue 中，我们可以使用audio标签来播放音乐。当音乐播放时，我们可以通过以下代码获取当前播放的歌曲信息：
let audio = document.querySelector("audio")
let currentSong = {
id: audio.getAttribute("data-id"),
name: audio.getAttribute("data-name"),
singer: audio.getAttribute("data-singer"),
album: audio.getAttribute("data-album")
}
4.2 保存播放记录
我们可以使用浏览器自带的localStorage来保存播放记录：
let playlist = JSON.parse(localStorage.getItem("playlist") || "[]")
if (playlist.findIndex(item => item.id === currentSong.id) === -1) {
playlist.push(currentSong)
localStorage.setItem("playlist", JSON.stringify(playlist))
}
4.3 显示播放记录
我们可以将保存在localStorage中的播放记录展示在页面上。首先，我们需要在 Vue 中获取播放记录：
export default {
data() {
return {
playlist: []
}
},
mounted() {
let playlistStr = localStorage.getItem("playlist")
if (playlistStr !== null) {
this.playlist = JSON.parse(playlistStr)
}
}
}
然后，我们可以利用v-for指令将播放记录渲染为列表：
<li v-for="(item, index) in playlist" :key="index">
{{ item.name }} - {{ item.singer }}
</li>
5. 总结
在本文中，我们介绍了 Vue 的基础知识、网易云API的使用方法以及如何利用Vue和网易云API实现音乐播放记录功能。希望这篇文章能对正在学习Vue的开发者有所帮助。