Django 블로그의 댓글 섹션을 만드는 방법!

안녕!

이 미니 튜토리얼은 각 블로그 게시물에 댓글을 추가(업데이트/삭제하지 않음)하기 위한 댓글 섹션을 만드는 데 중점을 둘 것입니다. 클래스 기반 뷰, 즉 BlogPost DetailView를 사용하는 동안 이 기능을 구현할 것입니다. 내 모습은 다음과 같습니다.

# MainApp/models.py
class BlogPost(models.Model):
    title = models.CharField(max_length=100)
    subtitle = models.CharField(max_length=200, blank=True, null=True)
    content = models.TextField()
    date_posted = models.DateTimeField(default=timezone.now)
    author = models.ForeignKey(User, on_delete=models.SET_NULL, null=True)
    image = models.ImageField(upload_to='blog_images',
                              storage=gd_storage, null=True, blank=True)

    def __str__(self):
        return self.author.username + ', ' + self.title[:40]

    def get_absolute_url(self):
        return reverse('blogpost-detail', kwargs={'pk': self.pk})

# MainApp/views.py
class BlogPostDetailView(DetailView):
    model = BlogPost
    # template_name = MainApp/BlogPost_detail.html
    # context_object_name = 'object'

가장 먼저 해야 할 일: models.py 에서 BlogComment 모델을 생성해야 합니다. 원하는 방식으로 모델을 개인화할 수 있습니다. 댓글의 기본 사항을 고수하고 작성자, 내용/본문 및 날짜(댓글이 게시된 날짜)와 같은 필드를 추가할 것입니다.

# models.py
from django.db import models
from django.utils import timezone
from django.contrib.auth.models import User

class BlogComment(models.Model):
    blogpost_connected = models.ForeignKey(
        BlogPost, related_name='comments', on_delete=models.CASCADE)
    author = models.ForeignKey(User, on_delete=models.CASCADE)
    content = TextField()
    date_posted = models.DateTimeField(default=timezone.now)

    def __str__(self):
        return str(self.author) + ', ' + self.blogpost_connected.title[:40]

모든 BlogComment에는 BlogPost의 ID(외래 키)가 있으며(BlogPost에는 여러 BlogComments가 있을 수 있음) BlogPost가 삭제되면 해당 BlogPost에 연결된 모든 BlogComment가 삭제됩니다(on_delete == CASCADE ).

또한 작성자는 전체 사용자 개체(사용자 ID, 사용자 이름, 이메일 등이 있음)에 대한 외래 키가 되므로 사용자는 여러 의견을 가질 수 있습니다.

또한 CLI/관리자 패널에서 쿼리를 수행할 때 개체 유형을 보는 대신 더 읽기 쉬운 방식으로 주석을 볼 수 있도록 매직 메서드 str()을 추가합니다.

models.py에서 BlogPost 모델에서 블로그 게시물의 댓글 수를 반환하는 함수를 작성할 수도 있습니다.

# models.py
class BlogPost(models.Model):
    title = models.CharField(max_length=100)
    ...

    @property
    def number_of_comments(self):
        return BlogComment.objects.filter(blogpost_connected=self).count()

models.py 파일을 변경할 때마다 터미널을 열고 데이터베이스로 마이그레이션해야 합니다.

# CLI/Terminal
>> cd C:\Projects\...\YourDjangoAppMainFolder
>> python manage.py makemigrations
>> python manage.py migrate

새 양식 클래스를 만들어 보겠습니다. models.py와 동일한 폴더에서 forms.py라는 새 파일을 만들고 다음을 작성합니다.

# forms.py
from django import forms
from .models import BlogComment

class NewCommentForm(forms.ModelForm):
    class Meta:
        model = BlogComment
        fields = ['content']

이제 클래스 기반 뷰 BlogPost DetailView 내의 get_context_data 함수에 views.py에서 다음을 추가할 수 있습니다.

# views.py
from .models import BlogPost, BlogComment
from .forms import NewCommentForm

