当前位置: 首页 > news >正文

Django实现简单的音乐播放器 2

 在《Django实现简单的音乐播放器 1》前期准备的基础上开始开发。

 效果:

目录

项目视图

创建视图方法

路由加载视图

加载模板

创建首页html文件

加载静态资源文件

加载静态文件

使用方法

启动服务器

加载数据表

创建表模型

生成表迁移

执行创建表

插入表数据

播放歌曲列表

视图

路由设置

请求歌曲列表

总结


 

项目视图

创建视图方法

在player中的views.py中创建显示播放器的视图方法

from django.shortcuts import render# Create your views here.def index(request):""" 展示音乐播放器 """return render(request, 'player/index.html')

路由加载视图

引入视图,增加路由访问视图中的index方法

from django.urls import path
from . import viewsurlpatterns = [path(r'', views.index, name='player'),
]

加载模板

把找到的音乐播放器模板和静态文件加载进入项目。

创建首页html文件

在templates/player目录下创建index.html文件,并把模板文件内容拷贝过来。

加载静态资源文件

转移模板文件中的js/css/image/mp3文件到static目录下的相应资源文件夹中

如下图:

 

加载静态文件

修改模板中对静态资源文件的路径,使用django中的静态资源加载方法

使用方法

模板顶部 {% load static %}

路径替换为

<link rel="stylesheet" href="{% static 'css/iconfont.css' %}"><script src="{% static 'js/utill.js' %}"></script>

启动服务器

python manage.py runserver

加载数据表

创建表模型

在player工程目录下的models.py中创建单曲表模型。

内容如下:

from django.db import models# Create your models here.
class Single(models.Model):""" 歌曲表模型 """title = models.CharField(max_length=20)singer = models.CharField(max_length=100)songUrl = models.CharField(max_length=180)imageUrl = models.CharField(max_length=180)

生成表迁移

python manage.py makemigrations

执行创建表

python manage.py migrate

插入表数据

INSERT INTO `mymp3`.`player_single` (`id`, `title`, `singer`, `songUrl`, `imageUrl`) VALUES (1, '123木头人 - 黑Girl.mp3', ' 黑Girl', '/static/media/123木头人 - 黑Girl.mp3', '/static/images/1.png');INSERT INTO `mymp3`.`player_single` (`id`, `title`, `singer`, `songUrl`, `imageUrl`) VALUES (2, 'Bazzaya - 蔡妍.mp3', ' 蔡妍', '/static/media/Bazzaya - 蔡妍.mp3', '/static/images/2.png');INSERT INTO `mymp3`.`player_single` (`id`, `title`, `singer`, `songUrl`, `imageUrl`) VALUES (3, 'Fade - Alan Walker.mp3', ' Alan Walker', '/static/media/Fade - Alan Walker.mp3', '/static/images/3.png');INSERT INTO `mymp3`.`player_single` (`id`, `title`, `singer`, `songUrl`, `imageUrl`) VALUES (4, 'lemon tree[中文版] - 王若琳.mp3', ' 王若琳', '/static/media/lemon tree[中文版] - 王若琳.mp3', '/static/images/4.png');INSERT INTO `mymp3`.`player_single` (`id`, `title`, `singer`, `songUrl`, `imageUrl`) VALUES (5, 'Lil Mama - Jain.mp3', ' Jain', '/static/media/Lil Mama - Jain.mp3', '/static/images/5.png');INSERT INTO `mymp3`.`player_single` (`id`, `title`, `singer`, `songUrl`, `imageUrl`) VALUES (6, '也许是爱!- 蔡妍.mp3', ' 蔡妍', '/static/media/也许是爱!- 蔡妍.mp3', '/static/images/6.png');

注意:歌曲和歌曲图片文件已放置在static相应资源文件夹中,不在单独说明。

播放歌曲列表

视图

视图请求数据模型获取所有歌曲信息列表,并返回json格式

def media_list(request):""" MP3音乐列表 """mediaList = Single.objects.all()arr = []for item in mediaList:arr.append({'id': item.id,'title': item.title,'singer': item.singer,'songUrl': item.songUrl,'imageUrl': item.imageUrl,})return JsonResponse({'list': arr})

路由设置

增加列表路由设置

path(r'media_list', views.media_list, name='media_list'),

请求歌曲列表

把player.js歌曲类中固定的歌曲列表改为通过路由获取视图的数据,还是通过构造函数调用。

// 获取歌曲列表
getSongs() {let mp3list = [{id: 1,title: '! (也许是爱!) - 蔡妍',singer: '蔡妍',songUrl: '/static/media/! (也许是爱!) - 蔡妍.mp3',imageUrl: '/static/images/1.png'}]$.getJSON('/media_list', {}, function(data, msg) {let res = data.listfor (let i=0; i<res.length; i++) {mp3list[i] = {id:res[i].id,title:res[i].title,singer:res[i].singer,songUrl:res[i].songUrl,imageUrl:res[i].imageUrl}}})this.songs = mp3list
}

