[PYTHON] Implementierung der Like-Schaltfläche in Django + Ajax

1. Zuallererst

Dies ist der erste Beitrag von Qiita zum Gedenken.

Ich bin ein Twitter-Liebhaber, aber ich berühre Twitter während der Arbeit nicht. Also habe ich angefangen, eine Twitter-ähnliche App zum Schreiben von Gedanken und Notizen zu erstellen, aber es ist ziemlich schwierig, einen Like-Button zu implementieren. .. .. Wenn Sie es mit Formular machen, wird es Seitenübergänge verursachen und das Gefühl von Twitter wird geschwächt, so dass ich nach anderen Methoden gesucht habe. Zu dieser Zeit habe ich etwas über Ajax gelernt und es implementiert, also habe ich beschlossen, es zu veröffentlichen.

Ich habe gerade angefangen, Web-Frameworks und DB zu studieren. Wenn Sie also Fehler haben, würde ich mich freuen, wenn Sie mich unterrichten könnten.

2. Implementierung und Erklärung

Bitte beachten Sie, dass wir diesmal die Erläuterung des Teils weglassen, in dem die aus dem Formular in der Datenbank eingegebenen Daten gespeichert werden.

urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('', views.timeline, name='index'),
    path('like/', views.like, name='like'),
]

Routing-Einstellungen. Legen Sie die Seite fest, die httpresponse zurückgibt.

models.py

from django.db import models
from django.utils import timezone

class PostTweet(models.Model):
    memo = models.TextField(max_length=140)
    published = models.DateTimeField(default=timezone.now)
    star = models.BooleanField(default=False)

Definieren Sie in models.py zusätzlich zum Inhalt des Memos einen Booleschen Wert, der den Status "Gefällt mir" angibt.

forms.py

class PostForm(forms.ModelForm):
    class Meta:
        model = PostTweet
        fields = ['memo', 'published', 'star']

forms.py sieht so aus. Es gibt nichts Besonderes zu erwähnen, aber ich werde es vorerst veröffentlichen.

views.py

from django.http import HttpResponse
from django.shortcuts import render
from .models import PostTweet
from .forms import PostForm, SearchForm

def index(request):
    posts = PostTweet.objects.all().order_by('-published')
    form = PostForm()
    d = {
        'form': form,
        'posts': posts
    }
    return render(request, 'index.html', d)

def like(request):
    if request.method == 'GET':
        if 'star' in request.GET:
            like = PostTweet.objects.get(id=int(request.GET['star']))
            like.star = not like.star
            like.save()
            return HttpResponse('OK')
    else:
        return HttpResponse("NG")

Ich werde später like () erklären.

index.html

{% extends 'base.html' %}
{% block body %}
    {% for post in posts %}
        {{ post.memo | linebreaker }}
        <br>
        {% if post.star == False %}
            <input type="checkbox" class="like" id="like_{{ post.id }}" 
                   data_id="{{ post.id }}">
        {% else %}
            <input type="checkbox" class="like" checked="checked" id="like_{{ post.id }}"
                   data_id="{{ post.id }}">
        {% endif %}
        <label for="like_{{ post.id }}" class="like_label">★</label>
    
    <script src="https://code.jquery.com/jquery-3.5.0.js" 
            integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" 
            crossorigin="anonymous"></script>
    <script type="text/javascript">
        $('.like').click(function(){
            var id;
            id = $(this).attr("data_id");
            $.ajax(
                {
                    type:"GET",
                    url: "like",
                    data:{
                        star: id
                        }
                })
            });
    </script>
{% endblock %}

Ich entschied mich, Kontrollkästchen und Beschriftungen zu verwenden, um die Schaltfläche "Gefällt mir" darzustellen. Wenn der Stern, der den Status "Gefällt mir" darstellt, "Wahr" ist, aktivieren Sie das Kontrollkästchen im Voraus.

Ausgelassen für base.html.

style.css

.like{
    display: none;
}
.like_label{
    margin-left: 10px;
    cursor: pointer;
    color: #cccccc;
    border: none;  /*Löschen Sie den Rand*/
    outline: none; /*Entfernen Sie den Rand, der beim Klicken angezeigt wird*/
    background: transparent; /*Löschen Sie den grauen Hintergrund*/
}
input:checked + .like_label{
    color: gold;
}

Aussehen Update

Schalten Sie die Taste aus und zeigen Sie nur das Etikett an. Die Standardfarbe für die Tastenbeschriftung sollte grau sein. Wenn das Kontrollkästchen aktiviert ist, ändern Sie die Farbe der Schaltflächenbeschriftung in Gold.

Dies ändert die Farbe jedes Mal, wenn Sie die Taste drücken.

DB-Update

Importieren Sie jQuery. Verwenden Sie Ajax (asynchrone Verarbeitung von Javascript), um die Datensatz-ID der gedrückten Schaltfläche an die gleiche Methode von views.py zurückzugeben. (Die ID wird automatisch hinzugefügt, wenn sie zur Datenbank hinzugefügt wird.) Setzen Sie dann in views.py like () den Stern der erfassten ID so, dass er nicht markiert ist, und aktualisieren Sie ihn.

Auf diese Weise wird der Inhalt der Datenbank jedes Mal aktualisiert, wenn Sie die Taste drücken.

Zusammenfassung

Durch die Verwendung von Ajax und Kontrollkästchen konnte ich einen netten Like-Button implementieren. Da diese App nur von mir selbst gesehen werden soll, gibt es nur Ein / Aus, aber ich denke, Sie können einen Typ erstellen, der die Anzahl der Likes auf die gleiche Weise zählt.

Danke, dass Sie so weit gelesen haben!