[PYTHON] Implémentation du bouton like dans Django + Ajax

1.Tout d'abord

C'est le premier poste de Qiita à commémorer.

Je suis un amoureux de Twitter, mais je ne touche pas à Twitter pendant le travail. J'ai donc commencé à créer une application de type Twitter pour écrire et saisir des pensées et des notes, mais il est assez difficile de mettre en œuvre un bouton similaire. .. .. Si vous le faites avec le formulaire, la transition de page sera accompagnée et le sentiment de Twitter sera affaibli, j'ai donc cherché une autre méthode. À ce moment-là, j'ai découvert l'Ajax et j'ai réussi à l'implémenter, alors j'ai décidé de le publier.

Je viens de commencer à étudier les frameworks Web et DB, donc si vous avez des erreurs, je vous serais reconnaissant si vous pouviez m'apprendre.

2. Mise en œuvre et explication

Veuillez noter que cette fois, nous omettons l'explication de la partie qui enregistre les données saisies du formulaire dans la base de données.

urls.py

from django.urls import path
from . import views

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

Paramètres de routage. Définissez la page qui renvoie httpresponse.

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)

Dans models.py, en plus du contenu du mémo, définissez une valeur booléenne qui indique l'état "comme".

forms.py

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

forms.py ressemble à ceci. Il n'y a rien de spécial à mentionner, mais je le posterai pour le moment.

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")

J'expliquerai comme () plus tard.

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 %}

J'ai décidé d'utiliser des cases à cocher et des étiquettes pour représenter le bouton J'aime. Si l'étoile qui représente le statut similaire est True, cochez la case sur cochée à l'avance.

Omis pour base.html.

style.css

.like{
    display: none;
}
.like_label{
    margin-left: 10px;
    cursor: pointer;
    color: #cccccc;
    border: none;  /*Effacer la bordure*/
    outline: none; /*Supprimez la bordure qui apparaît lorsque vous cliquez sur*/
    background: transparent; /*Effacer le fond gris*/
}
input:checked + .like_label{
    color: gold;
}

Mise à jour de l'apparence

Désactivez le bouton et n'affichez que l'étiquette. La couleur par défaut de l'étiquette du bouton doit être grise. Si la case est cochée, changez la couleur de l'étiquette du bouton en or.

Cela changera la couleur à chaque fois que vous appuyez sur le bouton.

Mise à jour de la base de données

Importez jQuery. Utilisez Ajax (traitement asynchrone de javascript) pour renvoyer l'ID d'enregistrement du bouton enfoncé à la méthode similaire de views.py. (L'identifiant est automatiquement ajouté lorsqu'il est ajouté à la base de données.) Ensuite, dans views.py comme (), définissez l'étoile de l'identifiant acquis pour ne pas l'étoile et mettez-le à jour.

Ce faisant, le contenu de la base de données sera mis à jour chaque fois que vous appuyez sur le bouton.

Résumé

En utilisant Ajax et des cases à cocher, j'ai pu implémenter un joli bouton like. Étant donné que cette application est censée être vue uniquement par moi-même, il n'y a que marche / arrêt, mais je pense que vous pouvez créer un type qui compte le nombre de likes de la même manière.

Merci d'avoir lu jusqu'ici!