Django实现音乐网站 ⒁

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

本篇主要是歌手页-全部歌手页功能开发。

目录

分出首页样式内容

创建首页样式文件

首页引入样式文件

全部歌手列表

创建路由

显示视图

引入分页实现库

视图方法

创建歌手首页

增加歌手跳转

导航条改活

首页增加导航条

歌手页增加导航条

歌手首字母搜索

路由增加参数

视图字母搜索

模板字母搜索

筛选无数据处理

修改歌手跳转链接

总结


分出首页样式内容

创建首页样式文件

把首页样式内容从基础样式文件中移动出来,独立创建index.css文件。

首页引入样式文件

在idnex.html引入index.css文件,防止首页样式设置影响其他页面样式。

内容如下:

{% extends 'common/base.html' %}
{% load static %}{% block title %}我的音乐{% endblock title %}{% block content %}
<link rel="stylesheet" href="{% static 'css/index.css' %}">
<link rel="stylesheet" href="{% static 'css/swiper-bundle.min.css' %}">

全部歌手列表

创建路由

在player/urls.py中在原有路由下增加新路由,并设置分页参数page。

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

显示视图

在player/views.py中创建歌手模块首页视图方法。

引入分页实现库

from django.core.paginator import Paginator

视图方法

处理字母列表这个很简单。关键在于全部歌手列表,先获取歌手列表数据,然后通过分页组件处理成分页数据,最后返回给模板。

内容如下:

def singer(request, page):""" 歌手列表 """# 字母列表letters = [chr(i) for i in range(ord('A'), ord('Z') + 1)]# 所有歌手列表singlerList = Singler.objects.all().order_by('-singe_num')# 实例化Paginator 每页显示24条paginator = Paginator(singlerList, 24)# 获取当前页码数据res = paginator.page(page)return render(request, 'singer/index.html', {'letters': letters,'singlerList': res})

创建歌手首页

在templates中创建singer文件夹,并在文件夹中创建index.html文件。

内容如下:

{% extends 'common/base.html' %}
{% load static %}{% block title %}我的音乐-歌手{% endblock title %}{% block content %}
<link rel="stylesheet" href="{% static 'css/singer.css' %}">
<!--分类筛选列表开始-->
<div class="nav_list"><ul class="nav_1"><li class="active"><a href="#" class="first">热门</a></li>{% for lname in letters %}<li><a href="{% url 'player:singer' 1 lname %}">{{lname}}</a></li>{% endfor %}<li><a href="{% url 'player:singer' 1 '#' %}">#</a></li></ul>
</div>
<!--分类筛选列表结束--><!--歌手列表开始-->
<div class="singer_list"><div class="list_max">{% for item in singlerList %}{% if forloop.counter < 6 %}<div class="item"><div class="cover"><img src="/media/{{item.portrait}}" alt=""></div><p class="name"><a href="{% url 'player:singer_detail' item.id %}">{{item.name}}</a></p><p class="num">{{item.singe_num}}首歌曲</p></div>{% elif forloop.counter == 7 %}</div><div class="list_min"><div class="item"><div class="cover"><img src="/media/{{item.portrait}}" alt=""></div><p class="name"><a href="{% url 'player:singer_detail' item.id %}">{{item.name}}</a></p></div>{% else %}<div class="item"><div class="cover"><img src="/media/{{item.portrait}}" alt=""></div><p class="name"><a href="{% url 'player:singer_detail' item.id %}">{{item.name}}</a></p></div>{% endif %}{% endfor %}</div>
</div>{% 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 singlerList.paginator.page_range %}{% if singlerList.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 %}
<!--歌手列表开始-->
{% endblock content %}

增加歌手跳转

修改header.html文件中歌手跳转超链接。

内容如下:

<li><a href="javascript:void(0)" class="selected">歌手</a></li>

导航条改活

想了想还是把导航条改为每个页面,而不是作为公共部分。

首页增加导航条

基础模板中去掉导航头,并把导航条内容移动到首页原内容之上。

内容如下:

{% extends 'common/base.html' %}
{% load static %}{% block title %}我的音乐{% endblock title %}{% block content %}
<link rel="stylesheet" href="{% static 'css/index.css' %}">
<link rel="stylesheet" href="{% static 'css/swiper-bundle.min.css' %}"><!--导航条开始-->
<div class="header"><img src="{% static 'images/logo.png' %}" class="logo" alt=""><ul><li><a href="javascript:void(0)" class="selected">推荐</a></li><li><a href="javascript:void(0)">排行榜</a></li><li><a href="{% url 'player:singer' 1 %}">歌手</a></li><li><a href="javascript:void(0)">单曲</a></li><li><a href="javascript:void(0)">歌单</a></li></ul>
</div>
<!--导航条结束-->

歌手页增加导航条

在分类筛选列表模块之上增加导航条。

内容如下:

<!--导航条开始-->
<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="javascript:void(0)">单曲</a></li><li><a href="javascript:void(0)">歌单</a></li></ul>
</div>
<!--导航条结束-->

歌手首字母搜索

