Django - Підручник 011. Додавання коментарів до сайту на основі Django

MaterializedPath, Django, Python

Взявшись за реалізацію коментарів на сайті під Django, я з подивом виявив, що Django не надає жодних модулів для реалізації коментарів. Вірніше він надавав його раніше, це був модуль django.contrib.comments , але у версії 1.7 його оголосили як deprecated і запропонували або пиляти самостійно, або скористатися чимось подібним до Disqus. Добре , він ніби теж підтримує підсвічування синтаксису коду, але... у статтях одне підсвічування, у коментарях інше - це буде некрасиво.

Тому впроваджуватимемо власний велосипед і ловитимемо свої баги.

Для реалізації коментарів необхідно:

• Додати нову модель, назвемо її Comment;
• Додати подання, яке оброблятиме додавання коментаря;
• Додати форму для введення коментаря;
• Скористатися для організації деревоподібної структури підходом Materialized Path ;

Модель Comment

Модель коментарів міститиме такі поля:

• path - міститиме масив цілісних значень, який міститиме повний шлях до кореня. Як було зазначено у статті по Materialized Path, це ID всіх батьківських елементів;
• article_id - зовнішній ключ на статтю, в якій знаходиться коментар;
• author_id - зовнішній ключ до автора коментар;
• content - сам коментар;
• pub_date - дата та час публікації коментаря;

Крім цього дані методи get_offset() , який визначатиме рівень зсуву коментаря по довжині шляху, і get_col() , який визначатиме кількість колонок у сітці, які займатимуть коментар, а також перевизначено метод str , який відповідатиме за відображення частини вмісту коментаря в адмінці.

Зсув і кількість колонок організовуватимуть деревоподібне відображення коментарів на сторінці, але зсув буде не більше 6 колонок, оскільки на даний момент сітка розбивається на 12 колонок.

class Comment(models.Model):
    class Meta:
        db_table = "comments"

    path = ArrayField(models.IntegerField())
    article_id = models.ForeignKey(Article)
    author_id = models.ForeignKey(User)
    content = models.TextField('Комментарий')
    pub_date = models.DateTimeField('Дата комментария', default=timezone.now)

    def __str__(self):
        return self.content[0:200]

    def get_offset(self):
        level = len(self.path) - 1
        if level > 5:
            level = 5
        return level

    def get_col(self):
        level = len(self.path) - 1
        if level > 5:
            level = 5
        return 12 - level

Файл urls.py

Коментар надсилає на сайт за допомогою POST запиту за певною адресою, яку необхідно описати у файлі urls.py.

from django.conf.urls import url

from . import views

app_name = 'post'
urlpatterns = [
    url(r'^(?P<article_id>[0-9]+)/$', views.EArticleView.as_view(), name='article'),
    url(r'^comment/(?P<article_id>[0-9]+)/$', views.add_comment, name='add_comment'),
]

Як я вже говорив у багатьох статтях, я працюю в модулі knowledge зі статтями та розділами, але цього разу я виніс статті в окремий модуль, щоб уніфікувати URL-статей, щоб вони не залежали від розділів і не втрачалася індексація в тому у випадку, якщо стаття буде переміщена до іншого розділу. Тому тепер робота йде з модулем post . Туди ж буде надіслано і коментар. Відправлятися коментар в результаті буде на шляху **post/comment/12, якщо користувач коментує статті з ID = 12.

Форма коментаря

Форму коментаря буде розміщено в окремому файлі forms.py.

Обробка форми та збереження коментаря відбуватиметься у поданні, тому методу save тут немає. Ця форма служить лише для введення коментаря та відсилання його на сервер.

from django import forms

from .models import Comment


class CommentForm(forms.Form):

    parent_comment = forms.IntegerField(
        widget=forms.HiddenInput,
        required=False
    )

    comment_area = forms.CharField(
        label="",
        widget=forms.Textarea
    )

Поле parent_comment дуже важливе, оскільки воно міститиме ID батьківського коментаря, яке автоматично підставлятиметься при відповіді на один із коментарів під статтею. Користувач його заповнювати не буде і буде прихованим. До того ж, його заповнення не є обов'язковим, оскільки коментар може відноситися безпосередньо до статті.

Ну а ставлення до певного коментаря робиться за допомогою скрипта JavaScript.

Уявлення

Для додавання коментаря я обмежився лише методом, без жодного уявлення, тим більше, що декоратор @login_required простіше прикручується до методу, ніж до уявлення.

Також було модифіковано подання, що відповідає за відображення статті, оскільки необхідно було включити форму коментаря в контекст сторінки статті, що віддається, якщо, звичайно, користувач авторизований.

from django.views import View
from django.shortcuts import render_to_response, get_object_or_404, redirect
from django.contrib import auth
from django.http import Http404
from django.contrib.auth.decorators import login_required
from django.views.decorators.http import require_http_methods
from django.core.exceptions import ObjectDoesNotExist
from django.template.context_processors import csrf

from knowledge.models import Article, Comment
from knowledge.forms import CommentForm


