创建项⽬
vue create cloud-music
elementUI的安装与引⼊
安装：npm i element-ui -S
引⼊：先使⽤完整引⽤，项⽬开发完成后使⽤按需引⼊，在main.js⽂件中：import ElementUI from'element-ui'
import'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
⾳乐数据
NeteaseCloudMusicApi
git clone github/Binaryify/NeteaseCloudMusicApi.git npm install
node app.js
vue-aplayer的安装和使⽤
安装：npm i vue-aplayer -S
使⽤：创建播放器组件，导⼊import Aplayer from 'vue-aplayer'
<aplayer v-if="song.src"
autoplay
:music="song"
:list="playList"
showLrc
repeat="list"
listFolded
/>
song: {
src: '',
title:'',
artist:'',
pic:'',
lrc:''
},
vue-video-player的安装和使⽤
安装：npm install vue-video-player -S
axios封装
安装axios
npm i axios -S
封装api接⼝
const musicApi={
baseUrl:'localhost:3000',
}
export default musicApi
封装axios
import axios from"axios";
import api from"./api";
const request = ate({
baseURL:api.baseUrl,
timeout: 5000
})
quest.use(config => {
return config
}, error => {
ject(error)
}
)
sponse.use(res=>{springboot框架是干嘛的
return res.data
},error => {
ject(error)
})
export default request
歌单模块
数据处理
接⼝
songListCategories:'/playlist/catlist',//歌单分类
songLists:'/top/playlist',//歌单列表
songList:'/playlist/track/all',//歌单所有歌曲
songListDetail:'/playlist/detail',//歌单详情
数据请求
export function getSongListCategories() {
return request({
url: musicApi.baseUrl + musicApi.songListCategories    })
}
export function getSongLists(cat, limit, offset) {
return request({
url: musicApi.baseUrl + musicApi.songLists,
params: {
cat,
limit,
offset
}
})
}
export function getSongList(id, limit, offset) {
return request({
url: musicApi.baseUrl + musicApi.songList,
params: {
id,
limit,
offset
}
})
}
export function getSongListDetail(id){
return request({
url:musicApi.baseUrl+musicApi.songListDetail,
params:{
id
}
})
}
数据访问
getSongListCategories() {
getSongListCategories().then(res => {
this.categories = res.categories
for (let item of res.sub) {
let sub={
name:item.name,
category:item.category,
activity:item.activity
}
this.sub.push(sub)
}
})
},
getSongLists(cat,limit,offset){
getSongLists(cat,limit,offset).then(res=>{
for(let item of res.playlists){
let songList={
id:item.id,
name: item.name,
verImgUrl,
playCount:item.playCount,
ator.nickname,
}
this.songLists.push(songList)
}
})
},
getSongListDetail(id){
getSongListDetail(id).then(res=>{
let songListInfo=res.playlist;
let creatorInfo=ator;
this.songListDetail={
//歌单名
name:songListInfo.name,
//标签
tags:songListInfo.tags,
//介绍
description:songListInfo.description,
//作者
nickname:creatorInfo.nickname,
avatarUrl:creatorInfo.avatarUrl,
//创建时间
ateTime,
//评论量
commentCount:songListInfomentCount,
//封⾯
verImgUrl
}
})
},
getSongList(id,limit,offset){
getSongList(id,limit,offset).then(res=>{
for(let item of res.songs){
let song={
id:item.id,
name:item.name,
arId:item.ar[0].id,
arName:item.ar[0].name,
alId:item.al.id,
alName:item.al.name,
alPicUrl:item.al.picUrl
}
this.songs.push(song)
}
})
}
逻辑处理业务流程： 1、⽤户进⼊歌单页，展⽰所有歌单分类 2、点击分类显⽰相应的歌单列表 3、点击歌单进⼊歌单详情页、展⽰歌单的信息和包含歌曲列表
categoryClick(cat) {
this.songLists = [];
},
songListClick(id) {
this.$router.push({
name: 'SongListDetail',
params: {
id
}
})
}
歌曲播放模块
数据处理
接⼝
songUrl:'/song/url', //歌曲链接
songDetail:'/song/detail', //歌曲详情
songLyric:'/lyric',//歌词
数据请求
export function getSongUrl(id){
return request({
url:musicApi.baseUrl+musicApi.songUrl,
params:{
id
}
})
}
export function getSongDetail(ids){
return request({
url:musicApi.baseUrl+musicApi.songDetail,
params:{
ids
}
})
}
export function getSongLyric(id){
return request({
url:musicApi.baseUrl+musicApi.songLyric,
params:{
id
}
})
}
//并发异步请求
export function getSong(id){
return axios.all([getSongUrl(id),getSongDetail(id),getSongLyric(id)]) }
Vuex保存⾳乐播放器状态
import Vue from'vue'
import Vuex from'vuex'
import {getSong} from"@/network/music/songlist/songlist"; Vue.use(Vuex)
export default new Vuex.Store({
state: {
songId: 0,
song: {
src: '',
title: '',
artist: '',
pic: '',
lrc: ''
},
playList: []
},
mutations: {
setSongId(state, id) {
return state.songId = id;
},
getSong(state, song) {
return state.song = song;
},
getPlayList(state, song) {
if (state.playList.length === 0) {
return state.playList.push(song);
} else {
let addition = true;
for (let item of state.playList) {
if (item.title === song.title) {
addition = false
break;
}
}
if (addition) {
return state.playList.push(song);
}
}
}
},
actions: {
getSong(context, id) {
getSong(id).then(res => {
let song = {
src: res[0].data[0].url,
title: res[1].songs[0].name,
artist: res[1].songs[0].ar[0].name,
pic: res[1].songs[0].al.picUrl,
lrc: res[2].lrc.lyric
}
contextmit('getSong', song);
contextmit('getPlayList', song);
})
},
},
modules: {}
})
4.⾳乐播放器组件

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。