如何在Javascript中循环Django Queryset



如何在javascript中循环Django模型查询集。我有一个音乐播放器,使用javascript和'trackUrl'变量在javascript中列出的轨道路径,我需要能够循环通过每个用户上传的轨道,并将它们加载到每个用户的播放器。我基本上需要为每个用户从Music模型中取出曲目。

希望这是有意义的,这是我现在的一些代码。

models.py

class Music(models.Model):
track = models.FileField(upload_to='path/to/audio')
title = models.TextField(max_length=50)
artwork = models.ImageField(upload_to='path/to/img', blank=True)
artist = models.ForeignKey(User, on_delete=models.CASCADE)
def __str__(self):
return self.title

music.js

<script>
$(function()
{
var playerTrack = $("#player-track"), bgArtwork = $('#bg-artwork'), bgArtworkUrl,
albumName = $('#album-name'), trackName = $('#track-name'), albumArt = $('#album-art'),
sArea = $('#s-area'), seekBar = $('#seek-bar'), trackTime = $('#track-time'), insTime = $('#ins-time'),
sHover = $('#s-hover'), playPauseButton = $("#play-pause-button"),  i = playPauseButton.find('i'), 
tProgress = $('#current-time'), tTime = $('#track-length'), seekT, seekLoc, seekBarPos, cM, ctMinutes, 
ctSeconds, curMinutes, curSeconds, durMinutes, durSeconds, playProgress, bTime, nTime = 0, buffInterval = null, 
tFlag = false, albums = ['Dawn','Me & You','Electro Boy','Home','Proxy (Original Mix)'], 
trackNames = ['Skylike - Dawn','Alex Skrindo - Me & You','Kaaze - Electro Boy','Jordan Schor - Home','Martin Garrix - Proxy'], 
albumArtworks = ['_1','_2','_3','_4','_5'], trackUrl = 
['https://raw.githubusercontent.com/music-player-1/master/music/2.mp3',
'https://raw.githubusercontent.com/music-player-1/master/music/1.mp3',
'https://raw.githubusercontent.com/music-player-1/master/music/3.mp3',
'https://raw.githubusercontent.com/music-player-1/master/music/4.mp3',
'https://raw.githubusercontent.com/music-player-1/master/music/5.mp3'], 
playPreviousTrackButton = $('#play-previous'), playNextTrackButton = $('#play-next'), currIndex = -1;
function playPause()
{

Django REST框架创建了一个api,允许前端与模型交互。因此,在设置django rest框架之后,你可以使用axios之类的东西向API发出请求并获取你的模型数据。

或者,你可以在views.py中创建一个自定义视图函数,它可以获取你需要的模型数据,然后将其自定义为JavaScript可用的格式(例如json格式),然后返回该数据。然后在客户端,你只需用axios向你刚创建的视图函数发出请求它就会发送json数据给你。

最新更新