Django实现音乐网站 ⒂

使用Python Django框架制作一个音乐网站，

本篇主要是歌手详情页-基本信息、单曲列表功能开发实现内容。

目录

歌手基本信息

增加路由

显示视图

模板显示

推荐歌手跳转详情

歌手增加基本信息

表模型增加字段

数据表更新

基本信息增加内容渲染

歌手单曲列表

路由设置

跳转设置

视图方法

模板内容

模板公共头信息

单曲列表页面内容

计算歌曲时长

表模型增加方法

模板中使用表模型方法

总结

---

歌手基本信息

增加路由

需要设置参数歌手id。

path('singer/detail/<int:id>', views.singer_detail, name='singer_detail'),

显示视图

查询歌手表模型，通过id查询响应歌手信息。

def singer_detail(request, id):""" 歌手详情-基本信息 """info = Singler.objects.get(pk=id)return render(request, 'singer/detail.html', {'info': info})

模板显示

设置样式和在模板基础上改为视图中传递的歌手信息。

{% extends 'common/base.html' %}
{% load static %}{% block title %}我的音乐-歌手{% endblock title %}{% block content %}
<link rel="stylesheet" href="{% static 'css/singer_detail.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="javascript:void(0)" class="selected">歌手</a></li><li><a href="{% url 'player:singer' %}">单曲</a></li><li><a href="javascript:void(0)">歌单</a></li></ul>
</div>
<!--导航条结束--><!--歌手预告开始-->
<div class="singer"><div class="singer_bg"></div><div class="singer_info flex_c"><div class="singer_cover"><img src="/media/{{info.portrait}}" alt=""></div><div class="info"><p class="flex_c"><span class="name">{{info.name}}</span></p><div class="info_items"><span>单曲：<span class="num">{{info.singe_num}}</span></span><span>专辑：<span class="num">{{info.album_num}}</span></span><span>粉丝：<span class="num">100W</span></span></div><div class="singer_items flex_c"><p><span>生日：<span>{{info.birthday}}</span></span><span>身高：<span>{{info.height}}cm</span></span><span>体重：<span>{{info.weight}}kg</span></span><span>星座：<span>{{info.constellation}}...</span></span></p><span class="all"><a href="{% url 'player:singer_detail' info.id %}">全部</a> > </span></div><div class="btns"><button class="play"><i class="glyphicon glyphicon-play"></i>&nbsp;&nbsp;播放全部歌曲</button><button><i class="glyphicon glyphicon-heart"></i>&nbsp;&nbsp;收藏</button></div></div></div>
</div>
<!--歌手预告结束--><!--歌手资料开始-->
<div class="main_con"><div class="con_l"><ul class="tabs flex_c"><li><span class=""><a href="{% url 'player:singer_song' 1 %}">单曲</a></span><span class=""><a href="{% url 'player:singer_album' 1 %}">专辑</a></span><span class="active">简介</span></li></ul><div class="child_view"><p class="tit">基本信息</p><div class="list_info"><div class="info_list flex_c"><div class="item_l"><span>姓名：<span class="text">{{info.name}}</span></span></div>&nbsp;<div class="item_r"><span>英文名：<span class="text">-</span></span></div></div><div class="info_list flex_c"><div class="item_l"><span>性别：<span class="text">男</span></span></div>&nbsp;<div class="item_r"><span>国籍：<span class="text">中国香港</span></span></div></div><div class="info_list flex_c"><div class="item_l"><span>生日：<span class="text">{{info.birthday}}</span></span></div>&nbsp;<div class="item_r"><span>星座：<span class="text">{{info.constellation}}</span></span></div></div><div class="info_list flex_c"><div class="item_l"><span>身高：<span class="text">{{info.height}}cm</span></span></div>&nbsp;<div class="item_r"><span>体重：<span class="text">{{info.weight}}kg</span></span></div></div></div><p class="tit">个人简介</p><p class="info">{{info.desc|safe}}</p></div></div>
</div>
<!--歌手资料结束-->
{% endblock content %}

 

推荐歌手跳转详情

在推荐页中推荐歌手增加跳转到歌手详情-基本信息页面的链接设置。

<div class="item"><div class="cover"><img src="/media/{{sg.portrait}}" alt=""></div><p class="name"><a href="{% url 'player:singer_detail' sg.id %}">
{{sg.name}}</a></p><p class="num">{{sg.singe_num}}首歌曲</p>
</div>

 

歌手增加基本信息

表模型增加字段

player/models.py中歌手表模型增加英文名、国籍、性别字段。

内容如下：

english_name = models.CharField('英文名',max_length=50,help_text='请输入歌手英文名',default='-'
)
gender = models.IntegerField('性别',help_text='请选择歌手性别',choices=((0, '女'), (1, '男')),default=1
)
country_name = models.CharField('国籍',max_length=50,help_text='请输入歌手国籍',default='-'
)

数据表更新

 同样还要创建表迁移文件，然后执行更新表结构。

python manage.py makemigrations
python manage.py migrate

效果如下：

 

基本信息增加内容渲染

表字段增加以后，对原来的歌手信息进行补录，最后对新增的信息进行模板渲染。

内容如下：

<div class="child_view"><p class="tit">基本信息</p><div class="list_info"><div class="info_list flex_c"><div class="item_l"><span>姓名：<span class="text">{{info.name}}</span></span></div>&nbsp;<div class="item_r"><span>英文名：<span class="text">{{info.english_name}}</span></span></div></div><div class="info_list flex_c"><div class="item_l"><span>性别：<span class="text">{% if info.gender %}男{% else %}女{% endif %}</span></span></div>&nbsp;<div class="item_r"><span>国籍：<span class="text">{{info.country_name}}</span></span></div></div>

