Django implementa un sencillo reproductor de música 2

from django.shortcuts import render


# Create your views here.

def index(request):
    """ 展示音乐播放器 """

    return render(request, 'player/index.html')

vista de carga de ruta

Introduzca la vista y agregue el método de índice en la vista de acceso de enrutamiento

from django.urls import path
from . import views


urlpatterns = [
    path(r'', views.index, name='player'),
]

cargar plantilla

Cargue la plantilla del reproductor de música encontrada y los archivos estáticos en el proyecto.

Crear archivo html de la página de inicio

Cree un archivo index.html en el directorio templates/player y copie el contenido del archivo de plantilla.

Cargar archivos de recursos estáticos

Transfiera los archivos js/css/image/mp3 en el archivo de plantilla a la carpeta de recursos correspondiente en el directorio estático

Como se muestra abajo:

cargar archivos estáticos

Modifique la ruta al archivo de recursos estáticos en la plantilla y use el método de carga de recursos estáticos en django

Instrucciones

parte superior de la plantilla {% carga estática%}

ruta reemplazada por

<link rel="stylesheet" href="{% static 'css/iconfont.css' %}">

<script src="{% static 'js/utill.js' %}"></script>

servidor de inicio

python manage.py runserver

cargar tabla de datos

Crear modelo de tabla

Cree un modelo de tabla única en models.py en el directorio del proyecto del reproductor.

El contenido es el siguiente:

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)

generar migración de tabla

python manage.py makemigrations

Ejecutar crear tabla

python manage.py migrate

insertar datos de tabla

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');

Nota: Las canciones y los archivos de imágenes de canciones se han colocado en las carpetas de recursos estáticos correspondientes y no se describirán por separado.

reproducir lista de canciones

vista

La vista solicita el modelo de datos para obtener una lista de toda la información de la canción y la devuelve en formato 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})

configuración de enrutamiento

Agregar configuración de enrutamiento de lista

path(r'media_list', views.media_list, name='media_list'),

solicitar lista de canciones

Cambie la lista de canciones fijas en la clase de canciones player.js para obtener los datos de la vista a través de la ruta, o llámelos a través del constructor.

// 获取歌曲列表
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
}

Resumir

Este artículo carga principalmente plantillas estáticas y las cambia a datos dinámicos. Ya es un reproductor de música simple que puede reproducir y cambiar canciones, pero necesita agregar manualmente tablas de datos y archivos multimedia para agregar nuevas canciones.