BBS - 文章评论
一、文章评论
<div class="comment_region">
<div class="row">
<div class="col-md-8">
<p>昵称：<input type="text" id="tbCommentAuthor" class="author" disabled="disabled" size="50" value="{{ request.user.username }}"></p>
<p>评论内容：</p>
<textarea name="" id="comment-text" cols="63" rows="10"></textarea>
<button class="btn btn-default pull-right comment-btn">提交</button>
</div>
</div> </div>
效果：
事件：
from django.db import transaction def comment(request):
article_id = request.POST.get('article_id')
content =request.POST.get('content')
pid = request.POST.get('pid')
user_id = request.user.pk res = {"state":True} with transaction.atomic(): # 事务 有关联
if not pid: # 提交根评论
obj = Comment.objects.create(user_id = user_id,article_id = article_id,content=content)
else: # 提交子评论
obj = Comment.objects.create(user_id=user_id, article_id=article_id, content=content,parent_comment_id=pid) # comment_count 加 + 1
Article.objects.filter(pk=article_id).update(comment_count=F("comment_count") + 1) res['time'] = obj.create_time.strftime('%Y-%m-%d %H:%M')
res['content'] = obj.content
if obj.parent_comment_id:
res['pid'] = obj.parent_comment_id
res['pidname'] = obj.parent_comment.user.username
return JsonResponse(res) def get_comment_tree(request,article_id):
ret = list(Comment.objects.filter(article_id=article_id).values('pk','content','parent_comment_id','user__username'))
print(ret)
return JsonResponse(ret,safe=False)
path('comment/', views.comment),re_path(r'get_comment_tree/(\d+)', views.get_comment_tree),comment_list = Comment.objects.filter(article_id=article_id)
评论树 评论楼 提交评论事件：
{% extends 'base.html' %}
{% block content %}
<h3 class="text-center">{{ article.title }}</h3>
<div class="content">
{{ article.articledetail.content|safe }}
</div>
<input type="hidden" id="hid_article_pk" value="{{ article.pk }}">
<input type="hidden" id="hid_username" value="{{ request.user.username }}">
<div id="div_digg">
<div class="diggit digg">
<span class="diggnum" id="digg_count">{{ article.up_count }}</span>
</div>
<div class="buryit digg">
<span class="burynum" id="bury_count">{{ article.down_count }}</span>
</div>
<div id="digg_word" class="pull-right"></div>
</div>
<div class="clearfix"></div>
<hr>
<p>评论树</p>
<div class="comment_tree">
<script>
(function () {
$.ajax({
url:'/blog/get_comment_tree/'+$('#hid_article_pk').val(),
success:function (comment_list) {
var comment_html = "";
$.each(comment_list,function (index,comment) {
var username = comment.user__username;
var content = comment.content;
var pk = comment.pk;
var pid = comment.parent_comment_id;
console.log(comment);
s = '<div class="comment_tree_item" id="'+pk+'"><span>'+username+'</span><span>'+content+'</span> </div>'
if(pid){
$('#'+pid).append(s)
}else{
$('.comment_tree').append(s)
}
})
}
})
})()
</script>
</div>
<hr>
<p>评论楼</p>
<ul class="list-group comment_list">
{% for comment in comment_list %}
<li class="list-group-item comment_item">
<div>
<a href="">#{{ forloop.counter }}楼</a>
<span>{{ comment.create_time|date:'Y-m-d H:i'}}</span>
<a href="">{{ comment.user.username }}</a>
<a class="pull-right replay" pk = "{{ comment.pk }}" username="{{ comment.user.username }}">回复</a>
</div>
{% if comment.parent_comment_id %}
<div class="parent_comment_info well">
<a href="">@{{ comment.parent_comment.user.username }}</a>
<span>{{ comment.parent_comment.content }}</span>
</div>
{% endif %}
<div>
<p>{{ comment.content }}</p>
</div>
</li>
{% endfor %}
</ul>
<hr>
<div class="comment_region">
<div class="row">
<div class="col-md-8">
<p>昵称：<input type="text" id="tbCommentAuthor" class="author" disabled="disabled" size="50" value="{{ request.user.username }}"></p>
<p>评论内容：</p>
<textarea name="" id="comment-text" cols="63" rows="10"></textarea>
<button class="btn btn-default pull-right comment-btn">提交</button>
</div>
</div>
</div>
{% csrf_token %}
<script src="/static/js/article_detail.js"></script>
<script type="text/javascript">
var pid = ''; // 空 为 根评论
// 绑定 提交评论事件
$('.comment-btn').click(function () {
if("{{ request.user.username }}"){ // 登录 后操作
// val() input select textarea 这三个可以 取 val()
var article_id = $('#hid_article_pk').val();
if($('#comment-text').val()[0] !== "@"){
pid = ""
}
//@alex\n567
// 获取 子评论 内容
if(pid){
var index = $('#comment-text').val().indexOf('\n');
var content = $('#comment-text').val().slice(index+1)
}else{
var content = $('#comment-text').val();
}
$.ajax({
url:'/blog/comment/',
type:'post',
data:{
article_id:article_id,
content:content,
pid:pid,
csrfmiddlewaretoken:$('input[name="csrfmiddlewaretoken"]').val()
},
success:function (data) {
console.log(data);
if(data.state){ // 提交成功
console.log('-----------',data);
// 根评论 显示
var floor = $('.comment_list .comment_item').length+1;
var ctime = data.time;
var username = $('#hid_username').val();
var content = data.content;
var pname = data.pidname;
if(data.pid){ // 子评论
var s ='<li class="list-group-item comment_item"><div><a href="">#'+floor+'楼</a> <span>'+ ctime+ ' </span> <a href="">'+ username +'</a> </div> <div> ' +
' <div class="parent_comment_info well">\n' +
' <a href="">@'+pname+'</a> \n' +
' </div>'+
'<p>'+content+'</p> </div> </li>';
}else{
// 应该有 2 套 s
var s ='<li class="list-group-item comment_item"><div><a href="">#'+floor+'楼</a> <span>'+ ctime+ ' </span> <a href="">'+ username +'</a> </div> <div> <p>'+content+'</p> </div> </li>';
}
$('.comment_list').append(s);
//清空数据
$('#comment-text').val("");
//清空pid
pid = "";
}
}
})
}else{ // 未登录
location.href = "/login/"
}
});
// 绑定回复 按钮事件
$('.comment_item .replay').click(function () {
// 获取焦点
$('#comment-text').focus();
var val ="@" + $(this).attr('username')+ '\n'; // 回复得人得 名字
$('#comment-text').val(val);
pid = $(this).attr("pk") // pid
})
</script>
{% endblock content%}
article_detail.html
二、知识点
文章评论：
1.提交根评论
2.显示根评论
--- render显示
--- ajax显示
3.提交子评论
4.显示子评论
--- render显示
--- ajax显示
评论楼
评论树
1.
comment_list = Comment.objects.filter(article_id=article_id) 2.事务
with transaction.atomic(): # 事务 数据统一 一致
if not pid: # 提交根评论
obj = Comment.objects.create(user_id = user_id,article_id = article_id,content=content)
else: # 提交子评论
obj = Comment.objects.create(user_id=user_id, article_id=article_id, content=content,parent_comment_id=pid) # comment_count 加 + 1
Article.objects.filter(pk=article_id).update(comment_count=F("comment_count") + 1) 3.a标签
href = "url" 向外链接
href = '#xxx' 向内定位 锚点
不用#xxx，可以用获取焦点：$('#comment-text').focus(); 4.val()
input select textarea 这三个可以 取 .val() 赋值 .val('') 5.js得截取方法：（charAt indexOf slice）
var s = "hello world";
console.log(s.charAt(4)); // o 索引找字符
console.log(s.indexOf('e')); // 1 字符找索引
console.log(s.slice(1,4)); // ell 切片 6.根评论 / 子评论 获取 content
var pid = ''; // 空 为 根评论
if($('#comment-text').val()[0] !== "@"){
pid = ""
} // 获取 子评论 内容 // @alex\n567
if(pid){
var index = $('#comment-text').val().indexOf('\n');
var content = $('#comment-text').val().slice(index+1)
}else{
var content = $('#comment-text').val();
} 7.两个bug:
(1) 先提交子评论，在不刷新页面的情况下再提交根评论会怎样？
//清空数据
$('#comment-text').val("");
//清空pid
pid = "";
(2) 先按回复按钮，然后将文本框中的"@..."手动去除，再点提交会怎样？
if($('#comment-text').val() !== "@"){
pid = ""
} 8.datatime.datetime
时间对象，不能序列化！ 字典 列表 可序列化， 对象不可序列化！！
办法：
res['time'] = obj.create_time.strftime('%Y-%m-%d %H:%M')
return JsonResponse(res)
补充：
import datetime
datetime.date
datetime.time
datetime.datetime
datetime.timedelta(days=7) now = datetime.datetime.now() # 对象
now.strftime('%Y-%m')
now.strftime('%Y-%m-%d')
now.strftime('%Y-%m-%d %X')
now.strftime('%Y-%m-%d %H:%M') delta = datetime.timedelta(days=7)
now + delta // 时间相加 9.评论楼
楼层：
<a href="">#{{ forloop.counter }}楼</a>
时间：
<span>{{ comment.create_time|date:'Y-m-d H:i'}}</span>
评论者：
<a href="">{{ comment.user.username }}</a>
回复：（pk username）
<a class="pull-right replay" pk = "{{ comment.pk }}" username="{{ comment.user.username }}">回复</a>
点击回复：
// 绑定回复 按钮事件
$('.comment_item .replay').click(function () {
// 获取焦点
$('#comment-text').focus();
var val ="@" + $(this).attr('username')+ '\n'; // 回复得人得 名字
$('#comment-text').val(val); pid = $(this).attr("pk") // pid
})
判断是否有父评论：
{% if comment.parent_comment_id %}
<div class="parent_comment_info well">
<a href="">@{{ comment.parent_comment.user.username }}</a>
<span>{{ comment.parent_comment.content }}</span>
</div>
{% endif %} 10.ajax显示评论：
var floor = $('.comment_list .comment_item').length+1;
var ctime = data.time; // 时间字符串 因为时间对象json传不过来。
var username = $('#hid_username').val();
var content = data.content; // content 应该从库里取，不应该直接拿前端得数据！因为前端得content是经过 过滤转义 特殊字符后才存到数据库中。
var pname = data.pidname;
if(data.pid){ // 子评论
var s ='<li class="list-group-item comment_item"><div><a href="">#'+floor+'楼</a> ' +
'<span>'+ ctime+ ' </span> <a href="">'+ username +'</a> </div> <div> ' +
' <div class="parent_comment_info well">\n' +
' <a href="">@'+pname+'</a> \n' +
' </div><p>'+content+'</p> </div> </li>';
}else{
// 应该有 2 套 s
var s ='<li class="list-group-item comment_item"><div><a href="">#'+floor+'楼</a> ' +
' <span>'+ ctime+ ' </span> <a href="">'+ username +'</a> </div>' +
' <div> <p>'+content+'</p> </div> </li>';
} $('.comment_list').append(s); 11.评论树：
样式：
111
444
555
222
333 方法：
1.递归！！ 麻烦！
自己调自己
有个结束条件
2. comment_list 取出 pid
前端拿到，所有数据
先展示 所有得根评论
子评论 append到某条根评论下 <div pk=1>111
<div pk=4>444
<div pk=5>555</div>
</div>
</div>
<div pk=2>222</div>
<div pk=2>333</div> 知识点：
匿名函数，自执行！
(function () {
alert(111)
})() 应用： $.each(...)
<div class="comment_tree">
<script>
(function () {
$.ajax({
url:'/blog/get_comment_tree/'+$('#hid_article_pk').val(),
success:function (comment_list) { var comment_html = "";
$.each(comment_list,function (index,comment) {
var username = comment.user__username;
var content = comment.content;
var pk = comment.pk;
var pid = comment.parent_comment_id;
console.log(comment);
var s = '<div class="comment_tree_item" id="'+pk+'"><span>'+username+'</span><span>'+content+'</span> </div>' if(pid){ // 子评论
$('#'+pid).append(s) }else{ // 父评论
$('.comment_tree').append(s)
}
})
}
})
})() </script>
</div> 补充：
最新评论指定放到前面： (prepend)
jquery 文档操作：
append appendTo
prepend prependTo
before insertBefore
after insertAfter
clone
replaceWith replaceAll
empty remove detach 样式缩进：
.comment_tree_item{
margin-left: 20px;
} 后台：
def get_comment_tree(request,article_id):
ret = list(Comment.objects.filter(article_id=article_id).values('pk','content','parent_comment_id','user__username'))
print(ret)
return JsonResponse(ret,safe=False) 注意点：
queryset 对象没法做 序列化
办法：
list(quertset) # 强转
BUT:
return JsonResponse(ret)
条件：
In order to allow non-dict objects to be serialized set the safe parameter to False.
修改：
return JsonResponse(ret,safe=False)
BBS - 文章评论的更多相关文章
- $Django 站点:样式--文章--分类文章--文章详情--文章评论点赞--文章评论点赞统计(数据库优化)
<h3>个人站点下的</h3> 知识点 url (r'(?P<username>\w+)/p/(?P<id>\d+)', xiangxi,name='x ...
- django高级之点赞、文章评论及上传文件
目录: 点赞 文章评论 上传文件 保留页面条件 一.点赞 1.所用技术: django model F查询 js应用:$(function () {}); 为文件加载完成执行ready() 方法.等同 ...
- Django博客功能实现—文章评论功能
功能:在A网页提交一个评论Forms_B,提交之后自动刷新页面,能够显示刚刚的画面思路:利用一个已经创建的表单,通过视图让其在网页中表现出来,填写玩信息之后提交,会提交到一个新的视图里面去做接受,接受 ...
- Django博客功能实现—文章评论的显示
功能:在打开文章之后,能在文章下面是显示文章的评论,有父级评论.思路:在文章详情的视图里面,获取这个文章的全部评论,得到显示列表,然后用模板显示出来.步骤:一,在views.py的文章详情中获取评论: ...
- 使用Webdriver刷博客文章评论
package com.zhc.webdriver; import java.util.ArrayList; import java.util.Iterator; import java.util.c ...
- BBS - 文章详细页、点赞、踩灭
一.文章详细页 文章详细页:1.链接:<div><h5><a href="/blog/{{ article.user.username }}/articles/ ...
- python自动化开发-[第二十二天]-bbs多级评论、点赞、上传文件
今日概要: 1.related_name和related_query_name的区别 2.through_fields的用途 3.django的事务提交 4.点赞的动画效果 5.多级评论的原理 6.上 ...
- 编辑bbs文章 获取前端标题内容 和前端内容的方法
- Django - 学习目录
Django 基础 web应用/http协议/web框架 Django简介 Django - 路由层(URLconf) Django - 视图层 Django - 模板层 Django - 模型层 - ...
随机推荐
- 码农小汪-Hibernate学习8-hibernate关联关系注解表示@OneToMany mappedBy @ManyToMany @JoinTable
近期我也是有点郁闷,究竟是程序中处理关联关系.还是直接使用外键处理关联关系呢?这个的说法不一致!程序中处理这样的关联关系的话.自己去维护这样的约束.这样的非常乐观的一种做法!或者是直接在数据库中处理这 ...
- 浅谈cookie测试
Cookie 提供了一种在Web 应用程序中存储用户特定信息的方法,例如存储用户的上次 访问时间等信息.假如不进行cookie存储一个网站的用户行为,那么可能会造成以下问题:用户进行购买几件商品转到结 ...
- delphi7中添加QuickRep
具体的方法是: delphi主菜单的Project|Options命令, 在Package选项卡的Desing packages列表中如果可以看到QuickReport Components选项, 那 ...
- Unity文件操作路径
Unity3D中的资源路径: Application.dataPath:此属性用于返回程序的数据文件所在文件夹的路径.例如在Editor中就是Assets了. Application.streamin ...
- Effective C++ Item 19 Treat class design as type design
Too high class topic for me now ................... ................... ................... fill the ...
- Python 数据类型：列表
一.列表介绍 1. 列表可以存储一系列的值,使用中括号来定义,每个元素之间用逗号隔开,形如 ['a', 'b', 'c', 'd']2. 列表与元组的区别是:列表中的元素是可变的,元组中的元素是不可变 ...
- 使用rlwrap调用sqlplus中历史命令
此文来自http://www.cnblogs.com/mchina/archive/2013/03/08/2934473.html 在此谢谢原创作者. 在Linux中运行SQL*Plus,不能调用历史 ...
- PyQt4消息窗口
默认情况下,如果我们单击了窗口标题栏上的X标记,窗口就会被关闭.但是有些时候我们想要改变这一默认行为.比如,我们正在编辑的文件内容发生了变化,这时若单击X标记关闭窗口,编辑器就应当但出确认窗口. #! ...
- Android 监听按钮的点击事件
onClick事件1.Button和ImageButton都拥有一个onClick事件 通过自身的.setOnClickListener(OnClickListener)方法添加点击事件2.所有的控件 ...
- iOS - UITableView滚动到指定的cell并且选中
UITableView //项目中遇到的 - (void)selectRowAtIndexPath:(nullable NSIndexPath *)indexPath animated:(BOOL)a ...