Добавление элементов в список желаний | Django

#javascript #python #html #css #django

#javascript #python #HTML #css #django

Вопрос:

У меня есть эта система, в которой я хочу добавить функцию избранного, где, когда кто-то нажимает на кнопку «Мне нравится» на карточке, она сохраняется и отображается в port/wishlist.html но я не в состоянии решить эту проблему, вот мой репозиторий Github и некоторые основные коды.

изображение домашней страницы

models.py

 from django.db import models
from django.contrib.auth.models import User
import datetime

YEAR_CHOICES = []
for r in range(1980, (datetime.datetime.now().year   1)):
    YEAR_CHOICES.append((r, r))

class Music(models.Model):
    song = models.CharField(max_length=50, blank=False)
    pic = models.ImageField(blank=False, null=True)
    published_year = models.IntegerField(('year'), choices=YEAR_CHOICES, default=datetime.datetime.now().year)
    description = models.CharField(max_length=80)

    def __str__(self):
        return self.song

class Wishlist(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE,null=True)
    music = models.ForeignKey(Music, on_delete=models.DO_NOTHING)
  

views.py

 @login_required
def liked(request):
    if request.method == "POST":
        if user.is_authenticated:
            # takes in the specific card id that is been liked and saves it and displays on Port/wishlist.html
            music.save()
        else:
            return HttpResponse("Your card is Invalid")
    else:
        return HttpResponse("Your request is Invalid")

    return render(request, template_name='main/wishlist.html', context={"wishlist": Wishlist.objects.all})
  

like.js

 $(document).ready(function(){
    $(".like").click(function(){
        $(this).toggleClass("heart");
    });
});
  

Ответ №1:

Я бы предложил сделать что-то вроде этого: здесь мы создаем новый URL для добавления в список желаний ( add_to_wishlist ). like.js Передаю music_id через ajax с POST помощью.Если пользователь входит в систему, то отображайте желаемый продукт пользователя в виде красного сердечка. И вы можете показать желаемый продукт по ссылке в шаблоне. Вы можете понять все остальные пункты моего кода. Пожалуйста, попробуйте это. Спасибо.

urls.py

 from django.urls import path
from main import views

app_name = 'main'

urlpatterns = [
    path('', views.home, name='home'),
    path('signup/', views.signup, name='signup'),
    path('wishlist/', views.liked, name='liked'),
    path('login/', views.login_req, name='login'),
    path('logout/', views.logout_req, name='logout'),
    path('add-to-wishlist/', views.add_to_wishlist, name='add_to_wishlist'), # For add to wishlist
]
  

views.py

 def home(request):
    wishlisted_list =[]
    if request.user.is_authenticated:
        wishlisted_list = list(Wishlist.objects.filter(user_id=request.user).values_list('music_id',flat=True).order_by('music_id'))
    return render(request, template_name='main/home.html', context={"music": Music.objects.all(),'wishlisted_list':wishlisted_list})

@login_required
def liked(request):
    wishlist = {}
    if request.method == "GET":
        if request.user.is_authenticated:
            wishlist = Wishlist.objects.filter(user_id_id=request.user.pk)
        else:
            print("Please login")
            return HttpResponse("login")

    return render(request, template_name='main/wishlist.html', context={"wishlist": wishlist})

@login_required
def add_to_wishlist(request):
    if request.is_ajax() and request.POST and 'attr_id' in request.POST:
        if request.user.is_authenticated:
            data = Wishlist.objects.filter(user_id_id = request.user.pk,music_id_id = int(request.POST['attr_id']))
            if data.exists():
                data.delete()
            else:
                Wishlist.objects.create(user_id_id = request.user.pk,music_id_id = int(request.POST['attr_id']))
    else:
        print("No Product is Found")

    return redirect("main:home")
  

like.js

 $(document).ready(function(){
    $(".like").click(function(){
        var attr_id = $(this).attr('attr_id')
        var action_url = $(this).attr('action_url')
        var that = $(this)

        $.ajax({
            url: action_url,
            type: "POST",
            data: {'attr_id': attr_id },
            headers: { "X-CSRFToken": $.cookie("csrftoken") },
            success: function (result) {
                console.log("Success")
                that.toggleClass("heart");
            },
            error: function () {
                alert("Please login");
            }
            
        });
    });
});
  

home.html

 {% load static %}
