Django实现音乐网站 ⑿

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

本篇主要是加载静态资源和推荐页-轮播图、推荐歌单功能开发。

目录

加载静态资源

引入jquery.js

引入bootstrap资源文件

创建基类模板样式文件

推荐页开发

轮播图开发

下载

加载swiper

自定义引入继承块设置

使用swiper

设置轮播div宽高

轮播图改活

视图查询轮播图表

模版循环遍历

推荐歌单

查询推荐歌单

模版显示推荐歌单

总结


加载静态资源

引入jquery.js

下载jquery.js文件到static/js目录中。

引入bootstrap资源文件

下载bootstrap资源包,从中取出css、js、font资源文件放置到static相应目录下。

如下图:

 

创建基类模板样式文件

在static/css下创建基类模板样式文件base.css;并在base.html中引用。

内容如下:

*{margin:0;padding:0;
}body {color:#3b3b3b;
}a {text-decoration:none;transition: none;border:none;
}a:hover {text-decoration:none;transition: none;
}li {list-style:none;
}#container {min-width: 1180px;max-width: 1640px;padding: 0 120px;margin: 0 auto;
}.header .logo{float:left;margin-right:14px;
}.header ul li{float:left;
}.header ul li a {display:block;height:69px;padding:0 14px;line-height:67px;font-size:20px;text-decoration: none;color:#3b3b3b;
}.header ul li a:hover{color:#000000;
}.header ul li a.selected{background-color:#ffe443;font-weight: bold;
}.clear {clear:both;
}.footer {width:100%;height:158px;background-color:#1f1f1f;text-align:center;color:#575757;padding-top:24px;margin-top: 62px;
}.swiper {width: 100%;height: 345px;margin-top:5px;
}.recommend_song_sheet {width:100%;height:400px;margin-top:70px;overflow:hidden;
}.recommend_song_sheet .title {height:40px;line-height:40px;margin-bottom:28px;overflow:hidden;
}.recommend_song_sheet .title .name{float:left;color:#000000;margin-right:20px;font-weight:bold;font-size: 28px;
}.recommend_song_sheet .title ul{float:left;
}.recommend_song_sheet .title ul li {float:left;
}.recommend_song_sheet .title ul li a{display:block;padding:0 20px;color:#3b3b3b;text-decoration: none;
}.recommend_song_sheet .title ul li a.now {font-weight:bold;text-shadow: #FC0 1px 0 10px;
}.recommend_song_sheet .list {width:100%;
}.recommend_song_sheet .list dl {width:263.9px;height:352px;float:left;margin-left:10px;cursor: pointer;
}.recommend_song_sheet .list dl.one {width:263.9px;height:352px;margin-left:0;
}.recommend_song_sheet .list dt {height:266px;
}.recommend_song_sheet .list dt img{width:263.9px;
}.recommend_song_sheet .list dd .name {margin-top: 16px;font-size: 16px;line-height: 22px;font-weight: 400;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;word-break: break-all;
}.recommend_song_sheet .list dd .count {margin-top: 10px;color: #999;
}.recommend_song_sheet .list dd .count i{font-size:14px;
}.recommend_rank {margin-top: 70px;
}.recommend_rank .title {height:40px;line-height:40px;margin-bottom:28px;overflow:hidden;
}.recommend_rank .title .name{float:left;color:#000000;margin-right:20px;font-weight:bold;font-size: 28px;
}.recommend_rank .title ul{float:left;
}.recommend_rank .title ul li {float:left;
}.recommend_rank .title ul li a{display:block;padding:0 20px;color:#3b3b3b;text-decoration: none;
}.recommend_rank .list {display: flex;justify-content: space-between;
}.recommend_rank .bank {width: 18.85%;box-shadow: 0 0 30px 0 rgba(65,67,70,.08);
}.recommend_rank .bank_top {position: relative;padding-bottom: 54.8%;overflow: hidden;
}.recommend_rank .bank_top .img {position: absolute;width: 100%;height: 100%;left: 0;top: 0;background: rgba(46,32,60,.7);z-index: 10;
}.recommend_rank .bank_top .img_tip{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 54.3%;z-index: 10;
}.recommend_rank .bank_top .img_bg {position: absolute;top: 50%;left: 0;width: 100%;transform: translateY(-50%);
}.recommend_rank .bank_list {padding: 28px 20px 26px;
}.recommend_rank .bank_list li {display: flex;justify-content: space-between;
}.recommend_rank .bank_list li .top_img {width: 20px;height: 33px;
}.recommend_rank .bank_list .top1 {background: url(/static/images/rank_1.png) center 4px no-repeat;background-size: auto;background-size: 168%;
}.recommend_rank .bank_list .top2 {background: url(/static/images/rank_2.png) center 4px no-repeat;background-size: auto;background-size: 168%;
}.recommend_rank .bank_list .top3 {background: url(/static/images/rank_3.png) center 4px no-repeat;background-size: auto;background-size: 168%;
}.recommend_rank .bank_list .top_index {padding-top: 3px;display: inline-block;font-weight: 600;font-size: 16px;width: 20px;text-align: center;
}.recommend_rank .bank_list .top_info {width: 85%;padding-left: 10px;
}.recommend_rank .bank_list .top_info .song_name:hover {font-weight: 600;
}.recommend_rank .bank_list .top_info .song_name {width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 16px;font-weight: 400;height: 22px;line-height: 22px;cursor: pointer;
}.recommend_rank .bank_list .top_info .singler:hover {color: #333;
}.recommend_rank .bank_list .top_info .singler {width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;margin-top: 4px;font-size: 14px;font-weight: 300;color: #999;height: 20px;line-height: 20px;cursor: pointer;
}.recommend_singler {margin-top: 70px;
}.recommend_singler .title {height:40px;line-height:40px;margin-bottom:28px;overflow:hidden;
}.recommend_singler .title .name{float:left;color:#000000;margin-right:20px;font-weight:bold;font-size: 28px;
}.recommend_singler .title ul{float:left;
}.recommend_singler .title ul li {float:left;
}.recommend_singler .title ul li a{display:block;padding:0 20px;color:#3b3b3b;text-decoration: none;
}.recommend_singler .title ul li a.now {font-weight:bold;text-shadow: #FC0 1px 0 10px;
}.recommend_singler .list {display: flex;justify-content: space-between;
}.recommend_singler .list .item {width: 13%;text-align: center;
}.recommend_singler .list .item .cover {position: relative;width: 100%;padding-bottom: 100%;overflow: hidden;border-radius: 50%;font-size: 0;cursor: pointer;
}.recommend_singler .list .item .cover img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;
}.recommend_singler .list .item .name {position: relative;height: 22px;font-size: 16px;line-height: 22px;font-weight: 400;margin-top: 17px;flex-wrap: nowrap;justify-content: center;padding: 0 5px;
}.recommend_singler .list .item .num {margin-top: 6px;font-size: 12px;color: #999;
}

 