全部歌手列表增加首字母筛选条件,下面就开始实现。

路由增加参数

在原有分页参数后增加字母搜索参数。

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

视图字母搜索

增加name参数接收字母值,如果是#则获取所有歌手列表,其他字母查询相应歌手列表。

def singer(request, page, name):""" 歌手列表 """# 字母列表letters = [chr(i) for i in range(ord('A'), ord('Z') + 1)]# 是否搜索首字母if name != '#':# 符合首字母的歌手列表singlerList = Singler.objects.filter(first_letter=name).order_by('-singe_num')else:# 所有歌手列表singlerList = Singler.objects.all().order_by('-singe_num')# 实例化Paginator 每页显示24条paginator = Paginator(singlerList, 24)# 获取当前页码数据res = paginator.page(page)return render(request, 'singer/index.html', {'letters': letters,'singlerList': res,'list_num': len(singlerList)})

模板字母搜索

全部歌手页链接增加字母筛选条件。

<div class="nav_list"><ul class="nav_1"><li class="active"><a href="#" class="first">热门</a></li>{% for lname in letters %}<li><a href="{% url 'player:singer' 1 lname %}">{{lname}}</a></li>{% endfor %}<li><a href="{% url 'player:singer' 1 '#' %}">#</a></li></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 singlerList.paginator.page_range %}{% if singlerList.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 %}

修改歌手跳转链接

原有跳转歌手的链接需要添加参数,已经无法使用。

<li><a href="{% url 'player:singer' 1 '#' %}">歌手</a></li>

总结

又来更新django音乐网站项目了, 最近一直比较忙,零零碎碎往前推进一点。

本篇主要是歌手页-全部歌手展示页面的开发,其中关键点在于分页和条件筛选的实现。

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

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

相关文章

Windows和Linux环境中安装RocketMQ并集成SpringBoot进行本地测试(史上最全)

1.Windows环境中安装RocketMQ 1.1 安装前的环境准备 JDK1.8、Maven、Git 1.2 RocketMQ下载 RocketMQ 官方网站 | RocketMQ (apache.org) 按照如下进行下载: 1.3 配置环境变量 在系统环境变量中新增如下配置&#xff1a; 变量名&#xff1a;ROCKETMQ_HOME 变量参数&…

新增!视频智能分析/AI算法智能分析网关V5告警功能添加教程来咯!

智能分析网关系列是基于边缘AI计算技术&#xff0c;可对前端摄像头采集的视频流进行实时检测分析&#xff0c;能对监控画面中的人、车、物进行识别&#xff0c;可实现的检测包括&#xff1a;人脸检测与识别、车辆检测与识别、烟火识别、安全帽/反光衣识别、区域入侵识别等&…

IIS搭建本地电脑服务器:通过内网穿透技术实现公网访问的步骤指南

1.前言 在网上各种教程和介绍中&#xff0c;搭建网页都会借助各种软件的帮助&#xff0c;比如网页运行的Apache和Nginx、数据库软件MySQL和MSSQL之类&#xff0c;为方便用户使用&#xff0c;还出现了XAMPP、PHPStudy、宝塔面板等等一系列集成服务&#xff0c;都是为了方便我们…

AMEYA360:兆易创新获得ISO 26262 ASIL D流程认证, 汽车功能安全管理体系再上新台阶

中国北京(2023年8月29日) —— 业界半导体器件供应商兆易创新GigaDevice(股票代码 603986)今日宣布&#xff0c;获得由国际公认的测试、检验和认证机构通标标准技术服务有限公司(以下简称SGS)授予的ISO 26262:2018汽车功能安全最高等级ASIL D流程认证证书&#xff0c;这标志着兆…

PPPoE连接无法建立的排查和修复

嗨&#xff0c;亲爱的读者朋友们&#xff01;你是否曾经遇到过PPPoE连接无法建立的问题&#xff1f;今天我将为你详细解析排查和修复这个问题的步骤。 检查物理连接 首先&#xff0c;我们需要确保物理连接没有问题。请按照以下步骤进行检查&#xff1a; - 检查网线是否插好&…

微服务(rpc)

微服务&#xff08;rpc&#xff09; 微服务必备的模块生产者消费者管理平台流量控制集群情况下如何做到流量监控 负载均衡服务发现和治理序列化传输序列化和反序列化 微服务是一种架构风格&#xff0c;将一个应用程序拆分为一组小型、独立的服务&#xff0c;每个服务都可以独立…

C++二叉搜索树

C二叉搜索树 二叉搜索树概念二叉搜索树操作结点类的实现中序遍历实现二叉搜索树的插入非递归实现递归实现 二叉搜索树的查找非递归实现递归实现 二叉搜索树的删除非递归实现递归实现 构造函数拷贝构造函数析构函数赋值运算符重载 二叉搜索树的应用二叉搜索树的性能分析 二叉搜索…

一键快速还原修复人脸,CodeFormer 助力人脸图像修复