<link rel="stylesheet" href="{% static 'main/home.css' %}" type="text/css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV i/6YWSzkz3V" crossorigin="anonymous">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Hey there,
{% if user.is_authenticated %}
<h1>{{user.username}}</h1>
{% else %}
<h1>unknown</h1>
{% endif %}
<a href="{% url 'main:liked' %}" >Wishlist</a>

<section class="cards">
    {% for m in music %}

    <div class="card">

        <div class="top">
            <div class="label1">{{m.song}}</div>
            {% if m.pk in wishlisted_list %}
            {% for i in wishlisted_list %}
            {% if m.pk is i %}
            <span class="like heart" id="id" attr_id="{{m.pk}}" action_url="{% url 'main:add_to_wishlist' %}"><i class="fa fa-heart"></i></span>
            {% endif %}
            {% endfor %}
            {% else %}
            <span class="like" id="id" attr_id="{{m.pk}}" action_url="{% url 'main:add_to_wishlist' %}"><i class="fa fa-heart"></i></span>
            {% endif %}
        </div>


        <div class="middle">
            <a href="https://google.com" id="link" target="_blank">
                <div class="img-container"><img src="{{ m.pic.url }}"></div>
            </a>
        </div>

        <a href="https://google.com" id="link" target="_blank">
            <div class="bottom">
                <div class="label4">{{m.description}}</div>
            </div>
        </a>

    </div>
    {% endfor %}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="{% static 'main/js/like.js' %}" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
</section>
  

wishlist.html

 {% load static %}
<link rel="stylesheet" href="{% static 'main/home.css' %}" type="text/css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV i/6YWSzkz3V" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Hey there,
{% if user.is_authenticated %}
<h1>{{user.username}}</h1>
{% else %}
<h1>unknown</h1>
{% endif %}
<a href="{% url 'main:home' %}" >Go to Home</a>
<section class="cards">
    {% if wishlist %}
    {% for m in wishlist %}
    <div class="card">
        <div class="top">
            <div class="label1">{{m.music_id}}</div>
            <span class="like" id="id" attr_id="{{m.music_id.pk}}" action_url="{% url 'main:add_to_wishlist' %}"></span>
        </div>
        <div class="middle">
            <a href="https://google.com" id="link" target="_blank">
                <div class="img-container"><img src="{{ m.music_id.pic.url }}"></div>
            </a>
        </div>
        <a href="https://google.com" id="link" target="_blank">
            <div class="bottom">
                <div class="label4">{{m.music_id.description}}</div>
            </div>
        </a>
    </div>
    {% endfor %}
    {% else %}
    <div class="card">
        <div class="middle">
            <div class="label1">Your Wishlist is empty...!</div>
        </div>
        <div class="bottom">
            <div class="label4"><a href="/">Go to Shop</a></div>
        </div>
    </div>
    {% endif %}
</section>
  

Комментарии:

1. Большое спасибо, приятель, ура! Я дам вам награду, как только они мне позволят.

Ответ №2:

Перво-наперво, вам нужно добавить первичный ключ в таблицу Music, предполагая, что вы назовете его как id

В like.js файле вам нужно будет выполнить вызов Ajax, чтобы отправить идентификатор музыки в Django. Передайте идентификатор музыки шаблону при его визуализации, чтобы вы могли передать его обратно во время вызова Ajax

like.js

 $.ajax(path, {
        data: {"music_id": 12345},
        method: "POST",
        success: function (data, textStatus, jqXHR) {
            $(selector).toggleClass("heart");
        },
        error: function () {
            console.log("Something went wrong");
}
  

Теперь, на ваш взгляд, у вас может получиться что-то вроде этого
view.py

 def add_to_wishlist(request):
    data = json.loads(request.body.decode("utf-8"))

    user_id = request.user.id
    music_id = data.get('domain_name'))
    
    wishlist = Wishlist()
    wishlist.user_id = user_id
    wishlist.music_id = music_id
    wishlist.save()
  

Комментарии:

1. Нет необходимости явно задавать идентификатор в модели. Из документов: docs.djangoproject.com/en/3.1/topics/db/models «Поле идентификатора добавляется автоматически»

2. Да, явно не требуется. Я привык делать это в качестве практики.

3. это не работает, нам не нужен контекстный словарь для add_to_wishlist? было бы очень полезно получить немного больше объяснений.