推荐页开发

轮播图开发

使用swiper来处理轮播。

下载

下载Swiper - Swiper中文网

 

加载swiper

需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件。

解压后寻找swiper-bundle.min.js和swiper-bundle.min.css文件,

放置到myMusic/static相应资源目录下。

 

自定义引入继承块设置

在base.html中原有脚本文件引入位置之下设置一个引入js文件继承块,

用来让子页面来自定义继承脚本文件。

内容如下:

<script src="{% static 'js/jquery-3.7.0.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
{% block styleJs %}
{# 子页面引入js文件 #}
{% endblock styleJs %}

使用swiper

在index.html页面引入css和js文件,找两个图片放入images目录中。

先做一个轮播效果,之后改为调用后台数据。

内容如下:

{% extends 'common/base.html' %}
{% load static %}{% block title %}我的音乐{% endblock title %}{% block content %}
<link rel="stylesheet" href="{% static 'css/swiper-bundle.min.css' %}"><div class="swiper"><div class="swiper-wrapper"><div class="swiper-slide"><img src="{% static 'images/1.jpg' %}" alt=""></div><div class="swiper-slide"><img src="{% static 'images/2.jpg' %}" alt=""></div>
</div><!-- 分页器 --><div class="swiper-pagination"></div><!-- 导航按钮 --><div class="swiper-button-prev"></div><div class="swiper-button-next"></div>
</div>
<!--导航等组件可以放在Swiper容器之外-->
{% endblock content %}{% block styleJs %}
{# 子页面引入js文件 #}
<script src="{% static 'js/swiper-bundle.min.js' %}"></script>
<script>var mySwiper = new Swiper ('.swiper', {loop: true, // 循环模式选项// 分页器pagination: {el: '.swiper-pagination',clickable: true,// 设置分页器点击切换},// 前进后退按钮navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},// 自动切换autoplay: {delay: 3000,disableOnInteraction: false,},})
</script>
{% endblock styleJs %}

 

设置轮播div宽高

在base.css中设置轮播图所在div的宽高。

内容如下:

.swiper {width: 100%;height: 345px;margin-top:5px;
}

效果:

 

轮播图改活

轮播图改为后台提供数据。

视图查询轮播图表

路由之前已经设置,只需要查询轮播图数据并返回给模版。

代码如下:

from django.shortcuts import render
from .models import Carouseldef index(request):""" 显示首页 """# 获取首页轮播图carousel_imgs = Carousel.objects.all()return render(request, 'index/index.html', {'carousels': carousel_imgs})

 

模版循环遍历

把原来前端写死的轮播图改为后端返回数据,通过for循环遍历并加上跳转。

代码如下:

<div class="swiper"><div class="swiper-wrapper">{% for ca in carousels %}<div class="swiper-slide"><a href="{{ ca.href }}"><img src="/media/{{ ca.path }}" alt=""></a></div>{% endfor %}</div><!-- 分页器 --><div class="swiper-pagination"></div><!-- 导航按钮 --><div class="swiper-button-prev"></div><div class="swiper-button-next"></div>
</div>

推荐歌单

模版已经做好,现在需要改为后台提供数据。

这里先确认规则为播放量最多的五个返回给前端。

因为目前播放量增加功能还没做,先把数据表中修改一下播放量。

查询推荐歌单

还是在视图中首页方法中处理;需要排序和分页设置。

代码如下:

from django.shortcuts import render
from .models import Carousel, SongSheetdef index(request):""" 显示首页 """# 获取首页轮播图carousel_imgs = Carousel.objects.all()# 推荐歌单# 选播放量最多的五个songsheets = SongSheet.objects.order_by('-playnum').all()[0:5]return render(request, 'index/index.html', {'carousels': carousel_imgs, 'songsheets': songsheets})

模版显示推荐歌单

因为目前还没做歌单详情功能,现在歌单类型和歌单详情跳转先不做;

当前先做首页推荐的显示。

本来想使用enumerate函数取得对象的key属性判断第一个赋值元素属性,结果发现在模版中解析不了;突然想起来循环中forloop.counter属性;这里主要使用了循环和在循环中进行条件判断。

代码如下:

<!--推荐歌单开始-->
<div class="recommend_song_sheet"><div class="title"><div class="name">推荐歌单</div><ul><li><a href="#" class="now">每日推荐</a></li><li><a href="#">翻唱</a></li><li><a href="#">网络</a></li><li><a href="#">伤感</a></li><li><a href="#">欧美</a></li><li><a href="#">更多></a></li></ul></div><div class="list">{% for son in songsheets %}{% if forloop.counter == 1 %}<dl class="one"><dt><img src="/media/{{ son.cover }}" alt=""></dt><dd><p class="name">{{ son.name }}</p><p class="count"><i class="glyphicon glyphicon-play"></i> {{ son.playnum }}</p></dd></dl>{% else %}<dl><dt><img src="/media/{{ son.cover }}" alt=""></dt><dd><p class="name">{{ son.name }}</p><p class="count"><i class="glyphicon glyphicon-play"></i> {{ son.playnum }}</p></dd></dl>{% endif %}{% endfor %}</div>
</div>
<!--推荐歌单结束-->

效果:

总结

目前开发比较顺利,费时的主要是前端的样式设置,感觉自己的技术还是偏向于后端方面。

只能是多加练习了。

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

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

相关文章

中英双语对话大语言模型:ChatGLM-6B

介绍 ChatGLM-6B 是一个开源的、支持中英双语的对话语言模型&#xff0c;基于 General Language Model (GLM) 架构&#xff0c;具有 62 亿参数。结合模型量化技术&#xff0c;用户可以在消费级的显卡上进行本地部署&#xff08;INT4 量化级别下最低只需 6GB 显存&#xff09;。…

Stable Diffusion 系列教程 | 快速入门

目录 1.基本原理 2.主流方式 3.配置要求 3.1 显卡方面 4.基本界面 4.1 模型设置区 4.2 菜单栏区域 4.3 提示词区 4.4 出图设置区 5.文生图基本操作流程 5.1 选用模型&#xff0c;撰写提示词 5.2 进行出图设置 5.3 再次出图&#xff01; 5.4 保存 1.基本原理 在20…

容器和云原生(三):kubernetes搭建与使用

目录 单机K8S docker containerd image依赖 kubeadm初始化 验证 crictl工具 K8S核心组件 上文安装单机docker是很简单docker&#xff0c;但是生产环境需要多个主机&#xff0c;主机上启动多个docker容器&#xff0c;相同容器会绑定形成1个服务service&#xff0c;微服务…

下线40万辆,欧拉汽车推出2023款好猫尊荣型和GT木兰版

欧拉汽车是中国新能源汽车制造商&#xff0c;成立于2018年。截至目前&#xff0c;已经下线了40万辆整车&#xff0c;可见其在市场的影响力和生产实力。为了庆祝这一里程碑&#xff0c;欧拉汽车推出了品牌书《欧拉将爱进行到底》&#xff0c;在其中讲述了欧拉汽车的发展历程和未…

【Unity】UI的一些简单知识

Canvas 新建一个Canvas Render Mode Canvas 中有一个Render Mode&#xff08;渲染模式&#xff09;&#xff0c;有三种渲染模式: Screen Space-Overlay &#xff08;屏幕空间&#xff09;Screen Space-Camara 、 World Space 其中&#xff0c;Space- Overlay是默认显示在…

[C语言]分支与循环

导言&#xff1a; 在人生中我们总会有选择&#xff0c;**如下一顿吃啥&#xff1f;**又或者每天都是在重复&#xff0c;吃饭&#xff01;&#xff01;&#xff01;&#xff01;&#xff0c;当然在C语言中也有选择和重复那就是分支语句与循环语句 文章目录 分支循环循环中的关键…

阿里云ECS服务器安装PostgreSQL

1. 概述 PostgreSQL是一个功能强大的开源数据库&#xff0c;它支持丰富的数据类型和自定义类型&#xff0c;其提供了丰富的接口&#xff0c;可以自行扩展其功能&#xff0c;支持使用流行的编程语言编写自定义函数 PostgreSQL数据库有如下优势&#xff1a; PostgreSQL数据库时…

jmeter CSV 数据文件设置

创建一个CSV数据文件&#xff1a;使用任何文本编辑器创建一个CSV文件&#xff0c;将测试数据按照逗号分隔的格式写入文件中。例如&#xff1a; room_id,arrival_date,depature_date,bussiness_date,order_status,order_child_room_id,guest_name,room_price 20032,2023-8-9 14:…

ChatGLM-Med,HuaTuo,ChatDoctor

ChatGLM-Med&#xff1a;基于中文医学知识的ChatGLM模型微调 HuaTuo&#xff1a;基于中文医学知识的LLaMA微调模型 ChatDoctor&#xff1a;基于常见医疗数据微调的LLaMA 目录 ChatGLM-MedHuaTuoChatDoctor ChatGLM-Med 模型为ChatGLM-6B&#xff0c;微调数据集为&#xff1a;医…

LeetCode150道面试经典题-- 二叉树的最大深度(简单)

1.题目 给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 2.示例 3.思路 深度优先遍历 一个二叉树要查询到最大深度&#xff0c;可以将问题转为从根节点出发&#xff0c;查看左右子树的最大深度&am…

【核磁共振成像】傅里叶重建

目录 一、傅里叶重建二、填零三、移相四、数据窗函数五、矩形视野六、多线圈数据重建七、图像变形校正八、缩放比例九、基线校准 长TR&#xff0c;长TE&#xff0c;是T2加权像&#xff1b; 短TR&#xff0c;短TE&#xff0c;是T1加权像&#xff1b; 长TR&#xff0c;短TE&#…

TCP滑动窗口

为什么会有滑动窗口 在计算机网络中&#xff0c;数据通常被分成小块&#xff08;也叫数据段&#xff09;在网络中传输&#xff08;为什么会被分成小块&#xff0c;请了解拥塞窗口和流量控制&#xff09;。这些小块可能会在传输的过程中遇到延迟、丢失或乱序等问题。为了保证数据…

Mybatis之动态SQL及映射结果(带你了解动态SQL的魅力)

目录 前言 一、Mybatis之动态SQL 1. 简介 2. 作用及重要性 3. 应用场景 二、动态SQL讲解 1. 原生使用工具类&#xff08;BaseDao&#xff09;的SQL 2. 运用动态SQL编写方法 2.1 Mybatis动态SQL的常用标签 2.2 Mybatis动态SQL的常用函数 2.3 案例展示 if标签的运用 f…

angular中如何定义一个全局组件?

需求&#xff0c;我们需要新建一个navBreadcrumb的全局组件。这是一个面包屑导航&#xff0c;在不同的页面引入时传入一个路由数组即可。 第一步&#xff1a;我们新建这个组件&#xff1a; ng g c navBreadcrumb ng g m navBreadcrumb----------nav-breadcrumb.module-------…

AMBA总线协议(8)——AHB(六):分割传输

一、前言 在之前的文章中&#xff0c;我们重点介绍了AHB传输的仲裁&#xff0c;首先介绍了仲裁相关的信号&#xff0c;然后分别介绍了请求总线访问&#xff0c;授权总线访问&#xff0c;猝发提前终止&#xff0c;锁定传输和默认主机总线&#xff0c;在本文中我们将继续介绍AHB的…

论文《LoRA: Low-Rank Adaptation of Large Language Models》阅读

论文《LoRA: Low-Rank Adaptation of Large Language Models》阅读 BackgroundIntroducitonProblem StatementMethodology Δ W \Delta W ΔW 的选择 W W W的选择 总结 今天带来的是由微软Edward Hu等人完成并发表在ICLR 2022上的论文《LoRA: Low-Rank Adaptation of Large Lan…

交叉编译 libzdb

参考博客&#xff1a;移植libzdb3.2.2到arm_configure: error: no available database found or s_酣楼驻海的博客-CSDN博客 编译时间 2023-08-23 libzdb 下载&#xff1a; 源码访问如下&#xff1a; https://bitbucket.org/tildeslash/libzdb/src/master/ git 下载链接 …

低代码开发ERP:精打细算,聚焦核心投入

企业数字化转型已经成为现代商业环境中的一项关键任务。如今&#xff0c;企业面临着日益激烈的竞争和不断变化的市场需求。在这样的背景下&#xff0c;数字化转型不仅是企业生存的必然选择&#xff0c;也是取得竞争优势和实现可持续发展的关键因素。 在数字化转型的过程中&…

[oneAPI] 基于BERT预训练模型的英文文本蕴含任务

[oneAPI] 基于BERT预训练模型的英文文本蕴含任务 Intel DevCloud for oneAPI 和 Intel Optimization for PyTorch基于BERT预训练模型的英文文本蕴含任务语料介绍数据集构建 模型训练 结果参考资料 比赛&#xff1a;https://marketing.csdn.net/p/f3e44fbfe46c465f4d9d6c23e38e0…

3D数据转换工具HOOPS Exchange概览

HOOPS Exchange SDK是一组C软件库&#xff0c;使开发团队能够快速为其应用程序添加可靠的2D和3D CAD导入和导出功能。这允许访问广泛的数据&#xff0c;包括边界表示&#xff08;BREP&#xff09;、产品制造信息&#xff08;PMI&#xff09;、模型树、视图、持久ID、样式、构造…