时间戳

首页 > 解决方案 > Django 中最喜欢的系统

javascript - Django 中最喜欢的系统

问题描述

图片

在此处输入图像描述

$(document).ready(function(){
	$(".like").click(function(){
		$(this).toggleClass("heart");
	});
});
.like {
  padding-right: 6px;
  color: #00000030;
  font-size: 1.6em;
  padding-top: 5px;
  animation: like 0.5s linear;
}

.heart {
  color: #FF0000;
  animation: heart 0.5s linear;
}
{% for m in musicl %}
  <div class="card">
        <div class="top">
          <div class="year">{{m.Year}}</div>
          <span class="like"><i class="fa fa-heart"></i></span>
        </div>

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

        <a href="https://google.com" id="link" target="_blank">
          <div class="bottom">
            <div class="title">{{m.Name}}</div>
            <div class="genre">{{m.Genre}}</div>
          </div>
        </a>
  </div>
{% endfor %}

模型.py

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

视图.py

def home(request):
    return render(request, template_name='main/home.html', context={"musicl": Music.objects.all})


def wishlist(request, id):
    pass

如何将用户模型连接到此收藏系统并在视图功能（愿望清单）中跟踪收藏列表，换句话说，当有人点击收藏图标时，我希望将特定卡片保存到相应的愿望清单视图中到那个用户模型

标签： javascriptpythonhtmlcssdjango

解决方案

要将您的 UserModel 与前端连接，我们需要将数据 (music_id) 从 UI 推送到后端。

如果你想用 django-template 来做这件事，那么你可以使用 django-forms。

https://docs.djangoproject.com/en/3.0/topics/forms/

但是，如果您想进行一些基于事件的事件，例如单击，以下是步骤...

要做到这一点，需要做几件事。

  1. 存储愿望清单音乐所需的愿望清单附加模型
  2. views.py 验证输入并保存愿望清单
  3. url-dispatcher url -> 视图（您的业务逻辑）-> 模型（保存数据，您的情况下的愿望清单）
  4. 对 django-backend 的后调用（使用 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 是因为我们将使用 ajax 进行 POST 调用，django-提供跨站点请求伪造保护，但不建议在生产环境中使用 @csrf_exempt。有关https://docs.djangoproject.com/en/3.0/ref/csrf/的更多详细信息

3. URL-Dispatcher/Path 这里我们在音乐应用程序下有模型和视图，所以下面的 urls.py 用于将 /music url 重定向到音乐应用程序 url

用于参考。我的项目结构为 在此处输入图像描述

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)),
]

音乐/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 调用从前端到 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
                     }
                 })
    });
});

我只是在 html 中添加了一个 ui 元素（在类跨度内）来保存音乐的主键，这是在模型中添加愿望清单所需的，因为我们在 WishlistMusic 模型中将 music_id 设置为外键。

.html

........
<a href="https://google.com" id="link" target="_blank">
          <div class="bottom">
            <div class="title" id="title">{{m.Name}}</div>
            <div class="genre" id="genre">{{m.Genre}}</div>
          </div>
          
        </a>
         <span class="like" id="abc"><input type="hidden", id="abc", value="{{m.pk}}"/>aa<i class="fa fa-heart"></i></span>
 .......

以下是您可以查看的参考资料以获取更多详细信息

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 /

推荐阅读