一、文章评论
<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" >' 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%}