今天在查资料的时候无意间看到了一个很有意思的工具&#xff0c;就是CodeFormer &#xff0c;作者给出来的说明是用于人脸修复任务的&#xff0c;觉得很有意思就拿来实践了一下&#xff0c;这里记录分享一下。 首先对人脸修复任务进行简单的回顾总结&#xff1a; 人脸修复是指…

【Docker】01-Centos安装、简单使用

参考教程&#xff1a; https://www.bilibili.com/video/BV1Qa4y1t7YH/?p5&spm_id_frompageDriver&vd_source4964ba5015a16eb57d0ac13401b0fe77 什么是Docker&#xff1f; Docker是一种开源的容器化平台&#xff0c;用于构建、打包、部署和运行应用程序。它通过使用容…

冠达管理 :主升浪前最后一次洗盘?

随着科技的不断发展&#xff0c;人们关于金融商场的了解也越来越深入。在股市中&#xff0c;洗盘是一个非常重要的概念。洗盘是指许多的股票被清洗出某个价位上的持有者&#xff0c;从而拉低该价位上的股票价格&#xff0c;为后续上涨做出铺垫。而在股市中&#xff0c;主升浪前…

算法工程题(非递减顺序 排列)

* 题意说明&#xff1a; * 给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2&#xff0c;另有两个整数 m 和 n &#xff0c; * 分别表示 nums1 和 nums2 中的元素数目。 * 请你 合并 nums2 到 nums1 中&#xff0c;使合并后的数组同样按 非递减顺序 排列。…

Flutter(九)Flutter动画和自定义组件

目录 1.动画简介2.动画实现和监听3. 自定义路由切换动画4. Hero动画5.交织动画6.动画切换7.Flutter预置的动画过渡组件自定义组件1.简介2.组合组件3.CustomPaint 和 RenderObject 1.动画简介 Animation、Curve、Controller、Tween这四个角色&#xff0c;它们一起配合来完成一个…

2023年高教社杯 国赛数学建模思路 - 复盘:人力资源安排的最优化模型

文章目录 0 赛题思路1 描述2 问题概括3 建模过程3.1 边界说明3.2 符号约定3.3 分析3.4 模型建立3.5 模型求解 4 模型评价与推广5 实现代码 建模资料 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 描述 …

maven推包The environment variable JAVA_HOME is not correctly set

解决办法&#xff1a; 打开idea查看jdk安装位置 1.在/etc下面创建&#xff08;如果存在就是更新&#xff09;launchd.conf。里面添加一行&#xff1a; setenv JAVA_HOME /Library/Java/JavaVirtualMachines/jdk1.8.0_351.jdk/Contents/Home #JAVA_HOME后面是我的java安装路径…

Python正则表达式简单教程

当涉及到处理文本数据时&#xff0c;正则表达式是一个非常有用的工具。它可以用于在字符串中进行模式匹配、搜索、替换等操作。以下是一个简单的Python正则表达式教程&#xff0c;从基础开始介绍如何使用正则表达式。 什么是正则表达式&#xff1f; 正则表达式&#xff08;Re…

【跟小嘉学 Rust 编程】二十、进阶扩展

系列文章目录 【跟小嘉学 Rust 编程】一、Rust 编程基础 【跟小嘉学 Rust 编程】二、Rust 包管理工具使用 【跟小嘉学 Rust 编程】三、Rust 的基本程序概念 【跟小嘉学 Rust 编程】四、理解 Rust 的所有权概念 【跟小嘉学 Rust 编程】五、使用结构体关联结构化数据 【跟小嘉学…

windows安装新openssl后依然显示旧版本

1、Windows环境下安装升级新版本openssl后&#xff0c;通过指令openssl version -a查看版本号&#xff1a;如下 这个版本号还是是以前的老版本&#xff0c;看来得把原先的老版本删除掉才可以生效&#xff0c;但是不知道在哪里。 2、网上找了老半天也没找到答案&#xff0c;最后…

JS三座大山 —— 原型和原型链

系列文章目录 内容链接2023前端面试笔记HTML52023前端面试笔记CSS3 文章目录 系列文章目录前言一、原型是什么&#xff1f;二、原型链是什么&#xff1f;2.1 原型链全方面解析2.2 为什么构造函数也有原型&#xff1f; 总结 前言 理解原型和原型链可以帮助我们更好地理解 Java…

后台管理系统:项目路由搭建与品牌管理

路由的搭建 先删除一些不需要的界面 然后发现跑不起来&#xff0c;我们需要去配置 删减成这样&#xff0c;然后自己新建需要的路由组件 改成这样&#xff0c;这里要注意。我们是在layout这个大的组件下面的&#xff0c;meta 中的title就是我们侧边栏的标题&#xff0c;icon可…

积分游戏小程序模板源码

积分游戏小程序模板源码是一款可以帮助用户快速开发小程序的工具&#xff0c;此模板源码包含五个静态页面&#xff0c;分别是首页、任务列表、大转盘、猜拳等五个页面&#xff0c;非常适合进行积分游戏等相关开发。 此模板源码的前端部分非常简单易用&#xff0c;用户可以根据…