Чтобы подключить вашу UserModel к Frontend, нам нужно передать sh данные (music_id) из UI в бэкэнд.
Если вы хотите сделать это с помощью django -template, вы можете использовать django -forms.
https://docs.djangoproject.com/en/3.0/topics/forms/
Однако вы хотите go на каком-то событии, таком как щелчок, следующие шаги ...
для этого требуется несколько вещей.
- Список желаний дополнительная модель, необходимая для хранения списка желаний c
- views.py для проверки ввода и сохранения списка желаний
- url-адрес диспетчера -> просмотры (лог. Вашего бизнеса c) -> модели (сохраните данные, список желаний в вашем случае)
- пост-вызов django -бэкэнд (с использованием ajax, поскольку вы хотите использовать сохраненные данные при нажатии на значок)
1. Описание модели
class Music(models.Model):
Name = models.CharField(max_length=100, blank=False)
Year = models.IntegerField(('year'), choices=YEAR_CHOICES, default=datetime.datetime.now().year)
Genre = MultiSelectField(choices=GENRE_CHOICES)
Image = models.ImageField(blank=False, null=True)
def __str__(self):
return self.Name
class WishlistMusic(models.Model):
## this can be depend on your choice eg (user_id, guest_id etc)
some_id = models.IntegerField(('some_id'))
## relation to Music
music = models.ForeignKey(Music, on_delete=models.DO_NOTHING)
2. views.py
from music.models import Music, WishlistMusic
from django.core.exceptions import ObjectDoesNotExist
from django.http import HttpResponse
from django.views.decorators.csrf import csrf_exempt
@csrf_exempt
def wishlist(request):
music_id = request.POST.get('music_id')
if not music_id:
raise ValueError("Required music_id to set wishlist")
## can be set user id once authentication is set
##some_id = request.user.pk
some_id = 3 ## Say
try:
music = Music.objects.get(pk=music_id)
wishlist_obj = {
'some_id': some_id,
'music': music
}
WishlistMusic(**wishlist_obj).save()
except ObjectDoesNotExist:
## Your action
## raise or Return HTTP response with failure status_code
return HttpResponse('Some error occured, unable to add to wishlist') ## or can set for render
return HttpResponse('Added to wishlist') ## or can set for render
@ csrf_exempt используется, потому что мы собираемся выполнять вызов POST, используя ajax, django -provide защиту от подделки межсайтовых запросов, однако не рекомендуется использовать @csrf_exempt в производственная среда. подробнее на https://docs.djangoproject.com/en/3.0/ref/csrf/
3. URL-Dispatcher / Path здесь у нас есть модель и представления в приложении musi c, поэтому ниже urls.py для перенаправления / musi c url to musi c app url
для refr. моя структура проекта как 
proj_name -> music_track
from django.contrib import admin
from django.urls import path, include
from music import urls as music_urls
urlpatterns = [
path('admin/', admin.site.urls),
path('music/', include(music_urls)),
]
music/urls.py
from django.contrib import admin
from django.urls import path
from music import views
urlpatterns = [
path('mymusic/', views.home), ## IP:PORT/mymusic your homepage
path('wishlist/', views.wishlist), ## IP:PORT/mymusic your post api to save wishlist
]
4. POST API call from front-end to django.
js
$(document).ready(function(){
$(".like").click(function(){
$(this).toggleClass("heart");
var pk = $(this).find('input[id="abc"]').val();
var data = {
'music_id': pk
};
$.ajax({
type: 'POST',
url: '../wishlist/',
data: data,
success: function(json) {
alert(json); // your actions after save, you can just pop-up some ui element that added to wishlist
}
})
});
});
I just added one ui element (inside like class span) in html to hold the primary key of music which is required to add wishlist in model since we set music_id set as foreign key in WishlistMusic model.
.html
........
{{m.Name}} {{m.Genre}} aa .......
Ниже приведены ссылки, по которым вы можете go получить более подробную информацию
https://simpleisbetterthancomplex.com/tutorial/2016/08/29/how-to-work-with-ajax-request-with-django.html https://docs.djangoproject.com/en/3.0/ref/urls/