Django实现音乐网站 ⒂

"/media/{{info.portrait}}" alt="">

推荐歌手跳转详情

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

<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

效果如下：

基本信息增加内容渲染

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

内容如下：

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

歌手单曲列表

路由设置

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

path('singer/song//', views.singer_song, name='singer_song'),

跳转设置

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

class="">"{% url 'player:singer_song' info.id 1 %}">单曲

视图方法

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

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

模板内容

模板公共头信息

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

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

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

内容如下：

{% load static %}
class="header">
    "{% static 'images/logo.png' %}" class="logo" alt="">
    
        
"{% url 'player:index' %}">推荐
        
"javascript:void(0)" class="selected">歌手
        
"javascript:void(0)">单曲
        
"javascript:void(0)">歌单
    
 
class="singer">
    
class="singer_bg">
    
class="singer_info flex_c">
        
class="singer_cover">
            "/media/{{info.portrait}}" alt="">
        
        
class="info">
            
class="flex_c">class="name">{{info.name}}
            
class="info_items">
                单曲：class="num">{{info.singe_num}}
                专辑：class="num">{{info.album_num}}
                粉丝：class="num">100W
            
            
class="singer_items flex_c">
                
                    生日：{{info.birthday}}
                    身高：{{info.height}}cm
                    体重：{{info.weight}}kg
                    星座：{{info.constellation}}...
                
                class="all">"{% url 'player:singer_detail' info.id %}">全部 > 
            
            
class="btns">
                class="play">class="glyphicon glyphicon-play">  播放全部歌曲
                class="glyphicon glyphicon-heart">  收藏
            
        
    

单曲列表页面内容

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

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

固定页面。

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

内容如下：

{% extends 'common/base.html' %}
{% load static %}
 
{% block title %}我的音乐-歌手{% endblock title %}
 
{% block content %}
"stylesheet" href="{% static 'css/singer_song.css' %}">
 
{% include 'singer/common.html' %}
 
class="main_con">
    
class="con_l">
        
class="tabs flex_c">
            
                class="active">单曲
                class="">"javascript:void(0)">专辑
                class="">"{% url 'player:singer_detail' 1 %}">简介
            
        
        
class="child_view">
            
class="list_head head_name_singer">
                
class="flex_c">
                    
class="head_num">序号
                    
class="head_name">歌曲
                    
class="head_album">歌手
                    
class="head_time">时长
                
            
            
class="singer_list">
                {% for song in songList %}
                {% if forloop.counter == 1%}
                    
class="song_item current flex_c">
                {% else %}
                    
class="song_item flex_c">
                {% endif %}
                        
class="song_rank flex_c">
                            
class="rank_num">
                                {{forloop.counter}}
                            
                            "" class="cover"
                                 data-src="{% static 'images/re_3.jpg' %}"
                                 src="{% static 'images/re_3.jpg' %}" lazy="loaded">
                        
                        
class="song_name flex_c">
                            "{{song.name}}" href="/play_detail/288010178" class="name">{{song.name}}
                        
                        
class="song_album">
                            "{{song.singler.name}}">{{song.singler.name}}
                        
                        
class="song_time">
                            {{song.get_song_duration}}
                        
                        
class="song_opts flex_c">
                            class="glyphicon glyphicon-plus">
                            class="glyphicon glyphicon-play">
                            class="glyphicon glyphicon-heart">
                        
                    
                {% endfor %}
            
 
            {% if list_num < 1 %}
            
            
class="nodata flex_c">
                
class="inner">
                    "{% static 'images/nodata.png' %}"
                         alt="" class="nodata_img">
                    
class="tip">
暂无相关数据
                
            
            {% endif %}
 
            {% if list_num > 1 %}
            
class="page">
                class="li-page glyphicon glyphicon-menu-left notPointer">
                
                    {% for index in songList.paginator.page_range %}
                        {% if songList.number == index %}
                            
"#" class="notCursor currentPage">{{index}}
                        {% else %}
                            
"{% url 'player:singer' index %}">{{index}}
                        {% endif %}
                    {% endfor %}
                
                class="glyphicon glyphicon-menu-right li-page">
            
            {% endif %}
        
    
{% endblock content %}

计算歌曲时长

表模型增加方法

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

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

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

具体如下：

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

模板中使用表模型方法

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

内容如下：

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

总结

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

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

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