如何用服务器搭建自己的网站,aje网站润色,浏览器网页版在线使用,国内外优秀室内设计案例使用Python Django框架制作一个音乐网站#xff0c; 本篇主要是歌手详情页-专辑列表、专辑详情-单曲列表开发实现内容。 目录
歌手详情-专辑列表
路由设置
跳转设置
视图方法
模板内容
专辑详情-单曲列表
设置路由
视图处理并返回
模板渲染
分页优化
引入错误类型库… 使用Python Django框架制作一个音乐网站 本篇主要是歌手详情页-专辑列表、专辑详情-单曲列表开发实现内容。 目录
歌手详情-专辑列表
路由设置
跳转设置
视图方法
模板内容
专辑详情-单曲列表
设置路由
视图处理并返回
模板渲染
分页优化
引入错误类型库
分页实例
总结 歌手详情-专辑列表
通过歌手名称进入歌手详情再点击专辑可查看歌手拥有专辑列表。 路由设置
需要设置参数歌手id、分页page。
path(singer/album/int:id/int:page, views.singer_album, namesinger_album), 跳转设置
在歌手详情中专辑切换设置跳转链接。
span classa href{% url player:singer_album info.id 1 %}专辑/a/span 视图方法
查询歌手信息通过歌手外键id查询歌手所拥有的专辑列表之后进行分页。
def singer_album(request, id, page): 歌手详情-专辑列表 # 歌手基本信息info Singler.objects.get(pkid)# 专辑列表album_list Album.objects.filter(singler_idid).all()# 实例化Paginatorpaginator Paginator(album_list, 20)# 获取当前页码数据res paginator.page(page)return render(request, singer/album_list.html, {info: info,albumList: res,list_num: len(album_list)}) 模板内容
通过两个for循环渲染专辑列表和分页列表if判断后显示无数据内容。
{% extends common/base.html %}
{% load static %}{% block title %}我的音乐-歌手{% endblock title %}{% block content %}
link relstylesheet href{% static css/singer_album.css %}!--歌手头部公共信息--
{% include singer/common.html %}!--歌手资料开始--
div classmain_condiv classcon_lul classtabs flex_clispan classa href{% url player:singer_song info.id 1 %}单曲/a/spanspan classactive专辑/spanspan classa href{% url player:singer_detail 1 %}简介/a/span/li/uldiv classchild_viewdiv classalbums{% for album in albumList %}div classalbum_itemdiv classcover_outdiv classcover_playspan classplay icon_playi classglyphicon glyphicon-play/i/span/divdiv classimg_outimg alt classcover pic src/media/{{album.cover}} lazyloaded/divimg src{% static images/album_record.png %} alt classrecord/divp classnamespan title{{album.name}} a href{% url player:album album.id %}{{album.name}}/a/span/pp classtime{{album.addtime}}/p/div{% endfor %}/div{% 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 albumList.paginator.page_range %}{% if albumList.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 %} 专辑详情-单曲列表
通过歌手详情-专辑列表跳转到专辑详情-单曲列表。 设置路由
专辑详情没有分页只需要设置专辑id参数即可。
path(album/int:id, views.album, namealbum), 视图处理并返回
这里就有些复杂虽然代码比较少还是有些技术含量的。
专辑表和单曲表是多对多的关系查询时需要prefetch_related进行关联对应表模型。
def album(request, id): 专辑详情-单曲列表 # 查询专辑信息# 通过 prefetch_related 关联对应表模型 进行多对多的关联查询info Album.objects.prefetch_related(Singe).filter(idid).first()# 专辑单曲列表song_list info.Singe.all()return render(request, album/index.html, {info: info,songList: song_list}) 模板渲染
模板渲染与歌手-单曲列表模板处理差不多只需要注意歌手名称的显示和单曲时长显示。
内容如下
{% extends common/base.html %}
{% load static %}{% block title %}我的音乐-歌手{% endblock title %}{% block content %}
link relstylesheet href{% static css/album.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 hrefjavascript:void(0)单曲/a/lilia hrefjavascript:void(0)歌单/a/li/ul
/div
!--导航条结束--!--专辑内容开始--
div classmain_condiv classcontentdiv classinfo_ldiv classcover_outimg src/media/{{info.cover}} alt classcover data-srcinfo.cover lazyloadedimg src{% static images/album_cover_record.png %} alt classrecord/divp classintr专辑简介 /pp classintr_txt{{info.desc}}.../pdiva hrefjavascript:; classdownload bg_primaryi classglyphicon glyphicon-download-alt/inbsp;下载该专辑/a/div/div!--专辑单曲列表开始--div classinfo_rdiv loading-text正在加载中...p classsong_name{{info.name}}/pp classartist_namespan{{info.single.name}}/span/pp classsong_infospan语种/spanspan classtip{{info.single_lang}}/spanspan发行时间{{info.addtime}}/span/pdiv classbtnsbutton classplay bg_primaryi classglyphicon glyphicon-play/inbsp;span立即播放/span/buttonbuttoni classglyphicon glyphicon-plus/inbsp;span添加/span/buttonbuttoni classglyphicon glyphicon-heart/inbsp;span收藏/span/button/divdivdiv classlist_head head_name_albumul classflex_cli classhead_num序号/lili classhead_name歌曲/lili classhead_artist歌手/lili classhead_time时长/li/ul/divul classalbum_list{% for song in songList %}li classsong_item flex_cdiv classsong_rank flex_cdiv classrank_numspan{{forloop.counter}}/span/div/divdiv classsong_name flex_ca title{{song.name}} href/play_detail/226555042 classname{{song.name}}/a/divdiv classsong_artistspan 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/div{% if info False %}!--设置无数据内容--div classnodata flex_cdiv classinnerimg src{% static images/nodata.png %}alt classnodata_imgdiv classtipp暂无相关数据/p/div/div/div{% endif %}/div/div!--专辑单曲列表结束--/div
/div
!--专辑内容结束--
{% endblock content %} 分页优化
分页原来的处理比较简单只是实现分页功能没有处理分页范围。
这次在原来的基础上对超出总页数和页数为空情况进行处理。 引入错误类型库
from django.core.paginator import EmptyPage, PageNotAnInteger 分页实例
在try...except判断中处理分页判断并进行处理
通过使用locals函数对传递模板的参数进行优化不需要再单独赋值。
内容如下
def singer_album(request, id, page): 歌手详情-专辑列表 # 歌手基本信息info Singler.objects.get(pkid)# 专辑列表albumList Album.objects.filter(singler_idid).order_by(-id).all()# 实例化Paginatorpaginator Paginator(albumList, 20)try:res paginator.page(page)except PageNotAnInteger:res paginator.page(1)except EmptyPage:res paginator.page(paginator.num_pages)return render(request, singer/album_list.html, locals()) 总结
本篇主要实现歌手详情中的专辑列表和专辑详情中单曲列表
综合使用了分页、外键查询、连表查询、模板中的循环、判断标签及对分页进行优化。