class EArticleView(View):
    template_name = 'post/article.html'
    comment_form = CommentForm

    def get(self, request, *args, **kwargs):
        article = get_object_or_404(Article, id=self.kwargs['article_id'])
        context = {}
        context.update(csrf(request))
        user = auth.get_user(request)
        # Помещаем в контекст все комментарии, которые относятся к статье
        # попутно сортируя их по пути, ID автоинкрементируемые, поэтому
        # проблем с иерархией комментариев не должно возникать 
        context['comments'] = article.comment_set.all().order_by('path')
        context['next'] = article.get_absolute_url()
        # Будем добавлять форму только в том случае, если пользователь авторизован
        if user.is_authenticated:
            context['form'] = self.comment_form

        return render_to_response(template_name=self.template_name, context=context)

# Декораторы по которым, только авторизованный пользователь 
# может отправить комментарий и только с помощью POST запроса
@login_required
@require_http_methods(["POST"])
def add_comment(request, article_id):

    form = CommentForm(request.POST)
    article = get_object_or_404(Article, id=article_id)

    if form.is_valid():
        comment = Comment()
        comment.path = []
        comment.article_id = article
        comment.author_id = auth.get_user(request)
        comment.content = form.cleaned_data['comment_area']
        comment.save()

        # Django не позволяет увидеть ID комментария по мы не сохраним его, 
        # хотя PostgreSQL имеет такие средства в своём арсенале, но пока не будем
        # работать с сырыми SQL запросами, поэтому сформируем path после первого сохранения
        # и пересохраним комментарий 
        try:
            comment.path.extend(Comment.objects.get(id=form.cleaned_data['parent_comment']).path)
            comment.path.append(comment.id)
        except ObjectDoesNotExist:
            comment.path.append(comment.id)

        comment.save()

    return redirect(article.get_absolute_url())

Шаблон статті з коментарем

Я вже говорив, що використовую модуль django-bootstrap3 для верстки сторінок? Тому не дивуйтеся тому, як зверстаний цей шаблон.

Коментарі являють собою звичайні рядки в Grid системі Bootstrap, а деревовидність досягається рахунок зсуву колонок.

Дуже важливою тут є наявність у кожного рядка id={{ comment.id }} - Це саме те значення, яке буде підставлятися у приховане поле форми, якщо користувач коментує не статтю, а якийсь із коментарів.

Тому ID за допомогою JavaScript буде переміщатися форма коментаря по сторінці. А поміщатиметься форма за допомогою функції show_comments_form(). Ця функція міститься в обробник посилання "Відповісти", у кожного коментаря, а також в обробник посилання, просто для написання коментаря. Ця функція використовує бібліотеку jQuery. Тому не забуваймо її підключити у вашому базовому шаблоні. У мене підключається та версія, яка використовується з Bootstrap.

{% extends 'home/base.html' %}
{% load bootstrap3 %}
{% block page %}
    <article>
        <h1>{{ article.article_title }}</h1>
        {{ article.article_content|safe }}
    </article>
    <h2>Комментарии</h2>
    {% for comment in comments %}
        <a name="comment-{{ comment.id }}"></a>
        <div class="row" id="{{ comment.id }}">
            <div class="col-md-{{ comment.get_col }} col-md-offset-{{ comment.get_offset }}">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <strong>{{ comment.author_id.get_full_name|default:comment.author_id.username }}</strong>&nbsp;&nbsp;
                        {{ comment.pub_date }}
                        <a href="#comment-{{ comment.id }}">#</a>
                    </div>
                    <div class="panel-body">
                        <div>{{ comment.content|safe }}</div>
                        {% if form %}<a class="btn btn-default btn-xs pull-right"
                                        onclick="return show_comments_form({{ comment.id }})">
                            {% bootstrap_icon "share-alt" %}&nbsp;&nbsp;Ответить</a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}
    {% if form %}
        <h3 id="write_comment"><a onclick="return show_comments_form('write_comment')">Написать комментарий</a></h3>
        <form id="comment_form" action="{% url 'post:add_comment' article.id %}" method="post">
        {% csrf_token %}
        {% bootstrap_form form %}
        {% buttons %}
            <button type="submit" class="btn btn-primary">{% bootstrap_icon "comment" %}&nbsp;&nbsp;Комментировать</button>
        {% endbuttons %}
        </form>
    {% else %}
        <div class="panel panel-warning">
            <div class="panel-heading">
                <h3 class="panel-title">Комментарии</h3>
            </div>
            <div class="panel-body">
                Только авторизованные пользователи могут оставлять комментарии.<br />
            </div>
        </div>
    {% endif %}
{% endblock %}

JavaScript для переміщення коментарів по сторінці

Ну, тут все просто до неподобства. Якщо id = write_comment , то означає, що коментар має перший рівень і приховане поле буде порожнім, а форма переміщується під напис "Написати коментар". Інакше заповнюємо приховане поле та поміщаємо його під коментарем , під яким даємо відповідь.

function show_comments_form(parent_comment_id)
{
    if (parent_comment_id == 'write_comment')
    {
        $("#id_parent_comment").val('')
    }
    else
    {
        $("#id_parent_comment").val(parent_comment_id);
    }
    $("#comment_form").insertAfter("#" + parent_comment_id);
}

Для Django рекомендую VDS-сервера хостера Timeweb .