Python Flask音乐网：实现排行榜模块
来自CloudWiki
概述
根据用户点击某歌曲的次数多少，
形成了歌曲排行榜。
获取排行榜数据
建立数据表song
DROP TABLE IF EXISTS `song`; CREATE TABLE `song` ( `id` int(11) NOT NULL AUTO_INCREMENT, `songName` varchar(100) DEFAULT NULL, `singer` varchar(100) DEFAULT NULL, `fileURL` varchar(100) DEFAULT NULL, `hits` int(11) DEFAULT NULL, `style` int(11) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=64 DEFAULT CHARSET=utf8;
获取热门歌曲数据
source d:\song.sql
Mysql 使用cmd运行sql脚本: https://www.cnblogs.com/ziquntheblog/p/7542958.html
-- ----------------------------
-- Records of song
-- ----------------------------
INSERT INTO `song` VALUES ('19', 'Lose Yourself ', 'Eminem', '16.mp3', '132', '2');
INSERT INTO `song` VALUES ('20', 'Love the Way You Lie ', 'Eminem', '17.mp3', '8', '2');
INSERT INTO `song` VALUES ('21', 'Lighters', 'Eminem', '18.mp3', '17', '2');
INSERT INTO `song` VALUES ('22', 'Innocence', 'Avril Lavigne', '19.mp3', '3', '2');
INSERT INTO `song` VALUES ('26', 'Here To Never Growing Up', 'Avril Lavigne', '20.mp3', '1', '2');
INSERT INTO `song` VALUES ('27', 'When You re Gone', 'Avril Lavigne', '21.mp3', '1', '2');
INSERT INTO `song` VALUES ('28', 'My Love', 'Westlife', '22.mp3', '0', '2');
INSERT INTO `song` VALUES ('29', 'Seasons In The Su', 'Westlife', '23.mp3', '1', '2');
INSERT INTO `song` VALUES ('30', 'You Raise Me Up', 'Westlife', '24.mp3', '1', '2');
INSERT INTO `song` VALUES ('31', 'Beautiful In White (Demo)', 'Westlife', '25.mp3', '0', '2');
INSERT INTO `song` VALUES ('32', 'Soledad', 'Westlife', '26.mp3', '2', '2');
INSERT INTO `song` VALUES ('33', 'Summer', '久石譲', '27.mp3', '0', '3');
INSERT INTO `song` VALUES ('34', 'The Rai', '久石譲', '28.mp3', '6', '3');
INSERT INTO `song` VALUES ('35', '月光の云海', '久石譲', '29.mp3', '33', '3');
INSERT INTO `song` VALUES ('36', 'Silent Love', '久石譲', '30.mp3', '0', '3');
INSERT INTO `song` VALUES ('37', '“天空の城ラピュタ”~君をのせて', '久石譲', '31.mp3', '0', '1');
INSERT INTO `song` VALUES ('38', '太阳照常升起', '久石譲', '32.mp3', '0', '3');
INSERT INTO `song` VALUES ('39', '《七大罪》', '小林未郁', '33.mp3', '0', '3');
INSERT INTO `song` VALUES ('40', 'Through My Blood', '小林未郁', '34.mp3', '0', '3');
INSERT INTO `song` VALUES ('41', 'Song of', '小林未郁', '35.mp3', '0', '3');
INSERT INTO `song` VALUES ('42', '夜の国 ', 'Annabel', '36.mp3', '1', '3');
INSERT INTO `song` VALUES ('43', 'Above your hand', 'Annabel', '37.mp3', '1', '3');
INSERT INTO `song` VALUES ('44', 'あなたの笑顔という', 'Annabel', '38.mp3', '1', '3');
INSERT INTO `song` VALUES ('45', '삐딱하게 ', 'G-Drago', '39.mp3', '0', '4');
INSERT INTO `song` VALUES ('46', 'Missing You', 'G-Drago', '40.mp3', '3', '4');
INSERT INTO `song` VALUES ('47', '少年啊', 'G-Drago', '41.mp3', '1', '4');
INSERT INTO `song` VALUES ('48', '我的天', 'G-Drago', '42.mp3', '1', '4');
INSERT INTO `song` VALUES ('50', '바람이나 좀 쐐', 'Gary', '44.mp3', '0', '4');
INSERT INTO `song` VALUES ('51', '戏子', 'Gary', '45.mp3', '0', '4');
INSERT INTO `song` VALUES ('52', '人情味', 'Gary', '46.mp3', '0', '4');
INSERT INTO `song` VALUES ('56', '제주도', '金泰妍', '47.mp3', '1', '4');
INSERT INTO `song` VALUES ('57', '잊어버리지마', '金泰妍', '48.mp3', '0', '4');
INSERT INTO `song` VALUES ('58', '만약에', '金泰妍', '49.mp3', '0', '4');
INSERT INTO `song` VALUES ('59', 'Ayaling', '艾力·阿克苏巴', '50.mp3', '0', '5');
INSERT INTO `song` VALUES ('60', 'in b Flat Minor Op. 9-1', '邓泰山', '51.mp3', '1', '5');
INSERT INTO `song` VALUES ('62', '别说我爱你', 'Dome Pakor', '52.mp3', '58', '5');
编写排行榜功能
app/home/views.py:
@home.route("/toplist")
def toplist():
top_song = Song.query.order_by(Song.hits.desc()).limit(30).all()
hot_artist = Artist.query.limit(6).all()
return render_template('home/toplist.html', top_song=top_song, hot_artist=hot_artist) # 渲染模板
渲染排行榜页面
templates/home/toplist.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>甜橙云音乐</title>
<link href="{{ url_for('static',filename='css/pt_discover_index.css')}}" type="text/css" rel="stylesheet">
<link href="{{ url_for('static',filename='css/pt_frame.css')}}" type="text/css" rel="stylesheet">
</head>
<body id="auto-id-GSM4aHykyxAiXHiX" style="background: url('../../static/image/bg.jpg') no-repeat">
<div data-module="discover" data-sub="toplist" id="g_top"
class="m-top">
</div>
<div id="g_nav" class="m-subnav">
</div>
<div id="toplist" class="g-bd3 g-bd3-1 f-cb">
<div class="g-sd3 g-sd3-1">
<div class="n-minelst n-minelst-2">
<h2 class="f-ff1">
热门歌手
</h2>
<ul class="m-hdlist f-cb" style="margin:0px">
{% for artist in hot_artist %}
<li data-res-id="9621" data-res-type="2" data-res-action="log"
data-res-data="recommendclick|0||artist-artist-recommend|10559">
<div class="hd">
<a href="{{url_for('home.artist',id=artist.id)}}" > <img
src="../../static/images/artist/{{artist.imgURL}}">
</a>
</div>
<p>
<a href="{{url_for('home.artist',id=artist.id)}}"
class="nm nm-icn f-ib f-thide">{{artist.artistName}}</a>
</p>
</li>
{% endfor %}
</ul>
</div>
</div>
<div class="g-mn3" style="margin-top: 30px">
<div class="g-mn3c">
<div class="g-wrap12">
<div class="u-title u-title-1 f-cb">
<h3>
<span class="f-ff2">歌曲TOP-30</span>
</h3>
</div>
<div id="song-list-pre-cache" data-key="song_toplist-19723756"
data-simple="0">
<div id="auto-id-VEd67rpf74DVML8f">
<div class="j-flag" id="auto-id-o5oRUwylt22S4fpC">
<table class="m-table m-table-rank">
<thead>
<tr>
<th>
<div class="wp">
歌曲
</div>
</th>
<th class="w2-1">
<div class="wp">
类别
</div>
</th>
<th class="w3">
<div class="wp">
歌手
</div>
</th>
</tr>
</thead>
<tbody>
{% for song in top_song %}
<tr class=" ">
<td class="">
<div class="f-cb">
<div class="tt">
<span
onclick='playA("{{song.songName}}","{{song.id}}");'
class="ply "> </span>
<div class="ttc">
<span class="txt"><b>{{song.songName}} </b> </span>
</div>
</div>
</div>
</td>
<td class=" s-fc3">
<span class="u-dur ">
{% if song.style == 1 %}
华语
{% elif song.style == 2%}
欧美
{% elif song.style == 3%}
日语
{% elif song.style == 4%}
韩语
{% elif song.style == 5%}
其他
{% endif %}
</span>
<div class="opt hshow">
<span onclick='addShow("{{song.id}}")' class="icn icn-fav" title="收藏"></span>
</div>
</td>
<td class="">
<div class="text">
<span>{{song.singer}} </span>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="j-flag"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function playA(name,id){
window.parent.playMusic(name,id);
}
function addShow(id){
window.parent.addShow(id);
}
</script>
</body>
</html>
效果图
启动服务器：
py -3.7 manager.py runserver
浏览器输入：
http://127.0.0.1:5000/home/toplist
可看到：
.
