Django实现音乐网站 ⒁

news2024/11/25 12:43:29

使用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.coloradmin.cn/o/949488.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

移动端通讯录相关代码

移动端通讯录相关代码

vue3更新版本 附件地址 代码在附件里噜 太多了不好贴
阅读更多...
EMC 性能优异的ISO7761QDBQQ1、ISO7762QDWQ1、ISO7741QDWWQ1、ISO7710QDRQ1汽车类数字隔离器

EMC 性能优异的ISO7761QDBQQ1、ISO7762QDWQ1、ISO7741QDWWQ1、ISO7710QDRQ1汽车类数字隔离器

一、EMC 性能优异的 ISO776x-Q1 高速、增强型六通道数字隔离器 ISO776x-Q1 器件是高性能六通道数字隔离器&#xff0c;可提供符合 UL 1577 的 5000VRMS&#xff08;DW 封装&#xff09;和 3000VRMS&#xff08;DBQ 封装&#xff09;隔离额定值。该系列器件还通过了VDE、CSA、T…
阅读更多...
2023_Spark_实验二：IDEA安装及配置

2023_Spark_实验二：IDEA安装及配置

一、下载安装包 链接&#xff1a;百度网盘 请输入提取码 所在文件夹&#xff1a;大数据必备工具--》开发工具(前端后端)--》后端 下载文件名称&#xff1a;ideaIU-2019.2.3.exe &#xff08;喜欢新版本也可安装新版本&#xff0c;新旧版本会存在部分差异&#xff09; IDEA …
阅读更多...
极智AI | 地平线天工开物工具链部署流程详解

极智AI | 地平线天工开物工具链部署流程详解

欢迎关注我的公众号 [极智视界]，获取我的更多经验分享 大家好，我是极智视界，本文来介绍一下 地平线天工开物工具链部署流程详解。 邀您加入我的知识星球「极智视界」，星球内有超多好玩的项目实战源码下载，链接：https://t.zsxq.com/0aiNxERDq 地平线天工开物工具链从完备…
阅读更多...
【AI】数学基础——线代（向量部分）

【AI】数学基础——线代（向量部分）

参考&#xff1a; kenjihiranabe——The-Art-of-Linear-Algebra-zh-CN 详细计算方法与理论&#xff1a;见 矩阵论 线性代数的本质在于将具体事物抽象为数学对象&#xff0c;并描述其静态和动态特性 最基本的概念是 set 集合的定义是由某些具有某些共性的对象汇总成的集体。 将这…
阅读更多...
go语言 go mod生成

go语言 go mod生成

1. go hello world 创建文件夹gotest&#xff0c;在其中创建test1.go文件&#xff0c;并写入 package mainimport ("fmt" )func main() {fmt.Println("hello world") } 运行命令 go run test1.go 可以看到输出hello world 2. cli 命令行的使用 代码如下…
阅读更多...
Git 速查表：中级用户必备的 12 个 Git 命令

Git 速查表：中级用户必备的 12 个 Git 命令

本文译自&#xff1a;Git Cheat Sheet: 12 Essential Git Commands For Intermediate Users&#xff0c;原文链接&#xff1a;https://initialcommit.com/blog/git-cheat-sheet-intermediate 本系列共有三篇文章&#xff0c;本文是第二篇&#xff1a; Git Cheat Sheet: 12 Ess…
阅读更多...
了解 HarmonyOS

了解 HarmonyOS

引言 在开始 HarmonyOS 开发之前&#xff0c;了解其背景、特点和架构是非常重要的。本章将为你提供一个全面的 HarmonyOS 概览。 目录 什么是 HarmonyOS HarmonyOS 的发展历程 HarmonyOS 的特点 HarmonyOS 的架构 HarmonyOS 与其他操作系统的比较 1. 什么是 HarmonyOS …
阅读更多...
如何在WSL上导入任何Linux发行版

如何在WSL上导入任何Linux发行版

文章目录 一、准备1. 开启WSL相关功能2. 升级WSL3. 设置默认的wsl版本 二、通过 Microsoft Store 安装 Linux1. 查看 Microsoft Store 有哪些可安装的 Linux 发行版2. 安装 Linux 发行版3. 查看已安装的 Linux 发行版4. 启动Linux发行版 三、通过Linux发行商提供的tar文件安装1…
阅读更多...
idea中vue项目 npm安装插件后node modules中找不到

idea中vue项目 npm安装插件后node modules中找不到

从硬盘中重新加载一下
阅读更多...
[PyTorch][chapter 53][Auto Encoder 实战]

