【Django2.0学习笔记】25.富文本编辑和ajax提交评论

25、富文本编辑和ajax提交评论

1、django-ckeditor富文本表单

• 每个字段类型都有一个适当的默认Widget类
• django-ckeditor提供widget
• from ckeditor.widgets import CKEditorWidget
  

要实现评论为富文本编辑的效果，不用自己手动加载富文本编辑，我们可以利用django-ckeditor提供的富文本第三方库 widget类。widget是可以给django form表单自动使用。

查看blog_detail.html里面提交评论的部分，可以看到有html简单的form形式，我们首先要把它改成django form的形式，

在mysite/comment下新建forms.py，写入如下代码：

# # C:\Users\12482\Desktop\py_learn\Django2.0_chapter46\mysite_env\mysite\comment\forms.py
from django import forms


class CommentForm(forms.Form):
	content_type = forms.CharField()
	object_id = forms.IntegerField()
	text = forms.CharField()

这样，form表单就建立起来了。首先我们可以把它放到前端模板页面，把它渲染出来看看。那么我们要在什么地方进行渲染呢？我们要在blog_detail.html这个页面进行渲染，那么我们就要找到使用这个模板页面对应的处理方法 blog/views.py里面的blog_detail方法，修改如下：

接着我们把页面渲染出来，修改blog_detail.html：

刷新页面

可以看到有text、object_id、content_type这些字段，但是渲染出来的类型都不是我们想要的，还需要继续改进
修改forms.py如下：

刷新页面

另外，进一步对比两个表单可以发现，之前的form有一个初始值
我们需要对我们渲染出来的表单做一个初始化操作，在views.py中初始化的时候，把对应的参数初始化一个值出来，修改views.py如下：

精简优化代码如下：

这样，我们就完成了用django表单实现html表单。

在blog_detail.html里面提交评论部分，我们之前写的是向链接“url ‘update_comment’”提交数据，对应的路由设置是comment/urls.py里面的“update_comment”，，对应的处理方法是comment/views.py的update_comment，这里做的是数据检查和数据验证。这里本质上跟django form提交数据没有多大的区别，那我们要不要像上一节课登录和注册那样 把这个处理逻辑写到上面的blog/views.py里的blog_detail方法里面呢，因为是在这里面进行的Form表单的初始化操作，我们可以像上节课一样在这里做一个判断，判断request的请求方法是不是POST，如果是POST的话，我们就把表单用request.POST里面的数据进行一个初始化 实例化操作，然后再进行一系列的判断。
这里，如果我们用这一套处理逻辑，会有一个问题，因为这个页面处理方法blog_detail主体是blog，万一blog也有自己的Blog编辑这个页面，也是一个POST请求提交，这样的话，就会有两个POST请求提交，会有冲突。所以这里就建议大家不要把提交评论这部分的处理逻辑放到blog_detail这个处理方法这里。
那么这里就有一个简单的规律：处理方法的主体是谁，那就只能放这个主体对应的POST表单提交的处理逻辑，如果不是，那么这个表单提交处理逻辑最好是放到表单对应的app里面的views里边处理就行。

所以comment/views.py里的update_comment方法，我们数据提交还是提交到这个位置。
那这里的代码，我们验证就不需要手动验证了，我们把这个验证写到forms里，在forms里面进行验证，需要验证的有：是否登录用户、评论对象是否存在，这里的验证 比如评论对象，不是由一个字段决定的，而是由content_type和object_id两个字段决定的，这里我们就放到clean里进行处理；另外，用户登录验证，在这里也没有一个对应的字段，所以也最好放在clean里进行判断处理。修改comment/forms.py如下（参照comment/views.py里面的update_comment）：

然后优化一下处理方法，修改comment/views.py如下：
我们这里是处理提交数据，是一个POST请求，这里我们就不做request请求方法的判断了，我们直接对其实例化
我们可以对比下修改前后的views.py内容：

• 修改前的views.py代码：

• 修改后的views.py：
  1、表单数据验证部分
  2、我们还有一个地方需要验证，登录用户验证。也就是if not request.user.is_authenticated:这一步，这个虽然可以在if comment_form.is_valid():这一步之前进行检查验证，但是这不太符合django form的处理逻辑，验证的东西最好都放在if comment_form.is_valid():里面进行处理，验证的东西都放在Form里面，而我们的Form里面没有request.user给我们去使用，那我们应该怎么处理？这里就有一个方法，我们要把user传给Form，我们利用Python里面的关键字传参，然后在CommentForm这边接收处理（python里面的类的实例化方法）

  • 修改forms.py如下：
    
  • 修改views.py如下：
    

刷新页面，输入评论，没有问题。那么我们的django form已经把html变成了django form

【这一节指出了一个重要原则就是，能够用form验证的尽量让form 去验证，让form来分担view的工作】