总结

本篇主要加载静态模板并改为动态数据,已经是一个简单的音乐播放器了,可以播放和切换歌曲,只是新添加歌曲需要自己手动添加数据表和媒体文件。

相关文章:

Django实现简单的音乐播放器 2

在《Django实现简单的音乐播放器 1》前期准备的基础上开始开发。 效果&#xff1a; 目录 项目视图 创建视图方法 路由加载视图 加载模板 创建首页html文件 加载静态资源文件 加载静态文件 使用方法 启动服务器 加载数据表 创建表模型 生成表迁移 执行创建表 插入…...

OpenCV 入门教程:图像读取和显示

OpenCV 入门教程&#xff1a;图像读取和显示 导语一、图像读取1.1、导入 OpenCV 库1.2、读取图像文件1.3、图像读取的返回值 二、图像显示2.1、创建窗口2.2、图像显示2.3、等待按键2.4、关闭窗口 三、示例应用总结 导语 在计算机视觉和图像处理领域&#xff0c;读取和显示图像…...

什么是GPT?

文章目录 1、什么是GPT&#xff1f;2、gpt版本时间线3、我们能用GPT做什么&#xff1f;4、如何快速体验GPT&#xff1f;5、作为一名开发者&#xff0c;如何在代码中使用GPT&#xff1f;6、如何在现有项目中使用和部署GPT&#xff1f;7、GPT的优缺点&#xff1f;8、对于人工智能…...

如何通过浏览器配置哪些网页不走代理服务器,Lantern开启后部分网页打不开了

浏览器点设置 > 搜索“代理” > “打开计算机的代理设置” > 编辑“使用代理服务器” 搜索“代理” > “打开计算机的代理设置” > 编辑“使用代理服务器”&#xff0c;将不用代理的url链接域名写进来&#xff0c;点击保存。然后刷新打不开的网页&#xff0c;…...

Redis常见面试题

什么是Redis持久化&#xff1f;Redis有哪几种持久化方式&#xff1f;优缺点是什么 把redis内存中的数据持久化到磁盘的过程就是redis持久化。RDB:快照存储&#xff0c;每隔一段时间对redis内存中的数据进程快照存储。优点:恢复数据快 缺点:数据完整性差 AOF:日志追加 把每个写…...

应用零信任原则:案例研究和现场经验教训

随着云架构、软件即服务和分布式劳动力日益成为当今现代组织的主导现实&#xff0c;零信任安全模型已成为首选安全范例。 因此&#xff0c;描述零信任安全原则以及构成零信任架构 (ZTA) 的组件的出版物和资源数量几乎令人瘫痪。该行业缺乏的是一个多样化的示例库&#xff0c;可…...

RabbitMQ系列(14)--Topics交换机的简介与实现

1、Topics交换机的介绍 Topics交换机能让消息只发送往绑定了指定routingkey的队列中去&#xff0c;不同于Direct交换机的是&#xff0c;Topics能把一个消息往多个不同的队列发送&#xff1b;Topics交换机的routingkey不能随意写&#xff0c;必须是一个单词列表&#xff0c;并以…...

解决PyInstaller打包selenium脚本时弹出driver终端窗口

解决PyInstaller打包selenium脚本时弹出driver终端窗口 找到service.py C:\Users\XXX\AppData\Roaming\Python\Python39\site-packages\selenium\webdriver\common\service.py添加creationflags 在第77行添加: creationflags134217728使用PyInstaller打包 pyinstaller -F -w -…...

基于卷积神经网络VGG的猫狗识别

&#xff01;有需要本项目的实验源码的可以私信博主&#xff01; 摘要&#xff1a;随着大数据时代的到来&#xff0c;深度学习、数据挖掘、图像处理等已经成为了一个热门研究方向。深度学习是一个复杂的机器学习算法&#xff0c;在语音和图像识别方面取得的效果&#xff0c;远远…...

mysql查询语句练习总结(涵盖所有sql语法)

