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框架，还是感觉数据操作这块很麻烦。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/92260.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

three.js(三)：three.js的渲染结构

three.js(三)：three.js的渲染结构

three.js 的渲染结构 概述 three.js 封装了场景、灯光、阴影、材质、纹理和三维算法&#xff0c;不必在直接用WebGL 开发项目&#xff0c;但有的时候会间接用到WebGL&#xff0c;比如自定义着色器。three.js 在渲染三维场景时&#xff0c;需要创建很多对象&#xff0c;并将它…
阅读更多...
详细教程-Chatbot具体需要如何搭建

详细教程-Chatbot具体需要如何搭建

最近建设企业专属的帮助中心或者博客是很流行的趋势&#xff0c;尤其是在AI功能的介入下&#xff0c;可以帮到企业和用户进行更自助的操作。但是很多企业会遇到以下问题&#xff1a;我们已经有了一个原有的知识库了&#xff0c;再建设一个新的需要把数据迁移。这个操作很麻烦和…
阅读更多...
《Linux从练气到飞升》No.19 进程等待

《Linux从练气到飞升》No.19 进程等待

&#x1f57a;作者&#xff1a; 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux菜鸟刷题集 &#x1f618;欢迎关注&#xff1a;&#x1f44d;点赞&#x1f64c;收藏✍️留言 &#x1f3c7;码字不易&#xff0c;你的&#x1f44d;点赞&#x1f64c;收藏❤️关注对我真的…
阅读更多...
Matlab图像处理-灰度插值法

Matlab图像处理-灰度插值法

最近邻法 最近邻法是一种最简单的插值算法&#xff0c;输出像素的值为输入图像中与其最邻近的采样点的像素值。是将(u0,v0)(u_0,v_0)点最近的整数坐标u,v(u,v)点的灰度值取为(u0,v0)(u_0,v_0)点的灰度值。 在(u0,v0)(u_0,v_0)点各相邻像素间灰度变化较小时&#xff0c;这种方…
阅读更多...
Vue/React 项目部署到服务器后，刷新页面出现404报错

Vue/React 项目部署到服务器后，刷新页面出现404报错

问题描述&#xff1a;在本地启动项目一切正常&#xff0c;部署到服务器上线后出现BUG&#xff0c;项目刷新页面出现404。 起初以为是自己路由守卫或是token丢失问题&#xff0c;找了一圈终于解决了 产生原因&#xff1a;我们打开vue/react打包后生成的dist文件夹&#xff0c;可…
阅读更多...
day27 String类 正则表达式

day27 String类 正则表达式

String类的getBytes方法 String s "腻害"; byte[] bytes s.getBytes(StandardCharsets.UTF_8); String类的new String方法 String ss "ss我的"; byte[] gbks ss.getBytes("gbk"); String gbk new String(gbks, "gbk"); String类的…
阅读更多...
jmeter源码二次开发

jmeter源码二次开发

本文以jmeter5.5为例&#xff0c;扩展“TCP Socket支持定长的返回字节流”功能。 一、 源码本地编译运行 1、在jmeter官网下载源码&#xff1a;jmeter各版本源码地址 2、在idea中用gradle导入jmeter源码&#xff0c;idea中要配置jdk&#xff0c;gradle&#xff0c;我用的是j…
阅读更多...
Leetcode213 打劫家舍2

Leetcode213 打劫家舍2

思路&#xff1a;既然头尾不能同时取&#xff0c;那就分别算只取头或者只取尾&#xff0c;不考虑特殊情况的话是一个简单的动态规划 class Solution:def rob(self, nums: list[int]) -> int:if len(nums) < 3:return max(nums)max_sum [nums[0], max(nums[1], nums[0])…
阅读更多...
NoSQL基础

NoSQL基础

零、文章目录 NoSQL基础 1、为什么要用NoSQL &#xff08;1&#xff09;单机单数据库时代 网络不发达的时代&#xff0c;一个系统由一台机器&#xff0c;一个数据库来实现&#xff0c;只要流量上来&#xff0c;首先性能瓶颈就是数据库IO。 &#xff08;2&#xff09;Cache数…
阅读更多...
掌握逻辑漏洞复现技术，保护您的数字环境

掌握逻辑漏洞复现技术，保护您的数字环境

环境准备 这篇文章旨在用于网络安全学习&#xff0c;请勿进行任何非法行为&#xff0c;否则后果自负。 1、支付逻辑漏洞 攻击相关介绍 介绍&#xff1a; 支付逻辑漏洞是指攻击者利用支付系统的漏洞&#xff0c;突破系统的限制&#xff0c;完成非法的支付操作。攻击者可以采…
阅读更多...
Docker部署RustDesk Server 设置开机自启

Docker部署RustDesk Server 设置开机自启

三、Docker安装 Docker官方和国内daocloud都提供了一键安装的脚本&#xff0c;使得Docker的安装更加便捷。 官方的一键安装方式&#xff1a; curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun 国内 daocloud一键安装命令&#xff1a; curl -sSL https://…
阅读更多...
Unity 之 参数类型之值类型参数的用法

Unity 之 参数类型之值类型参数的用法

文章目录 基本数据类型结构体结构体的进一步补充 总结&#xff1a; 当谈论值类型参数时&#xff0c;我们可以从基本数据类型和结构体两个方面详细解释。值类型参数指的是以值的形式传递给函数或方法的数据&#xff0c;而不是引用。 基本数据类型 基本数据类型的值类型参数&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023