Django 20200424 博客开发 018

目标效果：

在comment中创建forms.py文件，编写代码：

from django import forms
from django.contrib.contenttypes.models import ContentType
from django.db.models import ObjectDoesNotExist
from ckeditor.widgets import CKEditorWidget


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': '评论内容不能为空'})


    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:  # 不使用exceptions的原因时为了防止将任何错误都归因于评论对象不存在从而导致难以维护
            raise forms.ValidationError('评论对象不存在')


        return self.cleaned_data

在comment中的views.py中导入Comment并且在下面将该参数传递给前端，

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'))
    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']
        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
    else:
        #return render(request, 'error.html', {'message': comment_form.errors, 'redirect_to': referer})
        data['status'] = 'ERROR'
        data['message'] = list(comment_form.errors.values())[0][0]
    return JsonResponse(data)

然后再blog_detail中提价评论下面增加{{comment_form}}以加入渲染

提交评论
{% if user.is_authenticated %}
    

        {% csrf_token %}
        {{ comment_form }}
        
        

            {{ user.username }}，欢迎评论~

修改blog/views.py中blog_detail

from comment.forms import CommentForm
......
def blog_detail(request, blog_pk):
    context['comment_form'] = CommentForm(initial={'content_type': blog_content_type.model, 'object_id': blog_pk})

效果如下：

两个框，而且文本编辑功能欠缺，我们优化并增加一下新功能：

将blog\_detail.html中的欢迎评论周围简化样式,并且优化：

新的

{# 删除和base中重复的内容，留下独有的内容,然后分别填充到下面的两个block中 #}


{# 这是页面标题 #}
{% extends 'base.html' %}
{% block title %}{{ blog.title }}{% endblock %}{# 这里因为之前title被包起来了，所以直接用变量即可 #}
{% block nav_blog_active %}active{% endblock %}


{% load static %}
{% block header_extends %}
    
    
    
{% endblock %}


{# 页面内容 #}
{% block content %}
    

        

            

                
{{ blog.title }}
                

                    
作者：{{ blog.author }}
                    
分类：{{ blog.blog_type }}
                    
发表日期：{{ blog.created_time|date:"Y-m-d H:i:s" }}
                    
阅读量：({{ blog.get_read_num }})
                
              
                
{{ blog.content|safe }}
                

                    
上一篇：
                        {% if previous_blog %}
                            {{ previous_blog.title }}
                        {% else %}
                            没有了
                        {% endif %}
                    
                    
下一篇：
                        {% if next_blog %}
                            {{ next_blog.title }}
                        {% else %}
                            没有了
                        {% endif %}
                    
                
            
        
        

            

                

                    
提交评论
                    {% if user.is_authenticated %}
                        
                            {{ user.username }}，欢迎评论~
                            {% csrf_token %}                            
                            {% for field in comment_form %}
                                {{ field }}
                            {% endfor %}
                            
                            
                        
                    {% else %}
                        您尚未登录，登录之后方可评论~
                        登录
                         or 
                        注册
                    {% endif %}
                
                

                    
评论列表
                    

                        {% for comment in comments %}
                            

                                {{ comment.user.username }}
                                ({{ comment.comment_time|date:"Y-m-d H:i:s" }})：
                                {{ comment.text|safe }}
                            
                        {% empty %}
                            暂无评论
                        {% endfor %}
                    
                    
                
            
        
    
    
{% endblock %}
    
{% block script_extends %}
    
{% endblock %}

原来的：

        

            

                

                    
提交评论
                    {% if user.is_authenticated %}
                        

                            {% csrf_token %}
                            {{ comment_form }}


                            

                                {{ user.username }}，欢迎评论~
                                
{#使用input无法多行输入，换成textarea来写多行内容,使用bootstrap中的form-control对编辑区域和提交功能的性能优化#}
                            


                            
                            
                            
                        
                    {% else %}
                        您尚未登录，登录之后方可评论~
                        登录
                         or 
                        注册
                    {% endif %}
                
                

                    
评论列表
                    {% for comment in comments %}
                        

                            {{ comment.user.username }}
                            ({{ comment.comment_time|date:"Y-m-d H:n:s" }})：
                            {{ comment.text }}
                        
                    {% empty %}
                        暂无评论
                    {% endfor %}
                
            
        

在settings.中加入

CKEDITOR_CONFIGS = {
    'comment_ckeditor': {
        'toolbar': 'custom',
        'toolbar_custom': [
            ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript'],
            ["TextColor", "BGColor", 'RemoveFormat'],
            ['NumberedList', 'BulletedList'],
            ['Link', 'Unlink'],
            ["Smiley", "SpecialChar", 'Blockquote'],
        ],
        'width': 'auto',
        'height': '180',
        'tabSpaces': 4,
        'removePlugins': 'elementspath',
        'resize_enabled': False,
    }
}

然后增加blog.css样式

div.django-ckeditor-widget {
    width: 100%;
}

修改blog.forms.py中的CommentFomr类下面的text内容

text = forms.CharField(widget=CKEditorWidget(config_name='comment_ckeditor'),
                       error_messages={'required': '评论内容不能为空'})

给comment/models.py中增加袁磊，使其按照评论时间倒序排列：

    class Meta:
        ordering = ['-comment_time']