根评论:对文章的评论;
子评论:对评论的评论;
区别:是否有父评论。
评论的流程:
1构建样式
2提交根评论
3显示根评论
--------render显示
--------Ajax显示
4提交子评论
5显示子评论
--------render显示
--------Ajax显示
6评论树的显示
楼层结构:
111
222
333
树形结构:(有父子关系,楼层的深度、层级)
111
222
444
555
333
1.评论样式
article_detail.html
<div class="clearfix"> //评论和点赞在一行,这是由于点赞和反对做了一个浮动,而评论又在正常文档中,导致它的浮动没有清除;清除浮动在bootstrap里边加个clearfix
<div id=“div_digg...”>
</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="comment_content" cols="60" rows="10"></textarea> //没有必要放到form表单中,因为要Ajax提交;textarea为内联标签,给下面button加了个p标签。 <p> <button class="btn btn-default commment_btn">提交评论</button> // </p> </div>
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; }
2.提交(保存)根评论
客户端浏览器发 点赞或者评论按钮给服务端,触发一个事件(给它绑定一个click事件)发送请求,用户一点击就给服务器发请求了,有专门的视图函数接收这个请求,提交评论信息交给comment视图函数,视图函数构建一个评论对象保存到数据库里边,然后再把响应交给回调函数(ajax发完请求给它个回调) ,通过响应结果来判断如果对这个dom操作
views.py
#评论 def comment(request): print(request.POST) article_id = request.POST.get("article_id") #评论文章;user不用传,create_time不用传(评论的时间就是入库的时间),评论表的字段。 pid = request.POST.get("pid") content = request.POST.get("content") #评论内容 user_id = request.user.pk #当前登录人的id comment_obj = models.Comment.objects.create(user_id=user_id, article_id=article_id, content=content,parent_comment_id=pid) //pid是为空的,传给父评论 return HttpResponse("comment")
article_detail.html
//评论请求 $(".commment_btn").click(function () { var pid = "" var content = $("#comment_content").val(); //找到这个标签,val就是取里边的内容 $.ajax({ url:"/comment/", type:"post", data:{ "csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val(), "article_id":