[PyTorch][chapter 53][Auto Encoder 实战]

前言&#xff1a; 结合手写数字识别的例子&#xff0c;实现以下AutoEncoder ae.py: 实现autoEncoder 网络 main.py: 加载手写数字数据集&#xff0c;以及训练&#xff0c;验证&#xff0c;测试网络。 左图&#xff1a;原图像 右图&#xff1a;重构图像 ----main----- 每轮训…
阅读更多...
DHCP 服务器部署

DHCP 服务器部署

| DHCP - - > Dynamic Host Configuration Protocol 动态主机配置协议 背景 任何一个需要上网的设备&#xff0c;都必须得有IP地址&#xff0c;子网掩码&#xff0c;网关&#xff0c;等等网络参数。比如&#xff1a;手机&#xff0c;电脑&#xff0c;智能手表&#xff0c…
阅读更多...
【SpringBoot学习笔记】02.静态资源与首页订制

【SpringBoot学习笔记】02.静态资源与首页订制

静态资源 Spring Boot 通过 MVC 的自动配置类 WebMvcAutoConfiguration 为这些 WebJars 前端资源提供了默认映射规则&#xff0c;部分源码如下。 jar包&#xff1a; JAR 文件就是 Java Archive File&#xff0c;顾名思意&#xff0c;它的应用是与 Java 息息相关的&#xff0c;…
阅读更多...
IDEA 报 Cannot resolve symbol ‘HttpServletResponse‘ 解决

IDEA 报 Cannot resolve symbol ‘HttpServletResponse‘ 解决

springboot2版本换成springboot3之后&#xff0c;代码这里突然报红了&#xff0c; 首先要淡定&#xff0c;把原先Import的引入删掉&#xff0c;重新引入试试呢&#xff0c;是不是很简单哈哈。 原来&#xff0c;springboot3的路径是&#xff1a; import jakarta.servlet.http…
阅读更多...
Docker之私有仓库 RegistryHarbor

Docker之私有仓库 RegistryHarbor

目录 一、Docker私有仓库&#xff08;Registry&#xff09; 1.1 Registry的介绍 二、搭建本地私有仓库 2.1首先下载 registry 镜像 2.2在 daemon.json 文件中添加私有镜像仓库地址 2.3运行 registry 容器 2.4Docker容器的重启策略 2.5为镜像打标签 2.6上传到私有仓库 2…
阅读更多...
【车载雷达信号处理】利用sinc函数实现扣点

【车载雷达信号处理】利用sinc函数实现扣点

针对信号处理流程中多次FFT输出的频谱结果&#xff0c;在特殊的场景下&#xff0c;可能存在针对某一特定频点的固定"虚警"&#xff0c;所以针对某一个特定频点进行“扣点”的操作是常有的信号处理流程需求。不仅如此&#xff0c;针对最大能量值的扣点也能在不适合使用…
阅读更多...
文件修改时间能改吗？怎么改？

文件修改时间能改吗？怎么改？

文件修改时间能改吗&#xff1f;怎么改&#xff1f;修改时间是每个电脑文件具备的一个属性&#xff0c;它代表了这个电脑文件最后一次的修改时间&#xff0c;是电脑系统自动赋予文件的&#xff0c;相信大家都应该知道。我们右击鼠标某个文件&#xff0c;然后点击弹出菜单里面的…
阅读更多...
并发编程(四大函数接口) 06 详细讲解

并发编程(四大函数接口) 06 详细讲解

四大函数接口 函数接口&#xff1a;接口中只有一个方法 Function Function函数型接口&#xff0c;有一个输入参数&#xff0c;有一个输出只要是函数型接口可以用Lambda表达式简化 函数函数型接口&#xff0c;有一个输入参数&#xff0c;有一个输出只要是函数型接口可以用lamb…
阅读更多...
并发容器11

并发容器11

一 JDK 提供的并发容器总结 JDK 提供的这些容器大部分在 java.util.concurrent 包中。 ConcurrentHashMap: 线程安全的 HashMap CopyOnWriteArrayList: 线程安全的 List&#xff0c;在读多写少的场合性能非常好&#xff0c;远远好于 Vector. ConcurrentLinkedQueue: 高效的并…
阅读更多...
element 级联选择框偏移

element 级联选择框偏移

如图所示&#xff0c;选择之后&#xff0c;位置跑到了左上角 添加:append-to-body"false",在弹出框的定位出现问题时&#xff0c;可将该属性设置为 false
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023