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