server2008 iis 网站,政务公开与网站建设工作总结存在问题和困难,湖南省城乡和住房建设厅网站,设计工作室官网在《Django实现简单的音乐播放器 1》前期准备的基础上开始开发。 效果#xff1a; 目录
项目视图
创建视图方法
路由加载视图
加载模板
创建首页html文件
加载静态资源文件
加载静态文件
使用方法
启动服务器
加载数据表
创建表模型
生成表迁移
执行创建表
插入… 在《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, nameplayer),
] 加载模板
把找到的音乐播放器模板和静态文件加载进入项目。 创建首页html文件
在templates/player目录下创建index.html文件并把模板文件内容拷贝过来。 加载静态资源文件
转移模板文件中的js/css/image/mp3文件到static目录下的相应资源文件夹中
如下图 加载静态文件
修改模板中对静态资源文件的路径使用django中的静态资源加载方法 使用方法
模板顶部 {% load static %}
路径替换为
link relstylesheet 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_length20)singer models.CharField(max_length100)songUrl models.CharField(max_length180)imageUrl models.CharField(max_length180) 生成表迁移
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(rmedia_list, views.media_list, namemedia_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 i0; ires.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
} 总结
本篇主要加载静态模板并改为动态数据已经是一个简单的音乐播放器了可以播放和切换歌曲只是新添加歌曲需要自己手动添加数据表和媒体文件。
