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 - 模型层 - ...
随机推荐
- 关于Random中的随机数种子Seed
Random初始化的时候,可以以一个INT32作为参数,称为seed,MSDN上的解释是:“伪随机数是以相同的概率从一组有限的数字中选取的......随机数的生成是从种子值开始......” 所有标准 ...
- erlang的catch和 try catch的初步猜测
一. catch(Fun):似乎可以避免因为 函数Fun内的错误而造成的当前的进程的崩溃.
- PHP删除目录及目录下所有文件或删除指定文件
PHP删除目录及目录下所有文件或删除指定文件 <?php header("content-type:text/html;charset=utf-8"); /** * 删除目录 ...
- linux下mysql 启动命令
1,使用service 启动.关闭MySQL服务 service mysql start service mysql stop service mysql restart 运行上面命令,其实是serv ...
- 3th January 2014
I owe my girl so much, i want to pay her, i know this is impossible,but I still try hard.
- Effective C++ Item 14 Think carefully about copying behavior in resource-managing classe
In C++, the only code that guaranteed to be executed after an exception is thrown are the destructor ...
- java中定义一个CloneUtil 工具类
其实所有的java对象都可以具备克隆能力,只是因为在基础类Object中被设定成了一个保留方法(protected),要想真正拥有克隆的能力, 就需要实现Cloneable接口,重写clone方法.通 ...
- docker学习-运行第一个docker镜像hello world
docker pull [OPTIONS] NAME[:TAG]:从远程仓库拉取一个镜像到本地,NAME是要拉取的镜像的名称,TAG是docker镜像的版本,不指定的话默认是最新版本 docker ...
- Spring事务核心接口
- const T* 和 T* const
使用c++的时候,经常会在 const int *p 和 int * const p这个地方迷惑.这里记录一下: const int *p = int const *p //这里const后面的为* ...