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
可看到:
.