本教程内容已过时,更新版教程请访问: Django 博客开发入门教程。
这是 Django 博客教程的第 13 篇,在阅读此篇教程以前,请确保你已阅读 Django 博客教程的前 12 篇:
1. Django 博客教程:前言
2. 搭建开发环境
3. 建立我们的 django 博客应用
4. 创建 django 博客的数据库模型
5. 让 django 完成翻译——迁移数据库模型
6. django 博客首页视图
7. 真正的 django 博客首页视图
8. 在 django admin 后台发布我们的文章
9. 博客文章详情页
10. 支持 markdown 语法和代码高亮
11. 页面侧边栏
12. 分类与归档
相对来说,评论其实是另外一个比较独立的功能了。django 提倡,如果功能相对比较独立的话,最好是创建一个 app,把相应的功能代码写到这个 app 里。我们的第一个 app 叫 blog,它里面放了展示博客文章列表和细节等相关功能的代码。而这里我们再创建一个 app,名为 comments,这里面将存放和评论功能相关的代码。首先激活虚拟环境,然后输入如下命令创建一个新的应用:
python manage.py startapp comments
我们可以看到生成的 app 目录结构是一样的。关于创建 app 以及 django 的目录结构前面已经有过介绍,如果你需要复习的话请[点击这里][]。创建新的 app 后一定要记得在 settings 里注册这个 app,django 才知道这是一个 app:
blogproject/settings.py
...
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'blog',
# 注册新创建的 comments app
'comments',
]
...
设计评论的数据库模型
用户评论的数据必须被存储到数据库,以便其他用户访问时 django 能从数据库取回这些数据然后展示给访问的用户,因此我们需要为评论设计数据库模型,这和设计文章、分类、标签的数据库模型是一样的,如果你忘了怎么做,回这里参考再复习一下我们当初的做法吧。我们的评论模型设计如下:
comments/models.py
@python_2_unicode_compatible
class Comment(models.Model):
name = models.CharField(max_length=100)
email = models.EmailField(max_length=255)
url = models.URLField(blank=True)
text = models.TextField()
created_time = models.DateTimeField(auto_now_add=True)
post = models.ForeignKey('blog.Post')
def __str__(self):
return self.text[:20]
这里我们会记录评论用户的 name(名字)、email(邮箱)、url(个人网站),用户发表的内容将存放在 text 字段里,created_time 记录评论时间。最后,这个评论是关联到某篇文章(Post)的,由于一个评论只能属于一篇文章,一篇文章可以有多个评论,是一对多的关系,因此这里我们使用了 ForeignKey。关于 ForeKey的只是我们前面已有介绍。
创建了数据库模型就要迁移,迁移数据库的命令也在前面讲过。在虚拟环境下运行以下的命令:
python manage.py makemigrations
python manage.py migrate
评论表单设计
这一节我们将学习一个全新的 django 知识:表单。那么什么是表单呢?基本的 html 知识告诉我们,在 html 文档中这样的代码表示一个表单:
<form action="" method="post">
<input type="text" name="username" />
<input type="password" name="password" />
<input type="submit" value="login" />
</form>
为什么需要表单呢?考虑用户在我们博客网站上发表评论的过程。当用户想要发表评论时,他找到我们给他展示的一个评论表单(我们已经看到在文章详情页的底部就有一个评论表单,你将看到表单呈现给我们的样子),然后根据表单的要求填写相应的数据。之后用户点击评论按钮,这些数据就会发送给某个 URL。我们知道每一个 URL 对应着一个 django 的视图函数,于是 django 调用这个视图函数,我们在视图函数中写上处理用户通过表单提交上来的数据的代码,比如验证数据的合法性并且保存数据到数据库中,那么用户的评论就被 django 后台处理了。如果通过表单提交的数据存在错误,那么我们把错误信息返回给用户,并在前端重新渲染,并要求用户根据错误信息修正表单中不符合格式的数据,再重新提交。
django 的表单功能就是帮我们完成上述所说的表单处理逻辑,表单对 django 来说是一个内容丰富的话题,很难通过教程中的这么一个例子涵盖其全部用法。因此我们强烈建议你在完成本教程后接下来的学习中仔细阅读 django 官方文档关于表单的介绍,因为表单在 web 开发中会经常遇到。
下面开始编写评论表单代码。在 comments 目录下(和 models.py 同级)创建一个 forms.py 文件,我们的表单代码如下:
blogproject/comments/forms.py
from django import forms
from .models import Comment
class CommentForm(forms.ModelForm):
class Meta:
model = Comment
fields = ['name', 'email', 'url', 'text']
widgets = {
'name': forms.TextInput(attrs={
'placeholder': "名字",
}),
'email': forms.TextInput(attrs={
'placeholder': "邮箱",
}),
'url': forms.TextInput(attrs={
'placeholder': "网址",
}),
}
要使用 django 的表单功能,我们首先导入 forms 模块。django 的表单类必须继承自 forms.Form
类或者 forms.ModelForm
类。如果表单对应有一个数据库模型(例如这里的评论表单对应着评论模型),那么使用 ModelForm
类会简单很多,这是 django 为我们提供的方便。之后我们在表单的内部类 Meta 里指定一些和表单相关的东西。model = Comment
表明这个表单对应的数据库模型是 Comment 类。fields = ['name', 'email', 'url', 'text']
指定了表单需要显示的字段,这里我们指定了 name、email、url、text 需要显示。widgets 决定了各个字段在前端渲染的输入框类型,例如 TextInput,在前端会被渲染成这样的输入框:<input type="text">
,另外我们还给输入框加了一些属性,如 placeholder(如果不明白什么意思请查看 html 的表单部分的知识)。
关于表单进一步的解释
django 为什么要给我们提供一个表单类呢?为了便于理解,我们可以把表单和前面讲过的 django ORM 系统做对比。回想一下,我们使用数据库保存我们创建的博客文章,但是我们从头到尾没有写过任何和数据库有关的代码(要知道数据库自身也有一门数据库语言),这是因为 django 的 ORM 系统内部帮我们做了一些事情。我们遵循 django 的规范写的一些 Python 代码,例如创建 Post、Category 类,然后通过运行数据库迁移命令将这些代码反应到数据库。
django 的表单和这个思想类似,正常的前端表单代码应该是和本文开头所提及的那样,但是我们目前并没有写这些代码,而是写了一个 CommentForm 这个 Python 类。通过调用这个类的一些方法和属性,django 将自动为我们创建常规的表单代码,接下来的教程我们就会看到具体是怎么做的。
视图函数
当用户提交表单中的数据后,django 需要调用相应的视图函数来处理这些数据,下面开始写我们视图函数处理逻辑:
comments/views.py
from django.shortcuts import render, get_object_or_404, redirect
from blog.models import Post
from .models import Comment
from .forms import CommentForm
def post_comment(request, post_pk):
# 先获取被评论的文章,因为后面需要把评论和被评论的文章关联起来
# 这里我们使用了 django 提供的一个快捷函数 get_object_or_404
# 这个函数的作用是当获取的文章(Post)存在时,则获取;否则返回 404 页面给用户
post = get_object_or_404(Post, pk=post_pk)
# http 请求有 get 和 post 两种方法,一般用户通过表单提交数据都是通过 post 请求,
# 因此只有当用户的请求为 post 时才需要处理表单数据
if request.method == 'POST':
# 用户提交的数据存在 request.POST
# 我们利用这些数据构造了 CommentForm 的实例,这样 django 的表单就生成了
form = CommentForm(request.POST)
# 当调用 form.is_valid() 方法时,django 自动帮我们检查表单的数据是否符合格式要求
if form.is_valid():
# 检查到数据是合法的,调用表单的 save 方法保存数据到数据库
# commit=False 的作用是仅仅利用表单的数据生成 Comment 模型类的实例
# 但还不保存数据到数据库
comment = form.save(commit=False)
# 将评论和被评论的文章关联起来
comment.post = post
# 最终将评论数据保存进数据库,调用模型实例的 save 方法
comment.save()
# 重定向到 post 的详情页
return redirect(post)
else:
# 检查到数据不合法,重新渲染详情页,并且渲染表单的错误
# 因此我们传了三个模板变量给 detail.html
# 一个是文章(Post),一个是评论列表,一个是表单 form
# 注意这里我们用到了 post.comment_set.all() 方法
# 这个用法有点类似于 Post.objects.all()
# 其作用是获取这篇 post 下的的全部评论
# 因为 Post 和 Comment 是 ForeignKey 关联的
# 因此使用 post.comment_set.all() 反向查询全部评论
# 正向查询就直接是 comment.post
comment_list = post.comment_set.all()
context = {'post': post,
'form': form,
'comment_list': comment_list
}
return render(request, 'blog/detail.html', context=context)
# 不是 post 请求,说明用户没有提交数据,重定向到文章详情页
return redirect(post)
绑定 URL
视图函数需要和 URL 绑定,这里我们在 comment app 中再建一个 urls.py 文件,写上 url 模式:
comments/urls.py
from django.conf.urls import url
from . import views
app_name = 'comments'
urlpatterns = [
url(r'^comment/post/(?P<post_pk>[0-9]+)/$', views.post_comment, name='post_comment'),
]
最后要在项目目录的 urls.py 里关联这个 urls.py 文件:
blogproject/urls.py
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'', include('blog.urls')),
+ url(r'', include('comments.urls')),
]
更新文章详情页面的视图函数
我们可以看到评论表单和评论列表是位于文章详情页面的,处理文章详情页面的视图函数是 detail,相应地需要更新 detail,让它生成表单和从数据库获取评论数据,然后传递给模板显示:
blog/views.py
import markdown
from django.shortcuts import render, get_object_or_404
+ from comments.forms import CommentForm
from .models import Post, Category
def detail(request, pk):
post = get_object_or_404(Post, pk=pk)
post.body = markdown.markdown(post.body,
extensions=[
'markdown.extensions.extra',
'markdown.extensions.codehilite',
'markdown.extensions.toc',
])
form = CommentForm()
# 获取这篇 post 下的全部评论
comment_list = post.comment_set.all()
context = {'post': post,
'form': form,
'comment_list': comment_list
}
return render(request, 'blog/detail.html', context=context)
在前端渲染表单
使用 django 表单的一个好处就是 django 能帮我们自动渲染表单。我们在表单的视图函数里传递了一个 form 变量给模板,这个变量就包含了自动生成 html 表单的全部数据。在 detail.html 中通过 form 来自动生成表单。删掉原来用于占位的html 表单代码,即下面这段代码:
<form action="#" method="post" class="comment-form">
<div class="row">
<div class="col-md-4">
<input type="text" name="name" placeholder="名字" required>
</div>
...
</div> <!-- row -->
</form>
替换成如下的代码:
<form action="{% url 'comments:post_comment' post.pk %}" method="post" class="comment-form">
{% csrf_token %}
<div class="row">
<div class="col-md-4">
<label for="{{ form.name.id_for_label }}">Name:</label>
{{ form.name }}
{{ form.name.errors }}
</div>
<div class="col-md-4">
<label for="{{ form.email.id_for_label }}">Email:</label>
{{ form.email }}
{{ form.name.errors }}
</div>
<div class="col-md-4">
<label for="{{ form.url.id_for_label }}">Url:</label>
{{ form.url }}
{{ form.url.errors }}
</div>
<div class="col-md-12">
<label for="{{ form.text.id_for_label }}">Comment:</label>
{{ form.text }}
{{ form.text.errors }}
<button type="submit"><span>发表</span></button>
</div>
</div> <!-- row -->
</form>
显示评论内容
在 detail 视图函数我们获取了全部评论数据,并通过 comment_list 传递给了模板。和处理 index 页面的文章列表方式是一样的,我们在模板中通过 {% for %} 模板标签来循环显示文章对应的全部评论内容。
删掉占位用的评论内容的 html 代码,即如下的代码:
<div class="comment-list">
<h2>评论列表</h2>
<ul class="list-unstyled">
<li class="comment-item">
<span class="name">追梦人物</span>
<time class="date">2017年3月12日 14:56</time>
<div class="text">
还不错哦
</div>
</li>
...
</ul>
</div>
替换成如下的代码:
<div class="comment-list">
<h2>评论列表</h2>
<ul class="list-unstyled">
{% for comment in comment_list %}
<li class="comment-item">
<span class="name">{{ comment.name }}</span>
<time class="date">{{ comment.created_time }}</time>
<div class="text">
{{ comment.text }}
</div>
</li>
{% empty %}
暂无评论
{% endfor %}
</ul>
</div>