查看邮箱注册的网站,电子商务网站建设如何策划与实施,wordpress使用阿里云oss存储,网页设计尺寸高度使用Python Django框架制作一个音乐网站#xff0c; 本篇主要是歌手详情页-基本信息、单曲列表功能开发实现内容。 目录
歌手基本信息
增加路由
显示视图
模板显示
推荐歌手跳转详情
歌手增加基本信息
表模型增加字段
数据表更新
基本信息增加内容渲染
歌手单曲列表… 使用Python Django框架制作一个音乐网站 本篇主要是歌手详情页-基本信息、单曲列表功能开发实现内容。 目录
歌手基本信息
增加路由
显示视图
模板显示
推荐歌手跳转详情
歌手增加基本信息
表模型增加字段
数据表更新
基本信息增加内容渲染
歌手单曲列表
路由设置
跳转设置
视图方法
模板内容
模板公共头信息
单曲列表页面内容
计算歌曲时长
表模型增加方法
模板中使用表模型方法
总结 歌手基本信息
增加路由
需要设置参数歌手id。
path(singer/detail/int:id, views.singer_detail, namesinger_detail), 显示视图
查询歌手表模型通过id查询响应歌手信息。
def singer_detail(request, id): 歌手详情-基本信息 info Singler.objects.get(pkid)return render(request, singer/detail.html, {info: info}) 模板显示
设置样式和在模板基础上改为视图中传递的歌手信息。
{% extends common/base.html %}
{% load static %}{% block title %}我的音乐-歌手{% endblock title %}{% block content %}
link relstylesheet href{% static css/singer_detail.css %}!--导航条开始--
div classheaderimg src{% static images/logo.png %} classlogo altullia href{% url player:index %}推荐/a/lilia hrefjavascript:void(0)排行榜/a/lilia hrefjavascript:void(0) classselected歌手/a/lilia href{% url player:singer %}单曲/a/lilia hrefjavascript:void(0)歌单/a/li/ul
/div
!--导航条结束--!--歌手预告开始--
div classsingerdiv classsinger_bg/divdiv classsinger_info flex_cdiv classsinger_coverimg src/media/{{info.portrait}} alt/divdiv classinfop classflex_cspan classname{{info.name}}/span/pdiv classinfo_itemsspan单曲span classnum{{info.singe_num}}/span/spanspan专辑span classnum{{info.album_num}}/span/spanspan粉丝span classnum100W/span/span/divdiv classsinger_items flex_cpspan生日span{{info.birthday}}/span/spanspan身高span{{info.height}}cm/span/spanspan体重span{{info.weight}}kg/span/spanspan星座span{{info.constellation}}.../span/span/pspan classalla href{% url player:singer_detail info.id %}全部/a /span/divdiv classbtnsbutton classplayi classglyphicon glyphicon-play/inbsp;nbsp;播放全部歌曲/buttonbuttoni classglyphicon glyphicon-heart/inbsp;nbsp;收藏/button/div/div/div
/div
!--歌手预告结束--!--歌手资料开始--
div classmain_condiv classcon_lul classtabs flex_clispan classa href{% url player:singer_song 1 %}单曲/a/spanspan classa href{% url player:singer_album 1 %}专辑/a/spanspan classactive简介/span/li/uldiv classchild_viewp classtit基本信息/pdiv classlist_infodiv classinfo_list flex_cdiv classitem_lspan姓名span classtext{{info.name}}/span/span/divnbsp;div classitem_rspan英文名span classtext-/span/span/div/divdiv classinfo_list flex_cdiv classitem_lspan性别span classtext男/span/span/divnbsp;div classitem_rspan国籍span classtext中国香港/span/span/div/divdiv classinfo_list flex_cdiv classitem_lspan生日span classtext{{info.birthday}}/span/span/divnbsp;div classitem_rspan星座span classtext{{info.constellation}}/span/span/div/divdiv classinfo_list flex_cdiv classitem_lspan身高span classtext{{info.height}}cm/span/span/divnbsp;div classitem_rspan体重span classtext{{info.weight}}kg/span/span/div/div/divp classtit个人简介/pp classinfo{{info.desc|safe}}/p/div/div
/div
!--歌手资料结束--
{% endblock content %} 推荐歌手跳转详情
在推荐页中推荐歌手增加跳转到歌手详情-基本信息页面的链接设置。
div classitemdiv classcoverimg src/media/{{sg.portrait}} alt/divp classnamea href{% url player:singer_detail sg.id %}
{{sg.name}}/a/pp classnum{{sg.singe_num}}首歌曲/p
/div 歌手增加基本信息
表模型增加字段
player/models.py中歌手表模型增加英文名、国籍、性别字段。
内容如下
english_name models.CharField(英文名,max_length50,help_text请输入歌手英文名,default-
)
gender models.IntegerField(性别,help_text请选择歌手性别,choices((0, 女), (1, 男)),default1
)
country_name models.CharField(国籍,max_length50,help_text请输入歌手国籍,default-
) 数据表更新 同样还要创建表迁移文件然后执行更新表结构。
python manage.py makemigrations
python manage.py migrate 效果如下 基本信息增加内容渲染
表字段增加以后对原来的歌手信息进行补录最后对新增的信息进行模板渲染。
内容如下
div classchild_viewp classtit基本信息/pdiv classlist_infodiv classinfo_list flex_cdiv classitem_lspan姓名span classtext{{info.name}}/span/span/divnbsp;div classitem_rspan英文名span classtext{{info.english_name}}/span/span/div/divdiv classinfo_list flex_cdiv classitem_lspan性别span classtext{% if info.gender %}男{% else %}女{% endif %}/span/span/divnbsp;div classitem_rspan国籍span classtext{{info.country_name}}/span/span/div/div 歌手单曲列表
路由设置
需要设置参数歌手id、分页page。
path(singer/song/int:id/int:page, views.singer_song, namesinger_song), 跳转设置
在歌手详情中单曲切换设置跳转链接。
span classa href{% url player:singer_song info.id 1 %}单曲/a/span 视图方法
还是先获取全部列表然后传给分页组件得到分页条数。
def singer_song(request, id, page): 歌手详情-单曲列表 # 歌手基本信息info Singler.objects.get(pkid)# 单曲列表song_list Singe.objects.filter(singler_idid).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 classheaderimg src{% static images/logo.png %} classlogo altullia href{% url player:index %}推荐/a/lilia hrefjavascript:void(0) classselected歌手/a/lilia hrefjavascript:void(0)单曲/a/lilia hrefjavascript:void(0)歌单/a/li/ul
/div
!--导航条结束--!--歌手预告开始--
div classsingerdiv classsinger_bg/divdiv classsinger_info flex_cdiv classsinger_coverimg src/media/{{info.portrait}} alt/divdiv classinfop classflex_cspan classname{{info.name}}/span/pdiv classinfo_itemsspan单曲span classnum{{info.singe_num}}/span/spanspan专辑span classnum{{info.album_num}}/span/spanspan粉丝span classnum100W/span/span/divdiv classsinger_items flex_cpspan生日span{{info.birthday}}/span/spanspan身高span{{info.height}}cm/span/spanspan体重span{{info.weight}}kg/span/spanspan星座span{{info.constellation}}.../span/span/pspan classalla href{% url player:singer_detail info.id %}全部/a /span/divdiv classbtnsbutton classplayi classglyphicon glyphicon-play/inbsp;nbsp;播放全部歌曲/buttonbuttoni classglyphicon glyphicon-heart/inbsp;nbsp;收藏/button/div/div/div
/div
!--歌手预告结束-- 单曲列表页面内容
单曲列表页面把原来的模板内容公共部分去掉通过include引入进来。
接着就是for循环把单曲列表渲染出来然后做一个分页列表最后判断无数据显示
固定页面。 注意需要把歌手基本信息页面也改为引入公共信息处理。
内容如下
{% extends common/base.html %}
{% load static %}{% block title %}我的音乐-歌手{% endblock title %}{% block content %}
link relstylesheet href{% static css/singer_song.css %}!--歌手头部公共信息--
{% include singer/common.html %}!--歌手资料开始--
div classmain_condiv classcon_lul classtabs flex_clispan classactive单曲/spanspan classa hrefjavascript:void(0)专辑/a/spanspan classa href{% url player:singer_detail 1 %}简介/a/span/li/uldiv classchild_viewdiv classlist_head head_name_singerul classflex_cli classhead_num序号/lili classhead_name歌曲/lili classhead_album歌手/lili classhead_time时长/li/ul/divul classsinger_list{% for song in songList %}{% if forloop.counter 1%}li classsong_item current flex_c{% else %}li classsong_item flex_c{% endif %}div classsong_rank flex_cdiv classrank_numspan{{forloop.counter}}/span/divimg alt classcoverdata-src{% static images/re_3.jpg %}src{% static images/re_3.jpg %} lazyloaded/divdiv classsong_name flex_ca title{{song.name}} href/play_detail/288010178 classname{{song.name}}/a/divdiv classsong_albumspan title{{song.singler.name}}{{song.singler.name}}/span/divdiv classsong_timespan{{song.get_song_duration}}/span/divdiv classsong_opts flex_ci classglyphicon glyphicon-plus/ii classglyphicon glyphicon-play/ii classglyphicon glyphicon-heart/i/div/li{% endfor %}/ul{% if list_num 1 %}!--设置无数据内容--div classnodata flex_cdiv classinnerimg src{% static images/nodata.png %}alt classnodata_imgdiv classtipp暂无相关数据/p/div/div/div{% endif %}{% if list_num 1 %}div classpagei classli-page glyphicon glyphicon-menu-left notPointer/iul{% for index in songList.paginator.page_range %}{% if songList.number index %}lia href# classnotCursor currentPage{{index}}/a/li{% else %}lia href{% url player:singer index %}{{index}}/a/li{% endif %}{% endfor %}/uli classglyphicon 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框架还是感觉数据操作这块很麻烦。
