04: 层级评论

目录：抽屉项目之js最佳实践

01: 实现注册登录功能

02: 实现发布帖子功能

03: 将帖子展示到页面、点赞

04: 层级评论

目录：

• 1.1 层级评论效果图　
• 1.2 各功能点code

1.1 层级评论效果图　     返回顶部

　　　　功能1：点击"评"展示本帖子所有评论，生成一个评论发布框
　　　　功能2：当鼠标滑过评论时会显示"回复"，点击进行回复
　　　　功能3：提交评论内容

       

1.2 各功能点code     返回顶部

　　1、功能1：点击"评"展示本帖子所有评论，生成一个评论发布框

<div class="post_container clearfix" post_id="18">
    <div class="row_container clearfix">
        <div class="left_container fl">
            <div class="post_content">文能一剪梅，武能嘿嘿嘿</div>
            <div class="post_bar">
                <a href="javascript:void(0);" class="like_btn" onclick="like(this,18)" like_count="1">已赞(1)</a>
                <a href="javascript:void(0);" class="show_comments_btn" onclick="show_comments(this,18)">评(0)</a>
                <span>tom</span>
                <i>在 2018-01-07 09:51:29 发布</i>
            </div>
        </div>
        <div class="right_container fl">
            <img src="">
        </div>
    </div>
    <div class="comment_container">
        <div class="comment_text_container">
            <textarea class="comment_text">

            </textarea>
            <a class="send_btn" href="javascript:void(0)" onclick="post_comment(this,18)">发送</a>
        </div>
        <div class="comment_content_container">
            <ul>
                <li comment_id="25" display_name="tom" user_id="9">
                    <div class="comment_row">
                        <div class="comment_content_div" onmouseover="show_reply_btn(this,true)" onmouseout="show_reply_btn(this,false)">
                            我: 评论01　　2018-01-07 10:48:31
                            <a class="reply_btn hide" href="javascript:void(0);" onclick="reply(25,this)">回复</a>
                        </div>
                        <div>

                        </div>
                    </div>
                    <ul>
                        <li comment_id="26" display_name="tom" user_id="9">
                            <div class="comment_row">
                                <div class="comment_content_div" onmouseover="show_reply_btn(this,true)" onmouseout="show_reply_btn(this,false)">
                                    我: 回复品论01　　2018-01-07 10:49:02
                                    <a class="reply_btn hide" href="javascript:void(0);" onclick="reply(26,this)">回复</a>
                                </div>
                                <div>

                                </div>
                            </div>
                            <ul>

                            </ul>
                        </li>
                    </ul>
                </li>
                <li comment_id="27" display_name="tom" user_id="9">
                    <div class="comment_row">
                        <div class="comment_content_div" onmouseover="show_reply_btn(this,true)" onmouseout="show_reply_btn(this,false)">
                            我: 评论02　　2018-01-07 10:49:14
                            <a class="reply_btn hide" href="javascript:void(0);" onclick="reply(27,this)">回复</a>
                        </div>
                        <div>

                        </div>
                    </div>
                    <ul>
                        <li comment_id="28" display_name="tom" user_id="9">
                            <div class="comment_row">
                                <div class="comment_content_div" onmouseover="show_reply_btn(this,true)" onmouseout="show_reply_btn(this,false)">
                                    我: 回复品论02　　2018-01-07 10:49:27
                                    <a class="reply_btn hide" href="javascript:void(0);" onclick="reply(28,this)">回复</a>
                                </div>
                                <div>

                                </div>
                            </div>
                            <ul>

                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>

<div class="post_bar">
    <a href="javascript:void(0);" class="like_btn" onclick="like(this,17)" like_count="1">已赞(1)</a>
    <a href="javascript:void(0);" class="show_comments_btn" onclick="show_comments(this,17)">评(0)</a>
</div>

/* 展示该帖子的所有评论 */
function show_comments(ele, post_id) {
    // 先隐藏所有帖子的评论div，然后展示用户点击的帖子的评论div
    $("div.comment_container").addClass("hide");
    var current_comment_container = $(ele).parent().parent().parent().siblings(".comment_container").removeClass("hide");

    // 插入一个textarea
    var comment_text_container = current_comment_container.children(".comment_text_container");
    //console.log(comment_text_container);
    comment_text_container.children().remove();
    var comment_text = document.createElement('textarea');
    comment_text.className = "comment_text";
    comment_text_container.append(comment_text);

    var send_btn = document.createElement('a');
    send_btn.className="send_btn";
    send_btn.innerText = "发送";
    send_btn.href = "javascript:void(0)";
    send_btn.setAttribute("onclick", "post_comment(this,"+post_id+")");
    comment_text_container.append(send_btn);

    // 获取这个帖子的所有评论
    var posts = get_comments(post_id);
    var comment_content_container = current_comment_container.find(".comment_content_container")[0];
    build_comment_tree(posts,comment_content_container);
}

/* 获取指定帖子的评论 */
function get_comments(post_id) {
    var comments;
    $.get({
        url:"/app01/get_comments/",
        data:{"post": post_id},
        dataType: "json",
        async: false,
        success:function (response) {
            if(response.status=='ok'){
                comments = response['data'];
            }
        }
    });
    return comments;
}

