评论楼代码块

评论楼

要点：1、html中模板语言替换的拼接 　　　　

　　    2、参数的传递　　　　

　　　 3、事务处理

1、html代码

  <div class="comment_show">
        <p>评论楼</p>
        <ul class="comment_list list-group">
            {% for comment in comment_list %}
                <li class="comment_item list-group-item">
                    <div class="row">
                        <div class="col-md-offset-1">
                            <a href="">#{{ forloop.counter }}楼</a>  
                            <span>{{ comment.create_time|date:'Y-m-d H:i' }}</span>  
                            <span>{{ comment.user }}</span>
                            <div class="pull-right"><a class="reply_btn" comment_id="{{ comment.pk }}" comment_user="{{ comment.user.username }}">回复</a></div>
                        </div>
                    </div>
                    {% if comment.parent_comment_id %}
                        <div class="row">
                            <div class="parent_comment_info col-md-offset-1 well">
                                <a href="">@{{ comment.parent_comment.user.username }}</a>
                                <span>{{ comment.parent_comment.content }}</span>
                            </div>
                        </div>
                    {% endif %}

                    <div class="row">
                        <div class="col-md-offset-1">
                             <p>{{ comment.content }}</p>
                             <div class="pull-right">
                                 <span  class="pgl{{ forloop.counter }} spt">支持(<span id="spt_c{{ forloop.counter }}">0</span>)</span>
                                 <span  class="pgl{{ forloop.counter }} osn">反对(<span id="osn_c{{ forloop.counter }}">0</span>)</span>
                             </div>
                        </div>
                    </div>

                </li>
            {% endfor %}

        </ul>
    </div>
    <div class="comment clearfix">
        <p>
            昵称：<input type="text" id="tbCommentAuthor" class="author" disabled size="50" value="{{ request.user.username }}">
        </p>
        <lable for="">评论内容:</lable>
        <p>
            <textarea name="" id="comment_area" cols="60" rows="10"></textarea>
        </p>

        <input type="button"class="btn btn-default" value="submit" id="comment_submit_btn">
    </div>
    <div class="login_user_info" username="{{ request.user.username }}"></div>
    {% csrf_token %}

<script>
        //基于ajax绑定提交评论事件
        console.log(parent_comment_pk);
        $("#comment_submit_btn").click(function () {
            //parent_comment_pk区分跟评论和子评论
            var content= $("#comment_area").val();
            console.log(content);
            if (parent_comment_pk){//子评论
                console.log(parent_comment_pk);
                var index = content.indexOf("\n");
                content=content.slice(index+1);
            }
            else {//根评论
                console.log(parent_comment_pk);
                var content= $("#comment_area").val();
            }
            //清空输入框
            $("#comment_area").val("");
            $.ajax({
                url:"/app01/comment/",
                type: "post",
                data:{
                    content:content,
                    article_id: "{{ article_obj.pk }}",
                    csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
                    pid:parent_comment_pk,
                    ret:'<li class="comment_item list-group-item"><div class="row"><div class="col-md-offset-1"><a href="">#%s楼</a><span>{{ comment.create_time|date:"Y-m-d H:i"}}</span>  <span>{{ comment.user }}</span><div class="pull-right"><a class="reply_btn" comment_id="{{ comment.pk }}" comment_user="{{ comment.user.username }}">回复</a></div></div></div>{% if comment.parent_comment_id %}<div class="row"><div class="parent_comment_info col-md-offset-1 well"><a href="">@{{ comment.parent_comment.user.username }}</a><span>{{ comment.parent_comment.content }}</span></div></div>{% endif %}<div class="row"><div class="col-md-offset-1"> <p>{{ comment.content }}</p><div class="pull-right"> <span  class="pgl{{ forloop.counter }} spt">支持(<span id="spt_c{{ forloop.counter }}">0</span>)</span> <span  class="pgl{{ forloop.counter }} osn">反对(<span id="osn_c{{ forloop.counter }}">0</span>)</span> </div> </div></div></li>'

                },
                success:function (data) {
                    var data = JSON.parse(data);
                    var create_time = data.create_time;
                    var floor_count = $(".comment_list .comment_item").length + 1;
                    var username = $(".login_user_info").attr("username")
                    var content = data.content;

                    s = '<li class="comment_item list-group-item"><div class="row"><div class="col-md-offset-1"><a href="">#'
                        + floor_count + '楼</a>  <span>' + create_time + '</span>  <span>'
                        + username + '</span><div class="pull-right"></div></div></div><div class="row"><div class="col-md-offset-1"><p>'
                        + content + '</p></div></div></li>';
                    $(".comment_list").append(s);
                }
        })
        });
        var parent_comment_pk="";
        $(".comment_item .reply_btn").click(function () {
            //获取焦点
            $("#comment_area").focus();
            //设置：@ 用户名
            var val = "@"+$(this).attr("comment_user")+"\n";
            $("#comment_area").val(val);
            //获取回复评论的主键值  parent_comment_pk

            parent_comment_pk = $(this).attr("comment_id")
        });
</script>

2、views代码

def comment(request):
    print(request.POST)
    content = request.POST.get("content")
    article_id = request.POST.get("article_id")
    user_id=request.user.pk
    pid = request.POST.get("pid")
    comment_response={}
    with transaction.atomic(): #  事务处理
        if pid:#子评论
            comment = Comment.objects.create(content=content,article_id=article_id,user_id=user_id,parent_comment_id=pid)
        else:#跟评论
            comment = Comment.objects.create(content=content, article_id=article_id, user_id=user_id)
        Article.objects.filter(pk=article_id).update(comment_count=F("comment_count")+1)
    comment_response["create_time"]=comment.create_time.strftime("%Y-%m-%d %H:%M")
    comment_response["content"]=comment.content
    return HttpResponse(json.dumps(comment_response))