最近在学习SQL嘛,所以各个地方找题目来练手,毕竟现在能离得开数据库么? Student(S#,Sname,Sage,Ssex) 学生表 Course(C#,Cname,T#) 课程表 SC(S#,C#,score) 成绩表 Teacher(T#,Tname) 教师表 问题&#xff1a; 1、查询“001”课程比“002”课程成绩高的所有学生的学号&#x…...

TypeScript 中 any、unknown、never 和 void 有什么区别?

一 unknown: 未知类型 unknown: 未知类型是typescript 3.0 中引入的新类型。 1.1 所有类型的字面量都可以分配给unknown类型 unknown未知类型&#xff0c;代表变量类型未知&#xff0c;也就是可能为任意类型&#xff0c;所以&#xff0c; 所有类型的字面量都可以分配给unkno…...

算法Day60 | 84.柱状图中最大的矩形,刷题总结

Day60 84.柱状图中最大的矩形刷题总结 84.柱状图中最大的矩形 题目链接&#xff1a;84.柱状图中最大的矩形 遍历每个元素&#xff0c;找到左右元素小于当前元素的&#xff0c;以左右元素间的区间&#xff08;左开右开区间&#xff09;所围成的面积中的最大值。 数组尾部加一个…...

python实现pdf转换为word文档,尽量保持格式不变

from pdf2docx import Converterdef convert_pdf_to_word(pdf_path, docx_path, font_path):# 创建 pdf2docx.Converter 对象&#xff0c;用于进行 PDF 到 Word 文档的转换操作。cv Converter(pdf_path)# 设置系统默认字体文件的路径cv.font_path font_path# docx_path 转换…...

TCP / IP 网际层的 4 个重要协议

TCP / IP 网际层的 4 个重要协议 TCP/IP&#xff08;Transmission Control Protocol/Internet Protocol&#xff09;是一组用于互联网通信的协议。其中&#xff0c;网际层&#xff08;Internet Layer&#xff09;是TCP/IP协议栈中的一个关键层&#xff0c;主要负责网络间的数据…...

MySQL阶段DAY20(附笔记)

【注意】&#xff1a;工厂模式学习知识结构如下&#xff1a; &#xff08;一&#xff09;、单例模式 1.Single类&#xff1a; 使用懒汉式&#xff1a;对象的延迟加载&#xff0c;安全的&#xff0c;高效的应用 双重判断提升效率和安全性 package singleton;/** 单例设计模式之…...

考场作弊行为自动抓拍告警算法 yolov7

考场作弊行为自动抓拍告警系统通过yolov7python网络模型算法&#xff0c;考场作弊行为自动抓拍告警算法实时监测考场内所有考生的行为&#xff0c;对考生的行为进行自动抓拍&#xff0c;并分析判断是否存在作弊行为。YOLOv7 的发展方向与当前主流的实时目标检测器不同&#xff…...

在Linux中安装RabbitMQ

RabbitMQ下载网址 Socat下载网址 erlang下载网址 RabbitMQ安装包依赖于Erlang语言包的支持&#xff0c;所以需要先安装Erlang语言包&#xff0c;再安装RabbitMQ安装包 通过Xftp软件将这三个压缩包上传到linux中的opt目录下 ,双击即可 在安装之前先查询…...

electron 单个实例控制以及日志输出

electron 单个实例控制 在使用electron打包的应用程序的时候&#xff0c;点击应用图标会打开多个实例&#xff0c;要想控制单个实例&#xff0c;需要通过 app.requestSingleInstanceLock() 判断当前程序的实例是否为当前取得锁&#xff0c; 或者说&#xff0c; 当前实例是否为…...

基于matlab使用AprilTag标记进行相机校准(附源码)

一、前言 AprilTags被广泛用作物体检测、定位应用的视觉标记&#xff0c;并作为相机校准的目标。AprilTags类似于QR码&#xff0c;但旨在编码更少的数据&#xff0c;因此可以更快地解码&#xff0c;这对于实时机器人应用程序非常有用。使用 AprilTags 作为校准模式的优点包括更…...

计算机网络————运输层

文章目录 概述UDPTCP首部格式 连接管理连接建立连接释放 概述 从IP层看&#xff0c;通信双方是两个主机。 但真正进行通信的实体是在主机中的进程&#xff0c;是这个主机中的一个进程和另一个主机中的一个进程在交换数据。 所以严格的讲&#xff0c;两个主机进行通信就是两个…...

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

多模态2025:技术路线“神仙打架”,视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

IGP(Interior Gateway Protocol,内部网关协议)

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

重启Eureka集群中的节点,对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

免费PDF转图片工具

免费PDF转图片工具 一款简单易用的PDF转图片工具&#xff0c;可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件&#xff0c;也不需要在线上传文件&#xff0c;保护您的隐私。 工具截图 主要特点 &#x1f680; 快速转换&#xff1a;本地转换&#xff0c;无需等待上…...

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...

Webpack性能优化:构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...

日常一水C

多态 言简意赅&#xff1a;就是一个对象面对同一事件时做出的不同反应 而之前的继承中说过&#xff0c;当子类和父类的函数名相同时&#xff0c;会隐藏父类的同名函数转而调用子类的同名函数&#xff0c;如果要调用父类的同名函数&#xff0c;那么就需要对父类进行引用&#…...

uniapp 实现腾讯云IM群文件上传下载功能

UniApp 集成腾讯云IM实现群文件上传下载功能全攻略 一、功能背景与技术选型 在团队协作场景中&#xff0c;群文件共享是核心需求之一。本文将介绍如何基于腾讯云IMCOS&#xff0c;在uniapp中实现&#xff1a; 群内文件上传/下载文件元数据管理下载进度追踪跨平台文件预览 二…...