Django实现音乐网站 ⑿

news2024/11/23 0:33:56

使用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 Carousel


def 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, SongSheet


def 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.coloradmin.cn/o/911687.html

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

相关文章

CW6B-90A-RCW6B-100A-RCW6B-110A-RCW6B-115A-R三相三线式滤波器

CW6B-90A-RCW6B-100A-RCW6B-110A-RCW6B-115A-R三相三线式滤波器

CW4B-10A-S CW4B-20A-S CW4B-30A-S三相三线式滤波器 CW6B-50A-S CW6B-60A-S CW6B-70A-S CW6B-80A-S CW6B-90A-S CW6B-100A-S CW6B-250A-S三相三线式滤波器 CW12B-3A-S(005) CW12B-6A-S(005) CW12B-10A-S(005) CW12B-20A-S(005 CW12B-30A-S(005) CW12B-40A-S(005)三…
阅读更多...
代理池在过程中一直运行

代理池在过程中一直运行

Hey&#xff0c;爬虫达人们&#xff01;在爬虫的过程中&#xff0c;要保持代理池的稳定性可不容易。今天就来和大家分享一些实用经验&#xff0c;教你如何让代理池在爬虫过程中一直运行&#xff01;方法简单易行&#xff0c;让你的爬虫工作更顺畅. 在进行爬虫工作时&#xff0…
阅读更多...
VisualStudio创建项目模板教程

VisualStudio创建项目模板教程

简介 Visual Studio 项目模板是预先定义的项目结构和设置&#xff0c;可以帮助开发者快速启动新的项目。项目模板中可以包含预配置的文件、资源、设置和代码结构&#xff0c;这样开发者在创建新的项目时就不必从零开始。 以下是Visual Studio项目模板的一些核心点&#xff1a…
阅读更多...
HD Supply EDI 到 JSON 方案简介

HD Supply EDI 到 JSON 方案简介

本文将介绍与HD Supply进行EDI对接&#xff0c;通过调用知行之桥的Admin API及JSON格式来集成业务系统。 准备下载和运行 HD Supply EDI 到 JSON 使用 JSON 生成一系列 EDI 文档与 HD Supply 通信。 下载工作流 下载示例文件 HD Supply EDI到JSON示例流具有预配置的端口…
阅读更多...
二、3.中断

二、3.中断

中断上半部和下半部是什么&#xff1f; 操作系统是中断驱动的&#xff0c;中断发生后会执行相应的中断处理程序&#xff0c;我们希望 CPU 中断响应的时间越短越好&#xff0c;这样便能响应更多设备的中断。但是中断处理程序还是需要完整执行的&#xff0c;不能光为了提高中断响…
阅读更多...
数据结构（3）

数据结构（3）

线性表是多个具有相同特征的数据的有限序列。 前驱元素&#xff1a;A在B前面&#xff0c;称A为B的前驱元素。 后继元素&#xff1a;B在A后面&#xff0c;称B为A的后继元素。 线性表特征&#xff1a; 1.一个元素没有前驱元素&#xff0c;就是头结点&#xff1b; 2.最后一个…
阅读更多...
自己实现 SpringMVC 底层机制 系列之-实现任务阶段 5- 完成 Spring 容器对象的自动装配 -@Autowried

自己实现 SpringMVC 底层机制 系列之-实现任务阶段 5- 完成 Spring 容器对象的自动装配 -@Autowried

&#x1f600;前言 自己实现 SpringMVC 底层机制 系列之-实现任务阶段 5- 完成 Spring 容器对象的自动装配 -Autowried &#x1f3e0;个人主页&#xff1a;尘觉主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是尘觉&#xff0c;希望我的文章可以帮助到大家&…
阅读更多...
数据挖掘技术在智能外呼系统的应用探索

数据挖掘技术在智能外呼系统的应用探索

随着科技的不断发展&#xff0c;人们对于智能化的需求也日益增加&#xff0c;在企业获客领域&#xff0c;智能外呼系统应运而生。智能外呼系统是一种基于人工智能技术的客户服务系统&#xff0c;通过自动化的方式实现客户服务&#xff0c;提高客户满意度和企业效率。数据挖掘技…
阅读更多...
wifi高通驱动之WCNSS_qcom_cfg.ini以及MCS、空间流数的学习和记录

wifi高通驱动之WCNSS_qcom_cfg.ini以及MCS、空间流数的学习和记录

一、WCNSS_qcom_cfg.ini 这个文件说是可以调优wifi的带宽&#xff0c;还有MIMO技术 Android Wi-Fi MIMO/SISO设置方法&#xff08;基于高通平台&#xff09;_广凯的博客-CSDN博客 不是太了解&#xff0c;先记录一下&#xff0c;个人感觉MCS和MIMO技术最全的应该是下面的网址…
阅读更多...
Bigemap在地质工程勘察行业中的应用

Bigemap在地质工程勘察行业中的应用

Bigemap在地质工程勘察行业中的应用 选择Bigemap的原因&#xff1a; 师兄在测绘局工作&#xff0c;买过全能版&#xff0c;帮我下载过高程数据&#xff0c;我觉得效果可以&#xff0c;于是联系到软件公司进行试用、咨询 使用场景&#xff1a; 影像、等高线、地形等资料下载&…
阅读更多...
买空气净化器怎么选 空气净化器哪个牌子性价比高

买空气净化器怎么选 空气净化器哪个牌子性价比高

买空气净化器怎么选 空气净化器哪个牌子性价比高 空气净化器3个选购要点 空气净化器在如今的大气污染严重的环境下越来越受人们关注。然而&#xff0c;在市场上如此多的品牌和型号中&#xff0c;该如何选择一款适合自己的空气净化器呢&#xff1f;以下给出三个选购要点&#…
阅读更多...
【校招VIP】网络基础之cookie、session和storage

【校招VIP】网络基础之cookie、session和storage

考点介绍&#xff1a; cookie、session和localstorage 是目前常用的存储机制&#xff0c;不管是大厂还是中小公司&#xff0c;都会对这个问题有比较高的考察频度&#xff0c;而且有一定的深度和对比分析。 本期分享的网络基础之cookie、session和storage&#xff0c;分为试题、…
阅读更多...
HarmonyOS/OpenHarmony应用开发-ArkTS语言渲染控制LazyForEach数据懒加载

HarmonyOS/OpenHarmony应用开发-ArkTS语言渲染控制LazyForEach数据懒加载

LazyForEach从提供的数据源中按需迭代数据&#xff0c;并在每次迭代过程中创建相应的组件。当LazyForEach在滚动容器中使用了&#xff0c;框架会根据滚动容器可视区域按需创建组件&#xff0c;当组件划出可视区域外时&#xff0c;框架会进行组件销毁回收以降低内存占用。一、接…
阅读更多...
precision指标的average参数

precision指标的average参数

同样适用于recall、F1 分类任务种类 先说一下分类任务分几种&#xff0c;分类任务主要分为二分类、多分类和多标签这三种。 现在假设我们有一个样本&#xff0c;叫s 二分类是最常见的&#xff0c;将s分给A或B这两类。 多分类是将s分给A或B或C或更多的类别。 多标签是有A、B、…
阅读更多...
基于C++的QT实现贪吃蛇小游戏

基于C++的QT实现贪吃蛇小游戏

文章目录&#xff1a; 一&#xff1a;效果演示 二&#xff1a;实现思路 三&#xff1a;代码实现 widget.h widget.cpp main.cpp 一&#xff1a;效果演示 效果图◕‿◕✌✌✌ 代码下载 二&#xff1a;实现思路 通过按键控制蛇的移动&#xff0c;每吃一个商品蛇身就会加长…
阅读更多...
16.5.6 【Linux】一个网络服务案例及登录文件协助

16.5.6 【Linux】一个网络服务案例及登录文件协助

setroubleshoot --> 错误讯息写入 /var/log/messages 几乎所有 SELinux 相关的程序都会以 se 为开头&#xff0c;这个服务也是以 se 为开头。troubleshoot是错误克服&#xff0c;因此setroubleshoot要启动。这个服务会将关于 SELinux 的错误讯息与克服方法记录到 /var/log/…
阅读更多...
优化指南：带宽限制的可行策略

优化指南：带宽限制的可行策略

大家好&#xff01;作为一名专业的爬虫程序员&#xff0c;我们经常面临的一个挑战就是带宽限制。尤其是在需要快速采集大量数据时&#xff0c;带宽限制成为了我们提升爬虫速度的一大阻碍。今天&#xff0c;我将和大家分享一些解决带宽限制的可行策略&#xff0c;希望能帮助大家…
阅读更多...
问道管理：沪指失守3100点 机构判断“市场底”渐行渐近

问道管理：沪指失守3100点 机构判断“市场底”渐行渐近

8月21日&#xff0c;沪深两市股指盘中全线走低&#xff0c;三大股指收盘均跌超1%&#xff0c;其间沪指收盘指数今年以来初次失守3100点&#xff0c;创业板指更是3年多来初次跌破2100点。截至收盘&#xff0c;沪指跌1.24%报3092.98点&#xff0c;深证成指跌1.32%报10320.39点&am…
阅读更多...
ResizeObserver监听元素大小的变化

ResizeObserver监听元素大小的变化

window.resize不适用于dom的监听。 ResizeObserver ResizeObserver 接口监视 Element 内容盒或边框盒或者 SVGElement 边界尺寸的变化。 方法 ResizeObserver.disconnect() 取消特定观察者目标上所有对 Element 的监听。 ResizeObserver.observe() 开始对指定 Element 的监…
阅读更多...
NLP预训练模型超大规模探索

NLP预训练模型超大规模探索

总共从四方面来进行比较。 第一个方面&#xff0c;高层次方法&#xff08;自监督的预训练方法&#xff09;对比&#xff0c;总共三种方式。 语言模型式&#xff0c;就是 GPT-2 那种方式&#xff0c;从左到右预测&#xff1b;BERT-style 式&#xff0c;就是像 BERT 一样将一部…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023