[JAVA] 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.

dislike.png like.png

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!

Recommended Posts

Implémentation du bouton like dans Django + Ajax
Implémentation de la fonction de connexion dans Django
Réagir → Ajax → Django sur les notes d'implémentation Linux
Ajax dans Django (en utilisant la vue de classe générique)
Implémentation du traitement asynchrone dans Django (Celery, Redis)
Modèle dans Django
Formulaire à Django
Implémentation RNN en python
Implémentation ValueObject en Python
Implémentation du menu déroulant dans Django
Implémentation SVM en python
[Django] Gérez les paramètres comme l'écriture dans settings.py avec un modèle
Implémenter un bouton d'ajout de formulaire dans l'ensemble de formulaires en ligne Django
Optimisation des performances dans Django 3.xx
PHP comme var_dump dans le template Django
Gérer les constantes dans les modèles Django
Implémenter la fonction de suivi dans Django
Renommer les colonnes de table dans Django3
(Note) Django dans l'environnement Vagrant
Implémentation de réseau neuronal en python
Implémentation du tri rapide en Python
Afficher Django ManyToManyField dans un modèle
Implémentation de la fonction d'authentification JWT dans Django REST Framework à l'aide de djoser