关键词：
一、文章评论功能实现流程
文章评论包含两种评论，根评论：对文章的评论；子评论：对评论的评论。两者的区别在于是否存在父评论。
实现流程：1、构建样式；2、提交根评论；3、显示根评论（分为render显示和Ajax显示）；4、提交子评论；5、显示子评论（分为render显示和Ajax显示）；6、评论树显示（博客园是楼层显示）。
二、构建评论样式
1、article_detail.html:
# 文章点赞,清除浮动 #
<div class="clearfix">
<div id="div_digg">
# 推荐 #
<div class="diggit action">
<span class="diggnum" id="digg_count"> article_obj.up_count </span>
</div>
# 点灭 #
<div class="buryit action">
<span class="diggnum" id="bury_count"> article_obj.down_count </span>
</div>
<div class="clear"></div>
<div class="diggword" id="digg_tips" style="color: red;"></div>
</div>
</div>
<div class="comments">
<p>发表评论</p>
<p>昵称： <input type="text" id="tbCommentAuthor" class="author" disabled="disabled" size="50" value=" request.user.username "></p>
<p>评论内容</p>
<textarea name="" id="" cols="60" rows="10"></textarea> # textarea是一个内联标签 #
<p><button class="btn btn-default comment_btn">提交评论</button></p>
</div>
由于id=div_digg中存在浮动，显示时会造成点赞区域和评论区域在同一行，在点赞区外包了一层div标签，添加bootstrap的clearfix清除浮动。
由于textarea是一个内联标签，下面直接接button标签，文本框和按钮会显示在同一行，同样给按钮包一层p标签，让按钮在文本框下方显示。
2、article_detail.css评论区样式调整
/* 评论 */
input.author
background-image: url("/static/font/icon_form.gif");
background-repeat: no-repeat;
border: 1px solid #ccc;
padding: 4px 4px 4px 30px;
width: 300px;
font-size: 13px;
background-position: 3px -3px;
3、显示效果如下所示：
三、提交根评论
1、创建评论路由
urlpatterns = [
...
path(‘digg/‘, views.digg), # 点赞
path(‘comment/‘, views.comment), # 评论
...
]
2、创建评论视图函数comment
def comment(request):
print(request.POST)
article_id = request.POST.get("article_id")
pid = request.POST.get("pid")
content = request.POST.get("content")
user_id = request.user.pk
# 在数据库生成一条评论对象 父评论为空是根评论，不为空则是子评论
comment_obj = models.Comment.objects.create(user_id=user_id, article_id=article_id, content=content, parent_comment_id=pid)
return HttpResponse("comment")
3、在article_detail.html模板中创建评论事件
<script>
// 点赞请求
$(‘#div_digg .action‘).click(function ()
...
// 评论请求
$(".comment_btn").click(function ()
var content = $(‘#comment_content‘).val(); // 拿到评论框的内容
var pid = ""; // 父评论默认为空
$.ajax(
url: "/comment/",
type: "post",
data:
‘csrfmiddlewaretoken‘: $("[name= ‘csrfmiddlewaretoken‘]").val(),
‘article_id‘: " article_obj.pk ",
‘content‘: content,
‘pid‘: pid,
,
success:function (data)
console.log(data);
// 提交后清空评论框
$("#comment_content").val("");
)
)
</script>
4、提交评论后，在数据库blog_comment表中可以看到评论记录
四、显示根评论
1、render显示根评论
（1）要render显示评论，需要修改article_detail视图函数
def article_detail(request, username, article_id):
user = UserInfo.objects.filter(username=username).first()
blog = user.blog
article_obj = models.Article.objects.filter(pk=article_id).first()
comment_list = models.Comment.objects.filter(article_id=article_id)
return render(request, "article_detail.html", locals())
传递comment_list到模板中，根据过滤条件获取的是当前文章的评论。
（2）在article_detail.html中构建评论列表
# 文章评论列表 #
<div class="comments">
<p>评论列表</p>
<ul class="list-group comment_list">
% for comment in comment_list %
<li class="list-group-item">
<div>
<a href=""># forloop.counter 楼</a>
<span> comment.create_time|date:"Y-m-d H:i" </span>
<a href=""><span>< comment.user.username /span></a>
<a href="" class="pull-right">回复</a>
</div>
<div class="comment_con">
# 评论内容 #
<p> comment.content </p>
</div>
</li>
% endfor %
</ul>
<p>发表评论</p>
<p>昵称： <input type="text" id="tbCommentAuthor" class="author" disabled="disabled" size="50" value=" request.user.username "></p>
<p>评论内容</p>
<textarea name="" id="comment_content" cols="60" rows="10"></textarea> # textarea是一个内联标签 #
<p><button class="btn btn-default comment_btn">提交评论</button></p>
</div>
1）利用bootstrap的列表组组件来构建文章列表样式。
2）修饰评论内容样式article_detail.css：
.comment_con
margin-top: 10px;
（3）显示效果
2、Ajax显示根评论
（1）更新comment视图函数，准备返回给ajax回调函数处理的数据
def comment(request):
print(request.POST)
article_id = request.POST.get("article_id")
pid = request.POST.get("pid")
content = request.POST.get("content")
user_id = request.user.pk
# 在数据库生成一条评论对象 父评论为空是根评论，不为空则是子评论
comment_obj = models.Comment.objects.create(user_id=user_id, article_id=article_id, content=content, parent_comment_id=pid)
response =
# create_time是一个datetime.datetime对象，在json序列化时不能对对象进行json序列化，必须进行strftime的转换
response["create_time"] = comment_obj.create_time.strftime("%Y-%m-%d %X")
# 评论人
response["username"] = request.user.username
# 内容
response["content"] = content
return JsonResponse(response)
（2）回调函数处理数据，显示新的评论
// 评论请求
$(".comment_btn").click(function ()
var content = $(‘#comment_content‘).val(); // 拿到评论框的内容
var pid = ""; // 父评论默认为空
$.ajax(
url: "/comment/",
type: "post",
data:
‘csrfmiddlewaretoken‘: $("[name= ‘csrfmiddlewaretoken‘]").val(),
‘article_id‘: " article_obj.pk ",
‘content‘: content,
‘pid‘: pid,
,
success: function (data)
console.log(data);
// 获取视图函数返回的数据
var create_time = data.create_time;
var username = data.username;
var content = data.content;
// ES6特性：字符串模板。
// ES6中允许使用反引号 ` 来创建字符串，此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量$vraible。
var s = `
<li class="list-group-item">
<div>
<span>$create_time</span>
<a href=""><span><$username/span></a>
<a href="" class="pull-right">回复</a>
</div>
<div class="comment_con">
# 评论内容 #
<p>$content</p>
</div>
</li>`;
// DOM操作把标签字符串整个放入ul的标签中去
$("ul.comment_list").append(s);
// 提交后清空评论框
$("#comment_content").val("");
)
)
注意：1）ES6中允许使用反引号 ` 来创建字符串，此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量$vraible。
//产生一个随机数 var num=Math.random(); //将这个数字输出到console console.log(`your num is $num`);
2）获取视图函数返回的数据：
// 获取视图函数返回的数据 var create_time = data.create_time; var username = data.username; var content = data.content;
（3）显示效果如下：
五、提交子评论
6功能4：文章详情页(代码片段)
1、文章详情页的设计#文章详情页re_path(r‘^(?P<username>w+)/articles/(?P<article_id>d+)$‘,views.article_detail,name=‘article_detail‘), 2、文章详情页的数据构建defarticle_detail(request,username,art 查看详情
django项目试炼blog--文章详情页2--前端样式的继承与楼评论显示(代码片段)
viewsfromdjango.dbimporttransactiondefcomment(request):article_id=request.POST.get(‘article_id‘)content=request.POST.get(‘content‘)pid=request.POST.get(‘parent_id‘)#事务操作生成评论，文章数据中评论总数自动+1（同时执行）withtra 查看详情
团队开发冲刺第六天（新闻详情页的展示）
...成的： 新闻页点击后，跳转页面到新闻详情页，查看文章，同时从数据库中读取相应的对应文章的图片，加载出来；评论，点赞，关注，收藏功能未实现。遇到的问题： 一开始在想用自定义的可滑动的textview来装正文，... 查看详情
基于springboot的个人博客系统（源码+数据库）
...、开发技术三、开发环境四、页面展示1.登录页面2.首页3.文章详情页面4.文章评论页面5.后台页面6.后台文件编辑页面7.后台文章管理列表页面五、文件组织结构六、数据库设计1. 文章详情表t_article2.文章评论表t_comment3.文章... 查看详情
django项目试炼blog--文章详情页1--点赞功能(代码片段)
url#文章详情页re_path(r‘(?P<username>\w+)/article/(?P<article_id>\d+)/$‘,views.article),#点赞path(‘up_down/‘,views.up_down), viewsfromdjango.db.modelsimportFdefup_down(request):sign=re 查看详情
文章详情页(代码片段)
一、文章详情页访问设计 访问文章详情页，访问文章路径类似：https://www.cnblogs.com/wupeiqi/articles/3148888.html 参照访问路径编写文章详情页路由如下：urlpatterns=[...#文章详情页re_path(‘^(?P<username>w+)/articles/(?P<article_id>... 查看详情
bbs项目三(代码片段)
...和代码量稍微多了一点)，认真听~侧边栏制作成inclusion_tag文章的点赞点踩(重点)文章的评论(重点)先只做根评论之后再做子评论小bug完善文章详情页#url设计/username/article/1#先验证url是否会被其他url顶替#文章详情页和个人站点基本... 查看详情
django框架学习----视图与模板（详情页的上下篇文章跳转跳转）
...首页到详情页的跳转之后，接下来就是实现详情的上下篇文章的跳转第一步：挑选按钮 把选中的按钮复制到我们的detail页面里面，并用一个div包含起来，如下图： 在上图中我定义了两个变量，他现在是不存在的... 查看详情
分析csdn文章列表页与文章详情页-java网络爬虫系统性学习与实战系列
分析CSDN文章列表页与文章详情页-Java网络爬虫系统性学习与实战系列（7）文章目录联系方式概述主页分析页面列表分析使用谷歌浏览器分析获取文章的URL地址文章详情页分析CSDN列表页的坑系列文章地址：Java网络爬虫系统性学习... 查看详情
springboot制作个人博客-博客详情评论
文章目录1、设置隐含域2、评论表单验证3、发布按钮事件4、效果5、发送请求6、回复7、修改清除方法8、功能实现9、定义CommentService接口10、定义CommentRepository接口11、实现接口方法12、存放一张图片13、定义图片路径14、效果15、... 查看详情
day87-bbs项目数据库设计与简单登陆验证码(代码片段)
...码)(2)基于forms组件和Ajax实现注册功能(3)设计系统首页（文章列表渲染）(4)设计个人站点页面---跨表查询，分组查询(5)文章详情页(6)实现文章点赞功能(7)实现文章的评论－－－文章的评论－－－评论的评论(8)副文本编辑框和防止xs... 查看详情
详情页(代码片段)
首页展示的是所有文章的列表，当用户看到感兴趣的文章时，他点击文章的标题或者继续阅读的按钮，应该跳转到文章的详情页面来阅读文章的详细内容。现在让我们来开发博客的详情页面，有了前面的基础，... 查看详情
博客项目实现文章评论功能(重点是评论回复)
...e_blog有了我的已成型的项目和代码，可以更容易理解这篇文章。 本篇文章记录下自己博客项目评论功能实现的全过程，重点其实是评论回复功能。 【一，写评论】写评论部分我没有使用富文本编辑器，只是单纯 查看详情
如何在 SwiftUI 中从一个详情页跳转到另一个详情页并返回列表页？
...时间】：2021-02-0815:04:53【问题描述】：当我使用“下一篇文章”按钮跳转到索引为3的文章详情页面时，我想直接返回文章列表页面而不是索引为2的文章详情页面。我尝试搜索方法返回指定页面，销毁页面，但是我没有 查看详情
bbs+blog项目开发(代码片段)
...码)(2)基于forms组件和Ajax实现注册功能(3)设计系统首页（文章列表渲染）(4)设计个人站点页面(5)文章详情页(6)实现文章点赞功能(7)实现文章的评论－－－文章的评论－－－评论的评论(8)富文本编辑框和防止xss攻击1.2表结构设计博... 查看详情
bbs-文章详情页(代码片段)
一.文章详情页的设计和数据构建 url.py #文章详情页re_path(‘^(?P<username>w+)/articles/(?P<article_id>d+)$‘,views.article_detail),#w+:数字和字母 views.pydefget_query_data(username):#查询相关的数据，获取分类的数... 查看详情
bbs项目需求分析及表格创建(代码片段)
...册功能（基于ajax，基于forms验证）3.博客首页4.个人站点5.文章详情6.点赞，点踩7.评论 --根评论 --子评论8.后台管理 --文章展示 --新增文章9.发布文章 二.项目表格创建1.需要创建的表格用户信息表------UserInfo个人... 查看详情
文章详情(-)
###文章详细页-个人主页文章链接/blog/{{current_user.username}}/articles/{{article.nid}}-urlsurl(r‘^(?P<username>.*)/articles/(?P<article_id>d+)‘,views.articleDetail)前端-继承个人首页的导航和左边侧栏-内容部分重新写-标题引入bootst 查看详情