/* 创建评论的HTML */
function build_comment_tree(posts, comment_content_container) {
    if(posts.length>0){
        // 先进行清理工作

        $(comment_content_container).text("").children().remove();

        // 添加一个根ul
        var root_ul = document.createElement('ul');
        comment_content_container.appendChild(root_ul);

        // 循环每个帖子
        for(var key in posts){
            // 生成一个li节点，带comment_id，该li中也带一个ul用于存放子评论
            var li = document.createElement('li');
            li.setAttribute("comment_id", posts[key]['id']);
            li.setAttribute("display_name", posts[key]['user__display_name']);
            li.setAttribute("user_id", posts[key]['user_id']);

            // li的内容
            var comment_content_div = document.createElement('div'); // 评论的具体内容
            comment_content_div.className="comment_content_div";
            comment_content_div.setAttribute("onmouseover","show_reply_btn(this,true)");
            comment_content_div.setAttribute("onmouseout","show_reply_btn(this,false)");
            var display_name = posts[key]['user__display_name']==$("div.user_info #display_name").text() ? "我" : posts[key]['user__display_name'];
            comment_content_div.innerText = display_name +
                ": " +
                posts[key]['content']+
                "　　"+
                posts[key]['create_on'];

            var comment_bar = document.createElement('div');    // 针对该评论的工具栏
            var reply_a = document.createElement('a');
            reply_a.className="reply_btn hide";
            reply_a.innerText = "回复";
            reply_a.href = "javascript:void(0);";
            reply_a.setAttribute("onclick", "reply("+posts[key]['id']+",this)");
            //comment_bar.appendChild(reply_a);
            comment_content_div.innerHTML += reply_a.outerHTML;

            var comment_row = document.createElement('div');    // 一条评论的div，包括了以上两个div
            comment_row.className="comment_row";
            comment_row.appendChild(comment_content_div);
            comment_row.appendChild(comment_bar);

            li.appendChild(comment_row);    // 将整条评论+工具添加到li中

            // 用于存放子评论的ul，下方可以没有任何子评论
            var sub_ul = document.createElement('ul');
            li.appendChild(sub_ul);

            if(posts[key]['reply_to']){
                // 评论有reply_to
                $(comment_content_container).find("li[comment_id="+posts[key]['reply_to']+"]").children("ul").append(li);
            }else {
                // 评论没有reply_to，将li加到根部的ul
                root_ul.appendChild(li);
            }
        }

    }else{
        $(comment_content_container).text("暂时还没有评论");
    }
}

# 获取对应帖子的所有评论
def get_comments(request):
    ret = {'status': 'ok'}
    if request.method == 'GET':
        post_id = request.GET.get("post")
        post = get_object_or_404(Post, id=post_id)
        comments = Comment.objects.filter(post=post).values("id",
                                                            "user_id",
                                                            "user__display_name",
                                                            "create_on",
                                                            "content",
                                                            "reply_to").order_by('id')
        ret['data'] = list(comments)
        return HttpResponse(json.dumps(ret, cls=DateTimeJSONEncoder))

　　2、功能2：当鼠标滑过评论时会显示"回复"，点击进行回复

<div class="comment_content_div" onmouseover="show_reply_btn(this,true)" onmouseout="show_reply_btn(this,false)">
    我: 评论01　　2018-01-07 10:48:31
    <a class="reply_btn hide" href="javascript:void(0);" onclick="reply(25,this)">回复</a>
</div>

/*显示或隐藏"回复"标签*/
function show_reply_btn(ele,show) {
    show?$(ele).find(".reply_btn:first").removeClass("hide"):$(ele).find(".reply_btn:first").addClass("hide")
}

//点击某个评论的回复按钮后，修改textarea的comment_id属性并让其得到焦点
function reply(comment_id, ele) {
    if(!is_login()){
        show_login_reg_frm();
        return false;
    }
    var reply_to_user = $(ele).parent().parent().parent().attr("display_name");
    $("textarea.comment_text").val("").attr("reply_to",comment_id).attr("placeholder","回复 "+reply_to_user).focus();
}

　　3、功能3：提交评论内容

<div class="comment_text_container">
    <textarea class="comment_text">

    </textarea>
    <a class="send_btn" href="javascript:void(0)" onclick="post_comment(this,18)">发送</a>
</div>

/* 提交评论的内容 */
function post_comment(ele, post_id) {
    var comment_obj = {};
    comment_obj['post']=post_id;
    var ta = $(ele).siblings('textarea');
    comment_obj['comment_text'] = $.trim(ta.val());
    if(comment_obj['comment_text'].length==0){
        alert("请输入评论内容再提交");
        return false;
    }
    var reply_to = $(ele).siblings('textarea').attr("reply_to");
    if(reply_to){
        comment_obj['reply_to'] = reply_to
    }

    // ajax上传评论
    $.post({
        url:"/app01/post_comment/",
        data:comment_obj,
        dataType:"json",
        success:function (response) {
            if(response.status=='ok'){
                // 评论成功
                alert("评论成功");
                var show_comments_btn = $(ele).parent().parent().parent().find('.show_comments_btn')[0];
                show_comments(show_comments_btn, post_id)
            }
        }
    });
}

def post_comment(request):
    ret = {'status': 'ok'}
    if request.method == 'POST':
        user_id = request.session.get("current_user")['id']
        post_id = request.POST.get("post")
        post = get_object_or_404(Post, id=post_id)
        comment_text = request.POST.get("comment_text")
        reply_to = request.POST.get("reply_to")
        Comment.objects.create(user_id=user_id, post=post, content=comment_text, reply_to=reply_to)
        post.comment_count += 1
        post.save()
        return HttpResponse(json.dumps(ret))