博客评论相关
博客文章详情页搭建
{% extends 'base.html' %}
{% block css %}
<style>
#div_digg {
float: right;
margin-bottom: 10px;
margin-right: 30px;
font-size: 12px;
width: 125px;
text-align: center;
margin-top: 10px;
}
#div_digg .diggnum {
line-height: 1.5em !important;
}
.diggit {
float: left;
width: 46px;
height: 52px;
background: url(/static/img/up.gif) no-repeat;
text-align: center;
cursor: pointer;
margin-top: 2px;
padding-top: 5px;
}
.buryit {
float: right;
margin-left: 20px;
width: 46px;
height: 52px;
background: url(/static/img/down.gif) no-repeat;
text-align: center;
cursor: pointer;
margin-top: 2px;
padding-top: 5px;
}
.clear {
clear: both;
}
#div_digg .diggnum {
line-height: 1.5em !important;
}
.diggword {
margin-top: 5px;
margin-left: 0;
font-size: 12px;
color: gray;
}
</style>
{% endblock %}
{% block right_content %}
{# 文章及标题开始 #}
<h3>{{ article_obj.title }}</h3>
{{ article_obj.content|safe }}
{# 文章结束 #}
{# 点赞点踩开始 #}
<div class="clearfix">
<div id="div_digg">
<div class="diggit action">
<span class="diggnum" id="digg_count">{{ article_obj.up_num }}</span>
</div>
<div class="buryit action">
<span class="burynum" id="bury_count">{{ article_obj.down_num }}</span>
</div>
<div class="clear"></div>
<div class="diggword" id="digg_tips">
</div>
</div>
</div>
{# 点赞点踩结束 #}
{# 评论楼开始 #}
<div><h4>评论</h4></div>
{% for comment in comment_list %}
<hr>
<div>
<span>#{{ forloop.counter }}楼 </span>
<span><span class="glyphicon glyphicon-time"></span> {{ comment.comment_time|date:'Y-m-d' }} </span>
<span><span class="glyphicon glyphicon-user"></span> <a href="/{{ comment.user }}/">{{ comment.user }}</a></span>
<span class="pull-right reply " id="id_reply" username="{{ comment.user.username }}" comment_id="{{ comment.pk }}"><span class="glyphicon glyphicon-comment"></span> <a >回复</a></span>
</div>
<div>
{% if comment.parent %}
<div>@{{ comment.parent.user.username }}</div>
{% endif %}
<div>{{ comment.content }}</div>
</div>
{% endfor %}
<div class="linshi_comment"></div>
{# 评论楼结束 #}
{# 评论输入 开始 #}
<hr>
<div><span class="glyphicon glyphicon-comment"></span> 发表评论</div>
<div style="margin-top: 20px">
<span class="glyphicon glyphicon-user"></span>
<span> 昵称: {{ request.user.username }}</span>
</div>
<div style="margin-top: 20px">
<span>评论内容:</span>
</div>
<div>
<textarea name="comment" id="id_comment" cols="60" rows="10"></textarea>
</div>
<button class="btn btn-primary" id="id_submit_comment" style="margin-left: 400px; margin-top: 20px">提交</button>
{# 评论输入结束 #}
{% endblock %}
{% block js %}
<script>
// 点赞点踩 点击事件绑定
$('.action').click(function () {
let isUp = $(this).hasClass('diggit');
let $info = $('#digg_tips');
let $span = $(this).children();
$.ajax({
url: "/up_or_down/",
type: 'post',
data: {
'article_id':{{ article_obj.pk }},
'is_up': isUp,
'csrfmiddlewaretoken': '{{ csrf_token }}',
},
success: function (data) {
if (data.code == 200) {
console.log(data);
$info.html(data.msg);
//将span标签内的文本加1
$span.text(Number($span.text() + 1))
}
else {
$info.html(data.msg)
}
}
})
});
//{#评论js开始#}
// 先定义一个全局的 parent
let parentId='';
$('#id_submit_comment').click(function () {
// 获取textarea 文本内容
let $comment_content = $('#id_comment').val();
//判断parentId 是否有值，有值则进行切分
if (parentId){
// 获取切分的索引（切分的时候 顾头不顾尾，所以需要加1）
let indexVal = $comment_content.indexOf('\n')+1;
$comment_content=$comment_content.slice(indexVal);
}
// 发送ajax请求
$.ajax({
url: '/comment/',
type: 'post',
data: {
'article_id': '{{ article_id }}',
'comment_content': $comment_content,
'csrfmiddlewaretoken': '{{ csrf_token }}',
'parent_id': parentId
},
success: function (data) {
// 将新的评论临时渲染到前端页面
if (data.code == 100) {
let userName = '{{ request.user.username }}';
let commentConent = $comment_content;
//此处用的是前端的模板语言的替换
let tempStr = `
<div>
<hr>
<span><span class="glyphicon glyphicon-user"></span> <a href="/${userName}/">${userName}</a></span>
<p>${commentConent}</p>
</div>
`;
// 查找url标签，添加子元素
$('.linshi_comment').append(tempStr);
// 将textarea文本框清空
$('#id_comment').val('');
}
}
})
});
// 回复父评论信息
$('.reply').click(function () {
// 把你想评论的那条评论的任命自动添加到 textarea 文本中去
let pUserName=$(this).attr('username');
let pCommentId=$(this).attr('comment_id');
// 自动换行
$('#id_comment').val('@'+pUserName+'\n');
// 聚焦到评论文本框
$('#id_comment').focus();
//给parent_id 赋值
parentId=pCommentId;
});
</script>
{% endblock %}
博客详情页后端视图函数
# 将博客文章内容 以及评论的列表传导前端
# url.py 中的对应路由
url(r'^(?P<username>\w+)/article/(?P<article_id>\d+)',views.article_detail)
# views.py
def article_detail(request, username, article_id):
# 从数据库中查找文章对象
article_obj = models.Article.objects.filter(pk=article_id).first()
# 查找当前用户对象
user_obj = models.UserInfo.objects.filter(username=username).first()
# 查找评论的queryset对象
comment_list= models.Comment.objects.filter(article_id=article_id)
return render(request, 'article_detail.html', locals())
# 评论 视图函数 路由
url('/comment/',views.comment)
# views.py
def comment(request):
back_dic = {'code': 100, 'msg': ''}
if request.is_ajax():
article_id = request.POST.get('article_id')
comment_content = request.POST.get('comment_content')
parent_id = request.POST.get('parent_id')
print('article_id', article_id)
print('comment', comment_content)
# 1.先校验当前用户是否已经登录
if request.user.is_authenticated():
# 开启事务操作 // from django.db import transaction
with transaction.atomic():
# 1.在文章表中将普通字段加1
models.Article.objects.filter(pk=article_id).update(comment_num=F('comment_num') + 1)
# 2.在评论表中将存储真正的数据
models.Comment.objects.create(article_id=article_id, user=request.user, content=comment_content,parent_id=parent_id)
back_dic['msg'] = '评论成功'
else:
back_dic['code'] = 101
back_dic['msg'] = '请先登录'
return JsonResponse(back_dic)
