11.5 歌曲排行榜
歌曲排行榜是通过首页的导航链接进入的，按照歌曲的播放次数进行降序显示。从排行榜页面的设计图可以看到，网页实现三个功能：网页顶部搜索、歌曲分类筛选和歌曲信息列表，其说明如下：
1、网页顶部搜索：每个网页都具备基本功能，而且每个网页的实现方式和原理是相同的。
2、歌曲分类筛选：根据歌曲信息表song的song_type字段对歌曲进行筛选，并显示在网页左侧的歌曲分类中。
3、歌曲信息列表：在网页上显示播放次数排在前10条的歌曲信息。
歌曲排行榜是由项目music的项目应用ranking实现的，我们在ranking目录下创建模板文件夹templates并且在文件夹中放置模板文件ranking.html，如下图：
歌曲排行榜是由ranking的urls.py、views.py和ranking.html实现的。在ranking的urls.py中设置歌曲排行榜的URL地址信息，并在views.py中编写相应的URL处理函数，其代码如下：
#ranking/urls.py from django.urls import path from . import views urlpatterns = [ path('', views.rankingView, name='ranking'), ] #ranking的views.py from django.shortcuts import render from index.models import * def rankingView(request): # 搜索歌曲 search_song = Dynamic.objects.select_related('song').order_by('-dynamic_search').all()[:4] # 歌曲分类列表 All_list = Song.objects.values('song_type').distinct() # 歌曲列表信息 song_type = request.GET.get('type', '') if song_type: song_info = Dynamic.objects.select_related('song').filter(song__song_type=song_type).order_by('-dynamic_plays').all()[:10] else: song_info = Dynamic.objects.select_related('song').order_by('-dynamic_plays').all()[:10] return render(request, 'ranking.html', locals())
上述代码将歌曲排行榜的响应处理交给视图函数rankingView执行，并且将URL命名为ranking。视图函数rankingView一共执行了三次数据查询，其说明如下：
1、search_song：通过歌曲的搜索次数进行降序查询，由Django内置的select_related方法实现模型Song和Dynamic的数据查询
2、All_list：对模型Song的字段song_type进行去重查询。
3、song_info：根据用户的GET请求参数进行数据查询。若请求参数为空，则对全部歌曲进行筛选，获取播放次数排在前10位的歌曲；若请求参数不为空，则根据参数内容进行歌曲筛选，获取播放次数排在前10为的歌曲。
根据视图函数rankingView所生成的变量，我们在模板ranking.html中编写相关的模板语法，由于模板ranking.html的代码较多，此处指列出相关的功能代码，完整的模板代码可在下载资源中查看。模板ranking.html的功能代码如下：
#模板index.html的功能代码 #排行榜的搜索框，由HTML表单实现，{% url 'search' XXX %}是搜索页面的地址链接 <form id="searchForm" action="{% url 'search' 1 %}" method="post" target="_blank"> {% csrf_token %} <div class="search-keyword"> <input name="kword" type="text" class="keyword" maxlength="120" placeholder="音乐节" /> </div> <input id="subSerch" type="submit" class="search-button" value="搜 索" /> </form> #搜索框下面的热门搜索歌曲，{% url 'play' XXX %}是播放页面的地址链接 <div id="suggest" class="search-suggest"></div> <div class="search-hot-words"> {% for song in search_song %} <a target="play" href="{% url 'play' song.song.song_id %}" >{{ song.song.song_name }}</a> {% endfor %} </div> #网站导航栏 <ul class="nav clearfix"> <li><a href="/">首页</a></li> <li><a href="{% url 'ranking' %}" target="_blank">歌曲排行</a></li> <li><a href="{% url 'home' 1 %}" target="_blank">用户中心</a></li> </ul> #歌曲分类列表 <div class="side-nav"> <div class="nav-head"> <a href="{% url 'ranking' %}">所有歌曲分类</a> </div> <ul id="sideNav" class="cate-item"> {% for item in All_list %} <li class="computer"> <div class="main-cate"> <a href="{% url 'ranking' %}?type={{ item.song_type }}" class="main-title">{{ item.song_type }}</a> </div> </li> {% endfor %} </ul> </div> #歌曲列表信息 <table class="rank-list-table"> <tr> <th class="cell-1">排名</th> <th class="cell-2">图片</th> <th class="cell-3">歌名</th> <th class="cell-4">专辑</th> <th class="cell-5">下载量</th> <th class="cell-6">播放量</th> </tr> {% for item in song_info %} <tr> {%if forloop.counter < 4 %} <td><span class="n1">{{forloop.counter}}</span></td> {%else %} <td><span class="n2">{{forloop.counter}}</span></td> {%endif %} <td> <a href="{% url 'play' item.song.song_id %}" class="pic" target="play"><img src="{% static "songImg/" %}{{ item.song.song_img }}" width="80" height="80"></a> </td> <td class="name-cell"> <h3><a href="{% url 'play' item.song.song_id %}" target="play" >{{item.song.song_name}}</a></h3> <div class="desc"> <a href="javascript:;" target="_blank" class="type" >{{item.song.song_singer}}</a> </div> </td> <td> <div style="text-align:center;">{{item.song.song_album}}</div> </td> <td> <div style="text-align:center;">{{item.dynamic_down}}</div> </td> <td class="num-cell">{{item.dynamic_plays}}</td> </tr> {% endfor %} </table>