Django博客项目（五）—— 博客详情及回复

前情提要：
Django博客项目（一）—— 注册和登录页面
Django博客项目（二）—— 博客首页
Django博客项目（三）—— 博客列表及搜索
Django博客项目（四）—— 发表博客

本文将介绍博客项目的最后一部分， 博客的详情页及发表回复部分。

图示

这里查看上一篇或下一篇博客依据的标准是博客发表时间，倒序排序。

为了使页面整洁，对评论区使用了分页显示。

使用了富文本编辑器进行评论回复。

修改配置文件

在settings.py文件中添加配置

# 每页显示的评论数量
REPLY_PER_PAGE = 5

路由配置

在应用的urls.py文件中添加路由

    path('posts/<int:postid>/', views.posts, name='posts'),
    path('posts/<int:postid>/<int:page>/', views.posts, name='posts'),

两个路由对应同一视图函数，目的是应用分页显示评论。

视图函数

在应用的views.py文件中添加视图函数

def posts(request, postid, page=1):
	# 如果是提交评论操作
    if request.method == 'POST':
        reply_author = request.user.username
        reply_content = request.POST.get('usercomment')
        reply_blog = postid
        # 创建回复对象，添加到数据库中
        the_reply = BlogReply(bid=reply_blog, author=reply_author, content=reply_content)
        the_reply.save()
        # 同时要将对应博客的回复数加1
        the_blog = BlogPost.objects.get(id=postid)
        the_blog.replycount += 1
        the_blog.save()
        return redirect(reverse('App01:posts', kwargs={"postid":postid}))

    the_blog = BlogPost.objects.filter(id=postid).first()
    blog_counts = len(BlogPost.objects.all())
    replies = BlogReply.objects.filter(bid=postid).all()
    latest_blogs = BlogPost.objects.order_by('-addtime')[:3]
    categories = BlogCategory.objects.all()
	# 分页显示评论
    paginator = Paginator(replies, REPLY_PER_PAGE)
    page_obj = paginator.page(int(page))
    reply_data = {
        'data': page_obj.object_list,
        'page_objs': page_obj,
        'page_range': paginator.page_range,
        'page_nums': paginator.num_pages,
    }
    return render(request, 'blog_r/post.html', locals())

前端页面

由于页面右侧部分和博客详情页面的设置相同，此处不再列出。只列出博客详情和回复的主要代码。

<!-- 1.博客详情 -->
<div class="post-meta d-flex justify-content-between">
	<!-- 博客分类 -->
    <div class="category"><a href="#">{{ the_blog.classname }}</a></div>
</div>
	<!-- 博客标题 -->
    <h1>{{ the_blog.title }}<a href="#"><i class="fa fa-bookmark-o"></i></a></h1>
<div class="post-footer d-flex align-items-center flex-column flex-sm-row"><a href="#" class="author d-flex align-items-center flex-wrap">
	<!-- 博客作者、发表时间、回复数 -->
    <div class="title"><span>{{ the_blog.author }}</span></div></a>
     <div class="d-flex align-items-center flex-wrap">       
     <div class="date"><i class="icon-clock"></i>{{ the_blog.addtime }}</div>
    <div class="comments meta-last"><i class="icon-comment"></i>{{ the_blog.replycount }}</div>
   </div>
</div>
	<!-- 博客内容 -->
   <div class="post-body">{{ the_blog.content | safe }}</div>
    <div class="posts-nav d-flex justify-content-between align-items-stretch flex-column flex-md-row">
    	<!-- 上一篇博客 -->
         {% if postid > 1 %}
         <a href="{% url 'App01:posts' postid|add:'-1' %}" class="prev-post text-left d-flex align-items-center">
         <div class="icon prev"><i class="fa fa-angle-left"></i></div>
         <div class="text"><strong class="text-primary">Previous Post </strong></div></a>
         {% endif %}
         <!-- 下一篇博客 -->
         {% if postid < blog_counts %}
            <a href="{% url 'App01:posts' postid|add:'1' %}" class="next-post text-right d-flex align-items-center justify-content-end">
            <div class="text"><strong class="text-primary">Next Post </strong></div>
            <div class="icon next"><i class="fa fa-angle-right">   </i></div></a>
         {% endif %}
</div>



<!-- 2.博客评论区 -->

                <div class="post-comments">
                  <header>
                  <!--评论总量 -->
                    <h3 class="h6">Post Comments<span class="no-of-comments">{{ the_blog.replycount }}</span></h3>
                  </header>
                   <!-- 循环，逐条显示评论 -->
                    {% for reply in reply_data.data %}
                  <div class="comment">
                    <div class="comment-header d-flex justify-content-between">
                      <div class="user d-flex align-items-center">
                        <div class="image"><img src="{% static 'blog_r/img/user.svg' %}" alt="..." class="img-fluid rounded-circle"></div>
                        <!--评论人、评论时间-->
                        <div class="title"><strong>{{ reply.author }}</strong><span class="date">{{ reply.addtime }}</span></div>
                      </div>
                    </div>
                    <div class="comment-body">
                     <!--评论内容-->
                      <p>{{ reply.content| safe }}</p>
                    </div>
                  </div>
                    {% endfor %}
                </div>
	<!--评论分页显示-->
        <nav aria-label="Page navigation example">
              <ul class="pagination pagination-template d-flex justify-content-center">
                  {% for page in reply_data.page_range %}
                    <li class="page-item"><a href="{% url 'App01:posts' postid=the_blog.id page=page %}" class="page-link">{{ page }}</a></li>
                  {% endfor %}
              </ul>
            </nav>


<!-- 3.博客回复框 -->
<!-- 必须登录才能进行回复 -->
{% if user.is_authenticated %}
                <div class="add-comment">
                  <header>
                    <h3 class="h6">Leave a reply</h3>
                  </header>
                  <!-- 富文本编辑器回复框 -->
                  <form action="{% url 'App01:posts' postid=the_blog.id %}" class="commenting-form" method="post">
                      {% csrf_token %}
                    <div class="row">
                      <div class="form-group col-md-12">
                        <textarea name="usercomment" id="usercomment" placeholder="Type your comment" class="form-control"></textarea>
                      </div>
                      <div class="form-group col-md-12">
                        <button type="submit" class="btn btn-secondary">Submit Comment</button>
                      </div>
                    </div>
                  </form>
                </div>
              {% endif %}

总结

今天将整个项目的最后一部分进行了介绍。
个人感觉，整个项目做下来之后，对于Django的使用有了更深的印象，各个知识点之间的融会贯通也做的更好了。