在原有音乐播放器上请求方式优化和增加加载本地音乐功能。
效果：
目录
播放列表优化
设置csrf_token
前端改为post请求
视图端增加post验证
加载歌曲
视图
设置路由
模板
加载layui css
加载layui js
增加功能列表
功能列表脚本实现
最终效果
总结
播放列表优化
原有get请求改为post请求。
设置csrf_token
在body标签中设置csrf_token标签
{% csrf_token %}前端改为post请求
在原来player.js歌曲类基础上把歌曲列表变量改为ajax通过后端接口获取，在歌曲类构造函数中调用设置歌曲信息列表。
注意：因为使用post请求，需要加载django csrf token，否则会出现403响应。
// 获取歌曲列表
getSongs(){
let mp3list = [];
let csrf = $('input[name="csrfmiddlewaretoken"]').val();
$.ajax({
type: 'POST',
url: "/media_list",
data: {id: 1, csrfmiddlewaretoken: csrf},
dataType: 'json',
success: function (data) {
mp3list = data.list;
// 将mp3list赋值给this.songs
this.songs = mp3list;
// 调用渲染歌曲列表的方法
this.renderSongList();
}.bind(this),
error: function (e) {
console.log("ERROR : ", e);
}
});
}视图端增加post验证
from django.views.decorators.http import require_http_methods
@require_http_methods(['POST'])
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})加载歌曲
在原有基础上增加加载歌曲功能，原来需要手动把歌曲信息添加数据库，修改后可以把歌曲放入static/media目录后，点击播放器的加载歌曲功能即可添加相应歌曲到数据库中。
视图
查找资源目录下所有歌曲信息，加载导入不重复的歌曲信息。
def load_music(request):
""" 加载本地的歌曲 """
# 项目路径
app_path = os.path.abspath(os.path.dirname(__file__))
# 获取媒体资源目录下所有歌曲文件
path = app_path + '/../static/media/'
files = os.listdir(path)
for file in files:
print(insert_music(file))
return HttpResponse('加载本地音乐成功！')
def insert_music(name):
""" 把歌曲信息插入数据表 """
# 查询歌曲是否存在
info = Single.objects.filter(title=name).first()
if info:
return True
ext = 'mp3'
# 判断文件后缀
fileInfo = name.split('.')
if len(fileInfo) != 2:
return False
if fileInfo[1] != ext:
return False
single = Single()
single.title = name
signers = name.split('-')
single_1 = signers[1].strip('') if len(signers) > 1 else ''
single.singer = single_1.strip('.mp3')
single.songUrl = '/static/media/' + name
# 随机1-10专辑封面图片
sui_num = random.randint(1, 10)
single.imageUrl = '/static/images/' + str(sui_num) + '.png'
return single.save()设置路由
path(r'load_music', views.load_music, name='load_music'),模板
加载layui css
<link rel="stylesheet" type="text/css" media="screen"
href="{% static 'css/layui.css' %}">加载layui js
<script src="{% static 'js/layui.js' %}"></script>增加功能列表
在播放器主体中模糊背景下增加功能列表
<!-- 模糊背景 -->
<div class="music-player__blur" style="background-image: url("/static/images/c.jpg");"></div>
<!-- 导入本地歌曲 -->
<div class="music-find_list layui-btn-container">
<span id="btn_list" class="layui-icon layui-icon-app demo1"></span>
</div>功能列表脚本实现
<script>
layui.use(['dropdown', 'util', 'layer', 'table'], function(){
var dropdown = layui.dropdown
,util = layui.util
,layer = layui.layer
,$ = layui.jquery;
//初演示
dropdown.render({
elem: '.demo1'
,data: [{
title: '加载歌曲'
,id: 100
}]
,click: function(obj){
loadMusic()
//layer.tips('点击了：'+ obj.title, this.elem, {tips: [1, '#5FB878']})
}
});
// 请求接口 导入歌曲到数据库
function loadMusic() {
$.ajax({
type: 'GET',
url: "/load_music",
data: {id:1},
success: function (data) {
layer.alert(data, {icon: 1})
}.bind(this),
error: function (e) {
console.log("ERROR : ", e);
}
});
}
})
</script>效果
最终效果
启动服务器后通过浏览器访问，歌曲可播放并可切换相应歌曲；
还可以通过功能列表加载本地歌曲。
项目源码：
链接：https://pan.baidu.com/s/1OgqJRMObzZWY4MOwVYdScg
提取码：v53n
总结
本来打算做一个较为复杂的web 音乐播放网站，因为最近工作比较忙，于是先做一个简单的播放器练练手。主要实现一个简单的音乐播放器功能，因为时间关系，所以直接找现成的音乐播放器模板通过django改活，这样效果也比较好看一点。音乐播放器的基本功能都已实现。
