閒暇之餘寫了一個音樂小應用
專案目錄
程式碼開始 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>每日推薦音樂</title>
<meta name="referrer" content="no-referrer">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="./css/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
<div id="app" class="r-music" v-clock>
<div class="header">
<div class="music-info flex">
<img class="img" :src="music.image">
<div>
<h2 class="name">{{ music.title }}</h2>
<p class="author">{{ music.author }}</p>
</div>
</div>
</div>
<music-list id="music-list" :musicId="music.id" v-on:change-music="changeMusic"></music-list>
<r-player :music="music"></r-player>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
<script type="text/javascript" src="./js/request.js"></script>
<script type="text/javascript" src="./js/api/music.js"></script>
<script type="text/javascript" src="./js/components/player.js"></script>
<script type="text/javascript" src="./js/components/musicList.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
music: {
id: 3,
thumb: '',
author: '',
title: '',
},
musicList: [
]
},
methods: {
changeMusic (music) {
this.music = music;
console.log(music.id)
}
},
created () {
let height = window.screen.height - 200 - 60 - 50;
document.getElementById('music-list').style.height = height + 'px';
}
});
</script>
</body>
</html>/js/request.js
const baseUrl = 'http://xxxxx.com';
axios.defaults.baseURL = baseUrl
axios.interceptors.response.use(function (response) {
if (response.status == 200) {
return response.data
}
return response.data
})
function request (url, data, method = 'get') {
return axios.get(url)
}/js/components/musicList.js
Vue.component('music-list', {
data: function () {
return {
musicList: []
}
},
props: ['musicId'],
template: `
<div class="music-list">
<div v-for="(item, key) in musicList" class="music-item flex" :class="item.id == musicId ? 'active' : ''" @click="handeClickMusic(item)" >
<span class="key">{{ key + 1 }}</span>
<div style="flex: 1">
<h4 class="name">{{ item.title }}</h4>
<p class="author">{{ item.author }}</p>
</div>
<div class="time-long">
{{ item.time }}
</div>
</div>
</div>
`,
created () {
var _self = this;
perDayRecommand().then(res => {
if (res.code == 1) {
res.data.map(v => {
var tmp = {
title: v.title,
author: v.author,
image: v.pic_small,
id: v.song_id
}
_self.musicList.push(tmp)
})
}
})
},
methods: {
handeClickMusic (item) {
this.$emit('change-music', item);
}
}
});/js/components/player.js
Vue.component('r-player', {
props: ['music'],
template: `
<div style="position: fixed;bottom: 0;width: 100%">
<div class="footer flex-between">
<dic class="music-info flex">
<img class="img" :src="music.image">
<div>
<div>
<h4 class="name">{{ music.title }}</h4>
<p class="author">{{ music.author }}</p>
</div>
</div>
</dic>
<div class="actions">
<i class="fa fa-step-backward normal"></i>
<i class="fa fa-play center" @click="getMusicInfo"></i>
<i class="fa fa-step-forward normal"></i>
</div>
</div>
</div>`,
methods: {
getMusicInfo () {
getMusicInfo(this.music.id).then(res => {
console.log(res)
})
}
}
})/js/api/music.js
const perDayRecommand = function () {
return request('?r=recommand')
}
const getMusicInfo = function (id) {
return request('?r=info&id=' + id)
}以上算是全部程式碼,簡單的使用了vue.js並沒有使用前端構建工具. 個人小玩具這樣寫起來也挺方便的不用修改一點點就build
體驗地址 http://xsand.cn/music/
功能並不是很完善(嚐鮮)
持續更新...
介面使用了https://github.com/MZCretin/RollToolsApi. 哈哈並沒有廣告. 挺好用的, 方便
TODO
- 完善彈窗,loading,播放等細節功能
- 歌詞
- 進度條
- 有時間再弄成webapp試試感覺
本作品採用《CC 協議》，轉載必須註明作者和本文連結