class BlogPostDetailView(DetailView):
    model = BlogPost
    # template_name = MainApp/BlogPost_detail.html
    # context_object_name = 'object'

    def get_context_data(self, **kwargs):
        data = super().get_context_data(**kwargs)

        comments_connected = BlogComment.objects.filter(
            blogpost_connected=self.get_object()).order_by('-date_posted')
        data['comments'] = comments_connected
        if self.request.user.is_authenticated:
            data['comment_form'] = NewCommentForm(instance=self.request.user)

        return data

여기서 우리는 현재 BlogPost 개체에서 모든 댓글을 검색하고 로컬 변수(쿼리)를 comments_connected에 저장한 다음 HTML 기반의 blogpost_detail에 컨텍스트로 추가로 보냅니다.

그러나 클래스 기반 BlogPost DetailView에서 직접 댓글을 게시하려면 양식(이 보기/html에 있음)에서 컨텍스트를 수신하는 게시 메서드도 정의해야 합니다. 따라서 동일한 클래스에 다음을 추가해야 합니다.

# views.py
class BlogPostDetailView(DetailView):
    ... 

    def get_context_data(self, **kwargs):
        ...

    def post(self, request, *args, **kwargs):
        new_comment = BlogComment(content=request.POST.get('content'),
                                  author=self.request.user,
                                  blogpost_connected=self.get_object())
        new_comment.save()
        return self.get(self, request, *args, **kwargs)

마지막으로 blogpost_detail.html DjangoTemplateLanguage에 다음을 작성해 보겠습니다.

<!-- COMMENTS  -->
<h2>Leave your comment!</h2>
<div id="comments_section">

  {% if user.is_authenticated %}
  <form method="POST">
    {% csrf_token %}
    <div class="form-group">
      {{ comment_form }}
      <button class="btn btn-info" type="submit">Add comment <i class="fas fa-comments"></i></button>
    </div>
  </form>
  {% else %}
  <a class="btn btn-outline-info" href="{% url 'login' %}?next={{request.path}}">Log in to add a comment!</a><br>
  {% endif %}

  {% if comments %}
  <strong class="text-secondary">{{ object.number_of_comments }} Comment{{ object.number_of_comments|pluralize }}</strong>
  <hr>
  <ul>
    {% for comment in comments %}
    <li>           
     <div>
        <span>
          <strong class="text-info">{{ comment.author }} </strong>
          <small class="text-muted">{{ comment.date_posted }}</small>
        </span>
        <p>
          {{ comment.content|safe }}
        </p>
      </div>
    </li>
    {% endfor %}
  </ul>
  {% else %}
    <strong class="text-secondary">No comments yet...</strong>
  {% endif %}

</div>

정말 많은 코드가 있습니다. 코드의 일부를 단계별로 살펴보겠습니다.

가장 먼저 할 일은 사용자가 인증되었는지 확인하는 것입니다. True인 경우 사용자에게 새 댓글 내용을 작성할 수 있는 양식을 보여줍니다. False인 경우 로그인 페이지로 리디렉션하는 버튼을 사용자에게 표시합니다. 또한 사용자가 자신의 계정에 로그인하여 댓글을 게시하고자 했던 이전 블로그 게시물로 리디렉션한 후 request.path가 현재 페이지 경로( 예: localhost/blogpost/7)

그런 다음 현재 블로그 게시물에 댓글이 있는지 확인합니다. 그렇지 않은 경우 HTML에 "아직 댓글이 없습니다.."를 입력합니다. 댓글이 있으면 댓글 수를 작성한 다음 각각을 반복하고 작성자, 날짜 및 내용을 표시합니다.

완벽하므로 거의 완료되었습니다! 그러나 이 댓글 섹션은 다소 지루해 보일 것입니다... 따라서 Google 또는... here (덕분에 bootdey.com )에서 찾을 수 있는 스타일을 만들어야 합니다! 이를 통합하려면 예제에 따라 "?next={{request.path}}"에 CSS 코드를 추가하고 blogpost_detail.html (목록) 섹션에 해당 태그를 추가하기만 하면 됩니다.

좋습니다. 이제 끝났습니다! 이것이 유용하기를 바랍니다. 😁
내 블로그codingtranquillity.herokuapp.com에서 이 댓글 섹션의 실제 예를 볼 수 있습니다. 여기에서 이와 같은 더 많은 기사를 찾을 수도 있습니다!

좋은 하루 보내시고... 행복한 코딩하세요!
R.B.