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

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

news 2025/8/25 11:07:42

在《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
}