进一步，我们要将评论框变成富文本编辑框。打开github官网，搜索django-ckeditor，找到widget下的示例代码，我们可以参考这个进行修改

修改forms.py如下：

然后修改模板页面对应的地方，blog_detail.html修改如下：

刷新页面，可以看到评论区就出现了富文本编辑框，富文本编辑框跟后端页面都是一样的 ，使用的都是默认的一些配置

接下来 讲解怎么去配置这个编辑框

修改forms.py如下：

然后在mysite/settings.py里面加入代码：

刷新页面前：
刷新页面后：

接着再进一步完善。
去掉自带的“Text”标签。修改blog_detail.html如下：

刷新：

另外，我们想要让评论框撑满页面

修改blog/static/blog/blog.css：

刷新

至此，富文本编辑功能我们已经实现了。
下面要讲下一个东西，我们评论完提交的时候页面总会重新刷新一下，这里我们需要让它不刷新页面，而只是提交数据 出现在评论列表里，这要怎么实现呢？这就要用到ajax这个东西。ajax是一种异步请求，不跟我们整个页面发送请求在一起，它是自己独立的一个请求 一个处理逻辑，它可以在前端页面自己把数据提交过去然后获取到相关内容。可以查看jquery ajax：https://www.w3school.com.cn/jquery/ajax_ajax.asp、https://api.jquery.com/jquery.ajax/

2、ajax提交

• 正常提交会刷新页面，可以ajax提交数据
• ajax提交是一种不刷新页面的异步提交方式
  

修改templates/base.html如下，加多一个代码块，叫做script_extends：

修改blog_detail.html如下，加进来该代码块，然后编写异步提交的逻辑：
现在提交表单标签里加一个id标签id="comment_form"
form表单提交 我们点提交按钮的时候，我们不让它直接提交，因为直接提交就会刷新页面，那么我们就要先把提交这个行为进行截取，

接下来我们处理返回的数据，因为返回的数据是直接丢出来一整个html内容，不符合我们想要的数据，我们这里最好返回一个缺省数据，给到ajax里面的data，修改views.py如下：

这里可以做一个简单的测试：
刷新页面，按F12，点console控制台位置，我们不输入评论内容，直接点击“评论”按钮，可以看到控制台返回一个“ERROR”，然后我们评论一些内容，再点击，可以看到控制台返回一个“SUCCESS”

还有一点，我们提交评论后，得刷新页面，才能在评论列表里看到新的评论内容。对于这个问题，我们可以把提交成功之后的数据拿回来，写到评论列表里面，这样的话，就不用我们再刷新一次，就能在评论列表里看到最新的评论内容了
修改views.py如下：

刷新页面：

可以看到，我们就得到了这些数据，那我们就需要把这些数据插入到页面上评论列表的第一条的位置上，这里我们也可以用jquery代码实现
修改blog_detail.html如下：

刷新页面，提交评论

这里有几个地方要处理下，

1）blog_detail.html里面之前的过滤器：|date:"Y-m-d H:n:s"应该为|date:"Y-m-d H:i:s"

2）之前评论之后评论列表里的内容是带有HTML的，我们最好也用过滤器转一下

3）时间显示，有时间差，我们需要在settings.py里面设置一下

4）页面点击提交评论之后，文本框里面的评论内容还在，我们最好把它给清理掉。修改blog_detail.html如下：

另外当status不为SUCCESS时，也就是上述代码中的else情况（错误情况下），我们要把错误信息显示出来，一种是弹窗的形式，一种是写一条文本的形式，这里我们直接把它写成文本形式。
修改blog_detail.html如下，直观文本我们要找个地方显示，我们在评论框下面显示，添加一个span标签，给定class类为text-danger，id给定为comment_error：

然后显示错误信息的代码编写如下，这里加一个text方法，这个方法是设置错误信息文本，这个错误信息需要处理方法那边返回回来，我们先让它返回到新添加的参数“message”中，后面再在views.py中编写添加上这个对应的参数：

修改views.py如下。添加错误信息字段，这里如果只取第一个[0]，则默认抛出form错误信息列表里面的第一个“这个字段是必填项”，如果我们不想这么显示的话，我们就在forms.py多添加一个属性。这里再加一个[0]，是为了让控制台输出的message为字符串形式

修改forms.py如下，加多一个属性error_message（如果不添加这个属性，上述error list取第一个[0]得到的会是默认的）

刷新页面

还有一个细节，这个错误信息不一定每次等到访问提交才能显示，比如评论内容为空，我们可以在提交之前就做个判断进行避免，修改blog_detail.html如下：

刷新页面，可以看到，当评论为空，点击“评论”后，不进行提交，而是直接显示错误信息

3、更正

• 日期过滤器：Y-m-d H:i:s
• settings设置时区：TIME_ZONE='Asia/Shanghai'