回复功能设计和树结构
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})
浙公网安备 33010602011771号