歌手单曲列表

路由设置

需要设置参数歌手id、分页page。

path('singer/song/<int:id>/<int:page>', views.singer_song, name='singer_song'),

跳转设置

在歌手详情中单曲切换设置跳转链接。

<span class=""><a href="{% url 'player:singer_song' info.id 1 %}">单曲</a></span>

视图方法

还是先获取全部列表，然后传给分页组件得到分页条数。

def singer_song(request, id, page):""" 歌手详情-单曲列表 """# 歌手基本信息info = Singler.objects.get(pk=id)# 单曲列表song_list = Singe.objects.filter(singler_id=id).all()# 实例化Paginatorpaginator = Paginator(song_list, 20)# 获取当前页码数据res = paginator.page(page)return render(request, 'singer/song_list.html', {'info': info, 'songList': res})

模板内容

模板公共头信息

抽离出与歌手基本信息中相同的头部信息，

在singler文件夹中创建common.html文件，

做一个歌手公共头部内容页面。

内容如下：

{% load static %}
<!--导航条开始-->
<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)" class="selected">歌手</a></li><li><a href="javascript:void(0)">单曲</a></li><li><a href="javascript:void(0)">歌单</a></li></ul>
</div>
<!--导航条结束--><!--歌手预告开始-->
<div class="singer"><div class="singer_bg"></div><div class="singer_info flex_c"><div class="singer_cover"><img src="/media/{{info.portrait}}" alt=""></div><div class="info"><p class="flex_c"><span class="name">{{info.name}}</span></p><div class="info_items"><span>单曲：<span class="num">{{info.singe_num}}</span></span><span>专辑：<span class="num">{{info.album_num}}</span></span><span>粉丝：<span class="num">100W</span></span></div><div class="singer_items flex_c"><p><span>生日：<span>{{info.birthday}}</span></span><span>身高：<span>{{info.height}}cm</span></span><span>体重：<span>{{info.weight}}kg</span></span><span>星座：<span>{{info.constellation}}...</span></span></p><span class="all"><a href="{% url 'player:singer_detail' info.id %}">全部</a> > </span></div><div class="btns"><button class="play"><i class="glyphicon glyphicon-play"></i>&nbsp;&nbsp;播放全部歌曲</button><button><i class="glyphicon glyphicon-heart"></i>&nbsp;&nbsp;收藏</button></div></div></div>
</div>
<!--歌手预告结束-->

单曲列表页面内容

单曲列表页面把原来的模板内容公共部分去掉，通过include引入进来。

接着就是for循环把单曲列表渲染出来；然后做一个分页列表，最后判断无数据显示

固定页面。

注意：需要把歌手基本信息页面也改为引入公共信息处理。

内容如下：

{% extends 'common/base.html' %}
{% load static %}{% block title %}我的音乐-歌手{% endblock title %}{% block content %}
<link rel="stylesheet" href="{% static 'css/singer_song.css' %}"><!--歌手头部公共信息-->
{% include 'singer/common.html' %}<!--歌手资料开始-->
<div class="main_con"><div class="con_l"><ul class="tabs flex_c"><li><span class="active">单曲</span><span class=""><a href="javascript:void(0)">专辑</a></span><span class=""><a href="{% url 'player:singer_detail' 1 %}">简介</a></span></li></ul><div class="child_view"><div class="list_head head_name_singer"><ul class="flex_c"><li class="head_num">序号</li><li class="head_name">歌曲</li><li class="head_album">歌手</li><li class="head_time">时长</li></ul></div><ul class="singer_list">{% for song in songList %}{% if forloop.counter == 1%}<li class="song_item current flex_c">{% else %}<li class="song_item flex_c">{% endif %}<div class="song_rank flex_c"><div class="rank_num"><span>{{forloop.counter}}</span></div><img alt="" class="cover"data-src="{% static 'images/re_3.jpg' %}"src="{% static 'images/re_3.jpg' %}" lazy="loaded"></div><div class="song_name flex_c"><a title="{{song.name}}" href="/play_detail/288010178" class="name">{{song.name}}</a></div><div class="song_album"><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>{% 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 > 1 %}<div class="page"><i class="li-page glyphicon glyphicon-menu-left notPointer"></i><ul>{% for index in songList.paginator.page_range %}{% if songList.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>
<!--歌手资料结束-->
{% endblock content %}

计算歌曲时长

表模型增加方法

单曲列表需要显示歌曲时长，但是数据库存储的是秒数，需要转化为分:秒格式。

而查询出来的查询集是一个对象格式的直接添加属性，下一步还是取不到。

解决方法：需要在表模型类中新增一个方法，去处理转换时长格式。

具体如下：

def get_song_duration(self):""" 计算歌曲时长 格式 00:00 """secs = self.duration % 60if secs:mins = (self.duration - secs) / 60else:mins = self.duration - secs / 60return str(int(mins)) + ':' + str(secs)

 

模板中使用表模型方法

直接通过循环出的对象调用模型方法，需要注意不带小括号。

内容如下：

{% for song in songList %}{{song.get_song_duration}}
{% endfor %}

总结

基本信息这块没什么难度，使用主键直接查询返回给模板渲染即可；

单曲列表分页还是使用Paginator来做，就时长有点小纠结，

没用过别的python框架，还是感觉数据操作这块很麻烦。