Django implémente un simple lecteur de musique 2

from django.shortcuts import render


# Create your views here.

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

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

vue de chargement d'itinéraire

Introduire la vue et ajouter la méthode d'indexation dans la vue d'accès au routage

from django.urls import path
from . import views


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

modèle de charge

Chargez le modèle de lecteur de musique trouvé et les fichiers statiques dans le projet.

Créer le fichier html de la page d'accueil

Créez un fichier index.html dans le répertoire templates/player et copiez le contenu du fichier modèle.

Charger les fichiers de ressources statiques

Transférez les fichiers js/css/image/mp3 du fichier de modèle vers le dossier de ressources correspondant dans le répertoire statique

Comme indiqué ci-dessous:

charger des fichiers statiques

Modifiez le chemin d'accès au fichier de ressources statiques dans le modèle et utilisez la méthode de chargement des ressources statiques dans Django

Instructions

modèle haut {% charge statique %}

chemin remplacé par

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

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

démarrer le serveur

python manage.py runserver

charger la table de données

Créer un modèle de tableau

Créez un modèle de table unique dans models.py sous le répertoire du projet du lecteur.

Le contenu est le suivant :

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)

générer la migration de table

python manage.py makemigrations

Exécuter la création de table

python manage.py migrate

insérer des données de table

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

Remarque : Les chansons et les fichiers d'image de chanson ont été placés dans les dossiers de ressources statiques correspondants et ne seront pas décrits séparément.

lire la liste des chansons

voir

La vue demande au modèle de données d'obtenir une liste de toutes les informations sur la chanson et la renvoie au format 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})

paramètres de routage

Ajouter des paramètres de routage de liste

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

demander la liste des chansons

Modifiez la liste de chansons fixe dans la classe de chansons player.js pour obtenir les données de la vue via la route, ou appelez-la via le constructeur.

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

Résumer

Cet article charge principalement des modèles statiques et les transforme en données dynamiques. Il s'agit déjà d'un simple lecteur de musique capable de lire et de changer de chanson, mais vous devez ajouter manuellement des tables de données et des fichiers multimédias pour ajouter de nouvelles chansons.