文章目录

  • 23、html表单提交评论
  • 1、提交评论
  • 2、进一步讲解


23、html表单提交评论

这节课想要做成如下的效果

jQuery评论框插入表情图片代码 html评论页面_html


jQuery评论框插入表情图片代码 html评论页面_django_02


jQuery评论框插入表情图片代码 html评论页面_刷新页面_03

1、提交评论

  • 评论对象
  • 评论内容
  • 评论时间
  • 评论者

先简单的对页面进行css布局样式优化,打开blog_detail.html修改如下:

jQuery评论框插入表情图片代码 html评论页面_刷新页面_04

修改blog.css如下:

jQuery评论框插入表情图片代码 html评论页面_html_05


刷新页面

jQuery评论框插入表情图片代码 html评论页面_刷新页面_06

登录之后会跳转到首页,我们还要去找到原来博客的页面,有点不方便。这里最好点登录的时候会自动跳转到原来页面。

在mysite/views.py中,登录成功之后我们重定向到首页那我们有没有办法记录跳转之前的页面,修改mysite/views.py如下。request发送请求的时候还会发送一些东西,其中有一个叫做请求头,记录了一些信息包括是从哪个页面跳转过来的,这里我们将它获取到,登录之后就重新定向到它之前进来的那个页面:

jQuery评论框插入表情图片代码 html评论页面_html_07

修改blog_detail.html:

jQuery评论框插入表情图片代码 html评论页面_刷新页面_08

刷新页面

jQuery评论框插入表情图片代码 html评论页面_python_09


jQuery评论框插入表情图片代码 html评论页面_python_10

那么现在后端要写一个提交评论的处理方法comment/views.py,接收这个请求处理

首先,这个处理方法有对应的url,所以在comment下新建一个urls.py文件,写入如下代码:

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

urlpatterns = [
	path('update_comment', views.update_comment,  name='update_comment')
]

接着在全局路由里面加上这个路由设置,打开mysite/urls.py:

jQuery评论框插入表情图片代码 html评论页面_python_11

接着实现这个处理方法,打开comment/views.py写入如下代码:

jQuery评论框插入表情图片代码 html评论页面_刷新页面_12

# # C:\Users\12482\Desktop\py_learn\Django2.0_chapter46\mysite_env\mysite\comment\views.py
from django.shortcuts import render, redirect
from django.contrib.contenttypes.models import ContentType
from django.urls import reverse
from .models import Comment

# Create your views here.

def update_comment(request):
	user = request.user
	text = request.POST.get('text', '')

	content_type = request.POST.get('content_type', '')
	object_id = int(request.POST.get('object_id', ''))
	# ContentType.objects.get(model=content_type)得到具体博客的ContentType类型,再.model_class()由类型得到Blog具体模型这个class
	model_class = ContentType.objects.get(model=content_type).model_class()
	model_obj = model_class.objects.get(pk=object_id)

	comment = Comment()	# 模型实例化
	comment.user = user
	comment.text = text
	# Blog.objects.get(pk=object_id)
	comment.content_object = model_obj # content_object是一个具体的博客对象,我们要通过content_type和object_id这两个去得到。
	# 而我们通常获取博客是通过Blog这个模型 Blog.objects.get(pk=object_id)来获取得到的,这里没有Blog模型,可以直接引用。
	# 还有另外一种途径,我们可以根据ContentType这个类型进行处理(这里建议用这种方法处理)
	comment.save()

	referer = request.META.get('HTTP_REFERER', reverse('home'))
	return redirect(referer) # 处理完毕,还需要返回一个内容给前端页面,跟登陆一样的操作,重定向回到原来的页面

然后将blog_detail.html里面提交评论部分的action补充完整:

jQuery评论框插入表情图片代码 html评论页面_html_13

刷新页面,写一条评论提交,然后在后台管理页面查看

jQuery评论框插入表情图片代码 html评论页面_html_14


jQuery评论框插入表情图片代码 html评论页面_html_15

接下来一步,就要把这个评论列表内容显示出来,我们打开博客详情页面blog/views.py,这里最好我们也把评论的内容取到并且返回给前端模板页面,修改blog/views.py如下:

jQuery评论框插入表情图片代码 html评论页面_刷新页面_16

前端页面再获取评论内容,然后修改前端页面blog_detail.html如下:

jQuery评论框插入表情图片代码 html评论页面_django_17

刷新页面

jQuery评论框插入表情图片代码 html评论页面_刷新页面_18

这里最好按照时间倒序排列,我们改一下评论模型models.py:

jQuery评论框插入表情图片代码 html评论页面_刷新页面_19


jQuery评论框插入表情图片代码 html评论页面_html_20

我们再回到提交评论这里,这里还有一个问题,如果没有写入评论内容,评论一条空的内容和没有评论是否一样,空评论是没有意义的,所以我们需要进行一个判断。修改comment//views.py如下:

jQuery评论框插入表情图片代码 html评论页面_django_21

刷新页面,我们不输入评论,直接提交

jQuery评论框插入表情图片代码 html评论页面_html_22

这里我们还可以做一个优化处理,最好在错误信息页面有个返回

先要修改comment/views.py如下:

jQuery评论框插入表情图片代码 html评论页面_jQuery评论框插入表情图片代码_23

修改error.html如下:

jQuery评论框插入表情图片代码 html评论页面_刷新页面_24


jQuery评论框插入表情图片代码 html评论页面_python_25

目前为止,我们提交评论部分已经做得比较完整了。前端页面有个form标签进行数据提交,提交到views方法处理,这里对它进行检查数据,数据没问题通过之后,我们再保存数据,保存后再重新打开原来那个页面。这里我们可以看到,用html的form标签直接提交数据会需要处理比较多的东西,像数据检查是否合理、int类型转换等,比较琐碎麻烦,后面我们会讲到Django Form,这个django框架把这些琐碎的事情用一种比较方便的形式处理使用

最后对页面做一些小的优化,我们可以用Bootstrap框架进行优化:“全局CSS样式”——“表单”

jQuery评论框插入表情图片代码 html评论页面_django_26

修改blog_detail.html如下:

jQuery评论框插入表情图片代码 html评论页面_jQuery评论框插入表情图片代码_27

刷新页面

jQuery评论框插入表情图片代码 html评论页面_python_28

2、进一步讲解

  • django forms类
  • 自定义模板标签