使用Python Django框架做一个音乐网站，
本篇主要为歌单列表、歌单详情及推荐页-歌单内容改动。
目录
歌单列表
可通过导航>歌单或者推荐歌单中分类跳转到歌单列表。
设置路由
path('songsheet', views.songsheet, name='songsheet'),视图处理
设置接收三个参数：
分页，设置默认为1；
分类id，设置默认为精选歌单；
排序规则，最新1，最热2；
def songsheet(request):
""" 歌单列表 """
page = request.GET.get('page', 1)
cid = request.GET.get('cid', 1)
# 排序 1最新 2最热
sort = request.GET.get('sort', 1)
if sort == 1:
songsheets = SongSheet.objects.filter(category=cid).order_by('-addtime').all()
else:
songsheets = SongSheet.objects.filter(category=cid).order_by('playnum').all()
# 实例化Paginator
paginator = Paginator(songsheets, 20)
try:
res = paginator.page(page)
except PageNotAnInteger:
res = paginator.page(1)
except EmptyPage:
res = paginator.page(paginator.num_pages)
list_num = len(res)
cid = int(cid)
# 歌单类型列表
cates = SongCategory.categoryChoice
cate_all = SongCategory.objects.order_by('id').all()
return render(request, 'songsheet/index.html', locals())说明：
对cid进行数值处理，是为了模板中if判断选中使用。
歌单类型列表在模板中的渲染分为了两部分：
1.父级类型2.所属子集类型；本来想在视图中处理为一个列表，发现模板中无法渲染，
最后只能全部传给模板，在父循环中再套一个循环判断是否为相应子集进行渲染操作。
模板渲染
内容如下：
{% extends 'common/base.html' %}
{% load static %}
{% block title %}我的音乐-歌单{% endblock title %}
{% block content %}
<link rel="stylesheet" href="{% static 'css/song_sheet.css' %}">
<!--导航条开始-->
<div class="header">
<img src="{% static 'images/logo.png' %}" class="logo" alt="">
<ul>
<li><a href="{% url 'player:index' %}">推荐</a></li>
<li><a href="javascript:void(0)">排行榜</a></li>
<li><a href="{% url 'player:singer' 1 '#' %}">歌手</a></li>
<li><a href="javascript:void(0)" class="selected">歌单</a></li>
</ul>
</div>
<!--导航条结束-->
<!--歌单开始-->
<div class="song_sheet">
<div class="title flex_c">
<div class="name">推荐歌单 <i class="glyphicon glyphicon-menu-down" id="dian"></i></div>
<div>
{% if sort == '1' %}
<a href="{% url 'player:songsheet' %}?sort=1&cid={{cid}}" class="active">最新</a>
<a href="{% url 'player:songsheet' %}?sort=2&cid={{cid}}">最热</a>
{% else %}
<a href="{% url 'player:songsheet' %}?sort=1&cid={{cid}}">最新</a>
<a href="{% url 'player:songsheet' %}?sort=2&cid={{cid}}" class="active">最热</a>
{% endif %}
</div>
</div>
<div class="tags_out" style="display: none;">
<div class="tags">
<ul>
{% for item in cates %}
<li class="item_list">
<p class="tip flex_c">
<i class="glyphicon glyphicon-bookmark"></i>
<span class="span_item" data-id="{{item.0}}">{{item.1}}</span>
</p>
<ul class="flex_c list_tags">
{% for v in cate_all %}
{% if v.pid == item.0 %}
{% ifequal cid v.id %}
<li class="item active">
<span class="span_item" data-id="{{v.id}}">
<a href="{% url 'player:songsheet' %}?cid={{v.id}}">{{v.name}}</a>
</span>
</li>
{% else %}
<li class="item">
<span class="span_item" data-id="{{v.id}}">
<a href="{% url 'player:songsheet' %}?cid={{v.id}}">{{v.name}}</a>
</span>
</li>
{% endifequal %}
{% endif %}
{% endfor %}
</ul>
</li>
{% endfor %}
</ul>
</div>
</div>
<div class="list">
{% for son in res %}
<div class="item">
<div class="pic_out">
<div class="cover"><span class="play icon_play">
<i class="glyphicon glyphicon-play"></i></span>
</div>
<img alt="" src="/media/{{ son.cover }}" class="pic" data-src="/media/{{ son.cover }}" lazy="loaded">
</div>
<p class="name">
<span title="{{ son.name }}">
<a href="{% url 'player:songsheet_song' %}?id={{ son.id }}">{{ son.name }}</a>
</span>
</p>
<p class="count" style="display:;"><i class="glyphicon glyphicon-play"></i> {{ son.playnum }}</p>
</div>
{% endfor %}
</div>
{% if list_num < 1 %}
<!--设置无数据内容-->
<div class="nodata flex_c">
<div class="inner">
<img src="{% static 'images/nodata.png' %}"
alt="" class="nodata_img">
<div class="tip"><p>暂无相关数据</p></div>
</div>
</div>
{% endif %}
{% if list_num > 0 %}
<!--设置分页页码-->
<div class="page">
<i class="li-page glyphicon glyphicon-menu-left notPointer"></i>
<ul>
{% for index in res.paginator.page_range %}
{% if res.number == index %}
<li><a href="#" class="notCursor currentPage">{{index}}</a></li>
{% else %}
<li><a href="{% url 'player:songsheet' %}?page={{index}}&cid={{cid}}&sort={{sort}}">{{index}}</a></li>
{% endif %}
{% endfor %}
</ul>
<i class="glyphicon glyphicon-menu-right li-page"></i>
</div>
{% endif %}
</div>
<!--歌单结束-->
{% endblock content %}
{% block styleJs %}
{# 子页面引入js文件 #}
<script>
// 设置类型列表初始为隐藏状态
var tags_out = $('.tags_out');
// 失去焦点事件 隐藏类型列表
$('body').click(function(e){
var v = $(e.target);//获取当前点击事件的元素
var nowClass = v.attr('class');
console.log(nowClass)
var tans = ["span_item", "glyphicon glyphicon-menu-down", "tags_out", "item_list", "tip flex_c", "item", "item active", "flex_c list_tags"];
console.log(tans.indexOf(nowClass))
if(tans.indexOf(nowClass) < 0) {
$('#dian').removeClass('glyphicon-menu-up');
$('#dian').addClass('glyphicon-menu-down');
tags_out.hide();
} else {
$('#dian').removeClass('glyphicon-menu-down');
$('#dian').addClass('glyphicon-menu-up');
tags_out.show();
}
return true;
});
</script>
{% endblock styleJs %}说明：
最新、最热排序增加判断，选中效果并传递相应参数给视图，进行排序显示。
然后就是歌单类型渲染了，怎么渲染的及思路在视图处理时已做了说明，需要着重说的是，
这块费时不少：1.父子集合渲染；2.筛选条件判断选中；3.点击隐藏显示效果，需要点击相应元素打开列表，之后可以点打开元素关闭，也可以点空白处关闭。这部分功能，尝试了好几种方法，都不太理想，最后绑定body点击事件，给所点击元素做了个白名单，白名单内部的就打开歌单列表，否则就关闭。
效果：
歌单-单曲列表
也就是点击某个歌单后，跳转到歌单详情，展示歌单信息和所属歌单的单曲列表，有分页。
设置路由
path('songsheet/song', views.songsheet_song, name='songsheet_song'),视图处理
视图处理较为简单，查询歌单信息，通过歌单与单曲外键获取相应的单曲列表；
进行分页处理，最后返回模板。
内容如下：
def songsheet_song(request):
""" 歌单详情-单曲列表 """
id = request.GET.get('id', 1)
page = request.GET.get('page', 1)
# 查询歌单信息
info = SongSheet.objects.filter(id=id).first()
# 歌单单曲列表
song_list = info.singe.all()
# 歌单类型
categorys = info.category.values('name')
# 实例化Paginator
paginator = Paginator(song_list, 20)
try:
res = paginator.page(page)
except PageNotAnInteger:
res = paginator.page(1)
except EmptyPage:
res = paginator.page(paginator.num_pages)
list_num = len(res)
return render(request, 'songsheet/song.html', locals())
模板渲染
模板就更简单了，直接使用的专辑详情的页面模板，改一改部分内容显示，增加一个分页。
内容如下：
{% extends 'common/base.html' %}
{% load static %}
{% block title %}我的音乐-歌单{% endblock title %}
{% block content %}
<link rel="stylesheet" href="{% static 'css/album.css' %}">
<!--导航条开始-->
<div class="header">
<img src="{% static 'images/logo.png' %}" class="logo" alt="">
<ul>
<li><a href="{% url 'player:index' %}">推荐</a></li>
<li><a href="javascript:void(0)">排行榜</a></li>
<li><a href="{% url 'player:singer' 1 '#' %}">歌手</a></li>
<li><a href="javascript:void(0)" class="selected">歌单</a></li>
</ul>
</div>
<!--导航条结束-->
<!--歌单内容开始-->
<div class="main_con">
<div class="content">
<div class="info_l">
<div class="cover_out">
<img src="/media/{{info.cover}}" alt="" class="cover" data-src="info.cover" lazy="loaded">
<img src="{% static 'images/album_cover_record.png' %}" alt="" class="record">
</div>
<p class="intr">歌单简介 </p>
<p class="intr_txt">
{{info.desc}}...
</p>
<div><a href="javascript:;" class="download bg_primary">
<i class="glyphicon glyphicon-download-alt"></i> 下载该歌单</a>
</div>
</div>
<!--歌单单曲列表开始-->
<div class="info_r">
<div loading-text="正在加载中...">
<p class="song_name">{{info.name}}</p>
<p class="artist_name"><span>{{info.single.name}}</span></p>
<p class="song_info">
{% for c in categorys %}
<span>{{c.name}}</span>
{% endfor %}
</p>
<div class="btns">
<button class="play bg_primary">
<i class="glyphicon glyphicon-play"></i> <span>立即播放</span>
</button>
<button><i class="glyphicon glyphicon-plus"></i> <span>添加</span>
</button>
<button>
<i class="glyphicon glyphicon-heart"></i> <span>收藏</span>
</button>
</div>
<div>
<div class="list_head head_name_album">
<ul class="flex_c">
<li class="head_num">序号</li>
<li class="head_name">歌曲</li>
<li class="head_artist">歌手</li>
<li class="head_time">时长</li>
</ul>
</div>
<ul class="album_list">
{% for song in res %}
<li class="song_item flex_c">
<div class="song_rank flex_c">
<div class="rank_num"><span>{{forloop.counter}}</span></div>
</div>
<div class="song_name flex_c">
<a title="{{song.name}}" href="{% url 'player:album_song' %}?id={{info.id}}&sid={{song.id}}" class="name">{{song.name}}</a>
</div>
<div class="song_artist">
<span title="{{song.singler.name}}">{{song.singler.name}}</span>
</div>
<div class="song_time"><span>{{song.get_song_duration}}</span></div>
<div class="song_opts flex_c">
<i class="glyphicon glyphicon-plus"></i>
<i class="glyphicon glyphicon-play"></i>
<i class="glyphicon glyphicon-heart"></i>
</div>
</li>
{% endfor %}
</ul>
</div>
{% if info == False %}
<!--设置无数据内容-->
<div class="nodata flex_c">
<div class="inner">
<img src="{% static 'images/nodata.png' %}"
alt="" class="nodata_img">
<div class="tip"><p>暂无相关数据</p></div>
</div>
</div>
{% endif %}
{% if list_num > 0 %}
<!--设置分页页码-->
<div class="page">
<i class="li-page glyphicon glyphicon-menu-left notPointer"></i>
<ul>
{% for index in res.paginator.page_range %}
{% if res.number == index %}
<li><a href="#" class="notCursor currentPage">{{index}}</a></li>
{% else %}
<li><a href="{% url 'player:singer' index %}">{{index}}</a></li>
{% endif %}
{% endfor %}
</ul>
<i class="glyphicon glyphicon-menu-right li-page"></i>
</div>
{% endif %}
</div>
</div>
<!--歌单单曲列表结束-->
</div>
</div>
<!--歌单内容结束-->
{% endblock content %}
推荐页-歌单列表
因为歌单功能已做完，现在可以把推荐页面的推荐歌单列表跳转改活。
增加：更多跳转到所有歌单列表；分类跳转总歌单列表相应分类；
歌单列表点击封面和歌单名称跳转到相应详情。
模板渲染修改
templates/index/index.html中推荐歌单块内容修改。
内容如下：
<div class="recommend_song_sheet">
<div class="title">
<div class="name">推荐歌单</div>
<ul>
<li><a href="{% url 'player:songsheet' %}" class="now">每日推荐</a></li>
<li><a href="{% url 'player:songsheet' %}?cid=25">流行</a></li>
<li><a href="{% url 'player:songsheet' %}?cid=8">网络</a></li>
<li><a href="{% url 'player:songsheet' %}?cid=3">经典</a></li>
<li><a href="{% url 'player:songsheet' %}?cid=33">欧美</a></li>
<li><a href="{% url 'player:songsheet' %}">更多></a></li>
</ul>
</div>
<div class="list">
{% for son in songsheets %}
<dl {% if forloop.counter == 1 %} class="one" {% endif %}>
<dt>
<a href="{% url 'player:songsheet_song' %}?id={{son.id}}">
<img src="/media/{{ son.cover }}" alt="">
</a>
</dt>
<dd>
<p class="name">
<a href="{% url 'player:songsheet_song' %}?id={{song.id}}">{{ son.name }}</a>
</p>
<p class="count"><i class="glyphicon glyphicon-play"></i> {{ son.playnum }}</p>
</dd>
</dl>
{% endfor %}
</div>
</div>总结
做完歌单列表，再做歌单详情有种水到渠成的快速。
关联的搜索查询，复杂的数据处理及复杂数据在模板中的渲染和选中判断，有些难度。
其他的都是一些简单的内容。
1256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
