回覆功能設計和樹結構
阿新 • • 發佈：2020-11-02
1、如何設計回覆功能
評論被回覆
回覆可被回覆
如果設計指向上一級回覆模型需要設計無限多個，不合理。
回覆也是一種評論的行為，本質是評論。
所以讓回覆在評論裡面實現。
更改評論模型
from django.contrib.contenttypes.fields import GenericForeignKey from django.contrib.contenttypes.models import ContentType from django.db import models from django.contrib.auth.models import User class Comment(models.Model):# 將您的模型ForeignKey 設為ContentType 通過ContentType找到具體的模型 content_type = models.ForeignKey(ContentType, on_delete=models.CASCADE) object_id = models.PositiveIntegerField() # 記錄對應模型的主鍵值 該欄位可以儲存您將要關聯的模型中的主鍵值 # 給您的模型一個 GenericForeignKey，併為其傳遞上述兩個欄位的名稱。如果將這些欄位分別命名 # 為“ content_type”和“ object_id”，則可以忽略這些-這些是預設欄位名稱 GenericForeignKey。content_object = GenericForeignKey('content_type', 'object_id') text = models.TextField() comment_time = models.DateTimeField(auto_now_add=True) #是誰寫的 可以反向查詢到評論 user = models.ForeignKey(User, related_name='comments', on_delete=models.CASCADE) #為了獲取一條評論下面所有的回覆 記錄某一條回覆的最頂級評論，如此就可以得到這條評論下面相關的回覆root = models.ForeignKey('self', related_name='root_comment', null=True, on_delete=models.CASCADE) #記錄上一級的相關資訊 指向自己 頂級是可以為空 parent = models.ForeignKey('self', related_name='parent_comment', null=True, on_delete=models.CASCADE) #回覆誰 reply_to = models.ForeignKey(User, related_name='replies', null=True, on_delete=models.CASCADE) def __str__(self): return self.text class Meta: ordering = ['comment_time']
部落格頁面獲取評論時可以做篩選，只顯示頂級評論，前端頁面再在頂級評論下遍歷出回覆
comments = Comment.objects.filter(content_type=blog_content_type,object_id=blog.pk,parent=None)
context['comments'] = comments.order_by('-comment_time')
context['comment_form'] = CommentForm(initial={'content_type':blog_content_type.model, 'object_id':blog_pk, 'reply_comment_id':0})
前端
<h3 class="comment-area-title">評論列表</h3> <div id="comment_list"> {% for comment in comments %} <div id="root_{{ comment.pk }}" class="comment"> <span>{{ comment.user.username }}</span> <span>({{ comment.comment_time|date:"Y-m-d H:i:s" }}):</span> <div id="comment_{{ comment.pk }}"> {{ comment.text|safe }} </div> <a href="javascript:reply({{ comment.pk }});">回覆</a> {% for reply in comment.root_comment.all %} <div class="reply"> <span>{{ reply.user.username }}</span> <span>({{ reply.comment_time|date:"Y-m-d H:i:s" }})</span> <span>回覆</span> <span>{{ reply.reply_to.username }}:</span> <div id="comment_{{ reply.pk }}"> {{ reply.text|safe }} </div> <a href="javascript:reply({{ reply.pk }});">回覆</a> </div> {% endfor %} </div> {% empty %} <span id="no_comment">暫無評論</span> {% endfor %} </div>
回覆可以在在評論的富文字編輯器中實現
from django import forms from django.contrib.contenttypes.models import ContentType from django.db.models import ObjectDoesNotExist from ckeditor.widgets import CKEditorWidget from .models import Comment class CommentForm(forms.Form): content_type = forms.CharField(widget=forms.HiddenInput) object_id = forms.IntegerField(widget=forms.HiddenInput) text = forms.CharField(widget=CKEditorWidget(config_name='comment_ckeditor'),error_messages={'required':'評論內容不能為空'}) #回覆的對應評論的主鍵值，id值可以通過前端頁面獲取 reply_comment_id = forms.IntegerField(widget=forms.HiddenInput(attrs={'id':'reply_comment_id'})) def __init__(self, *args, **kwargs): if 'user' in kwargs: self.user = kwargs.pop('user') super(CommentForm, self).__init__(*args, **kwargs) def clean(self): #判斷使用者是否登入 if self.user.is_authenticated: self.cleaned_data['user'] = self.user else: raise forms.ValidationError('使用者尚未登入') #評論物件驗證 content_type = self.cleaned_data['content_type'] object_id = self.cleaned_data['object_id'] try: model_class = ContentType.objects.get(model=content_type).model_class() model_obj = model_class.objects.get(pk=object_id) self.cleaned_data['content_object'] =model_obj except ObjectDoesNotExist: raise forms.ValidationError('評論物件不存在') return self.cleaned_data def clean_reply_comment_id(self): reply_comment_id = self.cleaned_data['reply_comment_id'] if reply_comment_id < 0: raise forms.ValidationError('回覆出錯') elif reply_comment_id == 0: self.cleaned_data['parent'] = None elif Comment.objects.filter(pk=reply_comment_id).exists(): self.cleaned_data['parent'] = Comment.objects.get(pk=reply_comment_id) else: raise forms.ValidationError('回覆出錯') return reply_comment_id
之後寫前端頁面的js程式碼和回覆的處理邏輯
{% extends 'base.html' %}
{% block title %}
{{ blog.title }}
{% endblock %}
{% block nav_blog_active %}active{% endblock %}
{% load staticfiles %}
{% block header_extends %}
<link rel="stylesheet" href="{% static 'blog/blog.css' %}">
<script type="text/javascript" src="{% static "ckeditor/ckeditor-init.js" %}"></script>
<script type="text/javascript" src="{% static "ckeditor/ckeditor/ckeditor.js" %}"></script>
{% endblock %}
{% block content %}
<div class="container">
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<h3>{{ blog.title }}</h3>
<ul class="blog-info-description">
<li>作者：{{ blog.author }}</li>
<li>分類：<a href="{% url 'blogs_with_type' blog.blog_type.pk %}">{{ blog.blog_type }}</a></li>
<li>發表日期：{{ blog.created_time|date:"Y-m-d H:i:s" }}</li>
<li>閱讀({{ blog.get_read_num }})</li>
</ul>
<div class="blog-content">{{ blog.content|safe }}</div>
<div class="blog-more">
<p>上一篇：
{% if previous_blog %}
<a href="{% url 'blog_detail' previous_blog.pk %}">{{ previous_blog.title }}</a>
{% else %}
沒有了
{% endif %}
</p>
<p>下一篇：
{% if next_blog %}
<a href="{% url 'blog_detail' next_blog.pk %}">{{ next_blog.title }}</a>
{% else %}
沒有了
{% endif %}
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<div class="comment-area">
<h3 class="comment-area-title">提交評論</h3>
{% if request.user.is_authenticated %}
<form id="comment_form" action="{% url 'update_comment' %}" method="POST" style="overflow: hidden">
<label>{{ user.username }},歡迎評論~</label>
<div id="reply_content_container" style="display: none;">
<p>回覆：</p>
<div id="reply_content">
</div>
</div>
{% csrf_token %}
{% for field in comment_form %}
{{ field }}
{% endfor %}
<span id="comment_error" class="text-danger pull-left"></span>
<input type="submit" value="評論" class="btn btn-primary pull-right">
</form>
{% else %}
您尚未登入，登入之後方可評論
<a class="btn btn-primary" href="{% url 'login' %}?from={{ request.get_full_path }}">登入</a>
<span>or</span>
<a class="btn btn-danger" href="{% url 'register' %}?from={{ request.get_full_path }}">註冊</a>
{% endif %}
</div>
<div class="comment-area">
<h3 class="comment-area-title">評論列表</h3>
<div id="comment_list">
{% for comment in comments %}
<div id="root_{{ comment.pk }}" class="comment">
<span>{{ comment.user.username }}</span>
<span>({{ comment.comment_time|date:"Y-m-d H:i:s" }}):</span>
<div id="comment_{{ comment.pk }}">
{{ comment.text|safe }}
</div>
<a href="javascript:reply({{ comment.pk }});">回覆</a>
{% for reply in comment.root_comment.all %}
<div class="reply">
<span>{{ reply.user.username }}</span>
<span>({{ reply.comment_time|date:"Y-m-d H:i:s" }})</span>
<span>回覆</span>
<span>{{ reply.reply_to.username }}:</span>
<div id="comment_{{ reply.pk }}">
{{ reply.text|safe }}
</div>
<a href="javascript:reply({{ reply.pk }});">回覆</a>
</div>
{% endfor %}
</div>
{% empty %}
<span id="no_comment">暫無評論</span>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block script_extends %}
<script type="text/javascript">
$('#comment_form').submit(function () {
//判斷是否為空
$('#comment_error').text('');
if(CKEDITOR.instances["id_text"].document.getBody().getText().trim()==''){
$('#comment_error').text('評論內容不能為空');
return false
}
//更新資料到textarea裡邊
CKEDITOR.instances["id_text"].updateElement();
//非同步提交，標籤選擇器選中form表單，當表單提交的時候會觸發submit()方法，觸發事件的時候回撥一個function
//這個function作為一個引數寫到這裡 return false 會阻止它點完按鈕直接提交這個操作,這裡我們需要一個非同步提交
$.ajax({
url: "{% url 'update_comment' %}",
type: 'POST',
data: $(this).serialize(),
cache: false,
success: function (data) {
console.log(data);
//判斷是否處理成功
if(data['status']=='SUCCESS'){
//插入資料
if($('#reply_comment_id').val()=='0'){
//插入評論
var comment_html = '<div id="root_' + data['pk'] + '" class="comment"><span>' + data['username'] + '</span><span> (' + data['comment_time'] + ')：</span><div id="comment_' + data['pk'] + '">' + data['text'] + '</div><a href="javascript:reply(' + data['pk'] + ');">回覆</a></div>';
$('#comment_list').prepend(comment_html);
}else {
//插入回覆
var reply_html ='<div class="reply"><span>' + data['username'] + '</span><span> (' + data['comment_time'] + ')</span><span> 回覆 </span><span>' + data['reply_to'] + '：</span><div id="comment_' + data['pk'] + '">' + data['text'] + '</div><a href="javascript:reply(' + data['pk'] + ');">回覆</a></div>';
$('#root_' + data['root_pk']).append(reply_html);
}
//清空編輯框的內容
CKEDITOR.instances['id_text'].setData('');
$('#reply_content_container').hide();
$('#reply_comment_id').val('0');
$('#no_comment').remove();
}else {
//顯示錯誤資訊
$('#comment_error').text(data['message']);
}
},
error: function (xhr) {
console.log(xhr);
}
});
return false;
});
function reply(reply_comment_id) {
//設定值
$('#reply_comment_id').val(reply_comment_id);
var html = $('#comment_' + reply_comment_id).html();
$('#reply_content').html(html);
$('#reply_content_container').show();
$('html').animate({scrollTop:$('#comment_form').offset().top - 60}, 300 ,function () {
CKEDITOR.instances['id_text'].focus();
});
}
</script>
{% endblock %}
回覆處理邏輯
from django.shortcuts import render, redirect from django.contrib.contenttypes.models import ContentType from django.urls import reverse from django.http import JsonResponse from .models import Comment from .forms import CommentForm def update_comment(request): '''referer = request.META.get('HTTP_REFERER', reverse('home')) #資料檢查 user = request.user if not user.is_authenticated: return render(request,'error.html',{'message':'使用者未登入','redirect_to':referer }) text = request.POST.get('text','').strip() if text == '': return render(request,'error.html',{'message':'評論內容為空','redirect_to':referer }) try: content_type = request.POST.get('content_type','') object_id = int(request.POST.get('object_id','')) model_class = ContentType.objects.get(model=content_type).model_class() model_obj = model_class.objects.get(pk=object_id) except Exception as e: return render(request, 'error.html', {'message': '評論物件不存在','redirect_to':referer }) #檢查通過，儲存資料 comment = Comment() comment.user = user comment.text = text comment.content_object = model_obj comment.save() return redirect(referer)''' referer = request.META.get('HTTP_REFERER', reverse('home')) comment_form = CommentForm(request.POST, user=request.user) data = {} if comment_form.is_valid(): # 檢查通過，儲存資料 comment = Comment() comment.user = comment_form.cleaned_data['user'] comment.text = comment_form.cleaned_data['text'] comment.content_object = comment_form.cleaned_data['content_object'] parent = comment_form.cleaned_data['parent'] if not parent is None: comment.root = parent.root if not parent.root is None else parent comment.parent = parent comment.reply_to = parent.user comment.save() #返回資料 data['status'] = 'SUCCESS' data['username'] = comment.user.username data['comment_time'] = comment.comment_time.strftime('%Y-%m-%d %H:%M:%S') data['text'] = comment.text if not parent is None: data['reply_to'] = comment.reply_to.username else: data['reply_to'] = '' data['pk'] = comment.pk data['root_pk'] = comment.root.pk if not comment.root is None else '' else: data['status'] = 'ERROR' data['message'] = list(comment_form.errors.values())[0][0] return JsonResponse(data) # return render(request, 'error.html', {'message': comment_form.errors, 'redirect_to': referer})