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.mzph.cn/news/59453.shtml

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

相关文章

STM32H750+LAN8720无操作系统移植lwip

前言 本文提供移植好的工程&#xff0c;见本文绑定资源 环境 STM32CubeMX&#xff1a; V6.8.1 STM32H7 HAL Pack&#xff1a; V1.11.1 硬件连接 STM32H750 GPIO定义如下&#xff1a; LAN8720 GPIO定义如下&#xff1a; 连接方式如下&#xff1a; LAN8720       <—…

畅捷通T+用户中locked勒索病毒后该怎么办?勒索病毒解密数据恢复

Locked勒索病毒是一种近年来在全球范围内引起广泛关注的网络安全威胁程序。它是一种加密货币劫持病毒&#xff0c;专门用于加密用户的数据并要求其支付赎金。Locked勒索病毒通过攻击各种系统漏洞和网络薄弱环节&#xff0c;使用户计算机受到感染并被加密锁定时&#xff0c;无法…

easyexcel poi根据模板导出Excel

1.导入依赖 <!-- poi依赖--> <dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId><version>4.0.1</version> </dependency> <!-- poi对于excel 2007的支持依赖--> <dependency…

基于Spring Boot 的 Ext JS 应用框架之coworkee

Ext JS 官方提供了一个人员管理的完整应用框架 - coworkee。该框架的显示如下: 该框架的布局特点如下: 布局方式: 左右布局, 左侧导航栏默认收合特点:左侧导航区占用空间小, 工作区较大, 适合没有二级导航栏,工作区需要显示的内容较多的系统。如果导航栏是横向底部,就…

❤ 给自己的mac系统上安装java环境

❤ 给自己的mac系统上安装java环境 &#x1f353; 作为前端工程师如何给自己的mac系统上安装java环境 &#x1f34e; 最近因为自己的一些项目需求&#xff0c;mac电脑上需要安装一些后台的java环境&#xff0c;用来跑后台的java程序&#xff0c;于是从一个前端工程师的角度安…

域名解析与http服务器实现原理

域名解析函数gethostbyname struct hostent *gethostbyname(const char *name); 主机结构在<netdb.h>中定义如下&#xff1a; 结构的成员包括&#xff1a; h_name&#xff1a;主机的正式名称 h_aliases&#xff1a;主机的备用名称数组&#xff0c;以NULL结尾指针 h_…

C语言——程序执行的三大流程

顺序 : 从上向下&#xff0c; 顺序执行代码分支 : 根据条件判断&#xff0c; 决定执行代码的分支循环 : 让特定代码重复的执行

jsp+servlet+mysql阳光网吧管理系统

项目介绍&#xff1a; 本系统使用jspservletmysql开发的阳光网吧管理系统&#xff0c;纯手工敲打&#xff0c;系统管理员和用户角色&#xff0c;功能如下&#xff1a; 管理员&#xff1a;修改个人信息、修改密码&#xff1b;机房类型管理&#xff1b;机房管理&#xff1b;机位…

【腾讯云 Cloud studio 实战训练营】真正做到让你的开发成本只在编码

文章目录 写在前面CODINGCloud studio工具在线编码运行项目代码上传Cloud Studio 开发贪吃蛇写在最后 写在前面 期待已久的体验活动终于来了&#xff0c;Clound Studio用了才知道有多爽&#xff0c;Cloud Studio 是基于浏览器的集成式开发环境 (IDE)&#xff0c;为开发者提供了…

leetcode 17.电话号码字母组合

⭐️ 题目描述 &#x1f31f; leetcode链接&#xff1a;https://leetcode.cn/problems/letter-combinations-of-a-phone-number/description/ 代码&#xff1a; class Solution { public:const char * letterCombine(int i) {static const char *letter[] { "" , …

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安装路径…

一文讲透:低代码平台是什么?低代码平台应该如何挑选?

低代码平台是什么&#xff1f;低代码平台的边界在哪&#xff1f;低代码平台的优势&#xff1f;低代码平台哪个好用&#xff1f;2023年有哪些国内值得关注的低代码平台&#xff1f;本文将深入浅出的带大家了解低代码平台&#xff0c;并且为大家带来2023年国内最热六款低代码平台…

Lora升级!ReLoRa!最新论文 High-Rank Training Through Low-Rank Updates

目录 摘要1 引言2 相关工作3 方法4 实验5 结果6 结论7 局限性和未来工作 关注公众号TechLead&#xff0c;分享AI与云服务技术的全维度知识。作者拥有10年互联网服务架构、AI产品研发经验、团队管理经验&#xff0c;同济本复旦硕&#xff0c;复旦机器人智能实验室成员&#xff0…

Django-跨域

一、基础概念 cors 跨域资源共享 二、跨域请求-简单请求 满足以下全部条件的请求为 简单请求 1.请求方法如下&#xff1a; GET or HEAR or POS 2.请求头仅包含如下&#xff1a; Accept、Accept-Language、Content-Language、Content-Type 3.ConTent-Type 仅支持如下三种&…

【LeetCode】28 . 找出字符串中第一个匹配项的下标

28 . 找出字符串中第一个匹配项的下标&#xff08;简单&#xff09; 方法&#xff1a;双指针法 思路 使用 find 函数枚举原串 ss 中的每个字符作为「发起点」&#xff0c;每次从原串的「发起点」和匹配串的「首位」开始尝试匹配&#xff1a; 匹配成功&#xff1a;返回本次匹配…

【大模型】基于 LlaMA2 的高 star 的 GitHub 开源项目汇总

【大模型】基于 LlaMA2 的高 star 的 GitHub 开源项目汇总 Llama2 简介开源项目汇总NO1. FlagAlpha/Llama2-ChineseNO2. hiyouga/LLaMA-Efficient-TuningNO3. yangjianxin1/FireflyNO4. LinkSoul-AI/Chinese-Llama-2-7bNO5. wenge-research/YaYiNO6. michael-wzhu/Chinese-LlaM…

海康摄像头通过SDK接入到LiveNVR实现双向语音喊话对讲与网页无插件播放,并支持GB28181级联语音对讲...

目录 1、确认摄像头是否支持对讲2、摄像头视频类型复合流3、通道配置SDK接入4、视频广场点击播放5、相关问题 5.1、如何配置通道获取直播流&#xff1f;5.2、如何GB28181级联国标平台&#xff1f;6、RTSP/HLS/FLV/RTMP拉流Onvif流媒体服务 1、确认摄像头是否支持对讲 可以访问摄…

face-api实现人脸识别。

face-api实现人脸识别 face-api的由来tensorflow.js 是什么部分代码模型介绍 face-api的由来 访问地址 JavaScript API for face detection and face recognition in the browser implemented on top of the tensorflow.js core API 官方说明 翻译&#xff1a;在tensorflow.js…

SaaS多租户系统架构设计

前言&#xff1a;多租户是SaaS&#xff08;Software-as-a-Service&#xff09;下的一个概念&#xff0c;意思为软件即服务&#xff0c;即通过网络提供软件服务。SaaS平台供应商将应用软件统一部署在自己的服务器上&#xff0c;客户可以根据工作的实际需求&#xff0c;通过互联网…

机器学习:无监督学习

文章目录 线性学习方法聚类ClusteringKmeansHAC 分布表示降维PCAMatrix FactorizationManifold LearningLLELaplacian Eigenmapst-SEN 线性学习方法 聚类Clustering Kmeans 随机选取K个中心&#xff0c;然后计算每个点与中心的距离&#xff0c;找最近的&#xff0c;然后更新中…