在《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 views
urlpatterns = [
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.list
for (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
}总结
本篇主要加载静态模板并改为动态数据，已经是一个简单的音乐播放器了，可以播放和切换歌曲，只是新添加歌曲需要自己手动添加数据表和媒体文件。
