04: 层级评论

Posted 不做大哥好多年

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了04: 层级评论相关的知识,希望对你有一定的参考价值。

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

01: 实现注册登录功能

02: 实现发布帖子功能

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

04: 层级评论

目录:

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>
生成展示帖子的html文件
<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>
触发show_comment函数的html
/* 展示该帖子的所有评论 */
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);
}
show_comments(js) 展示该帖子的所有评论
/* 获取指定帖子的评论 */
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;
}
get_comment(js) 获取指定帖子的评论
/* 创建评论的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("暂时还没有评论");
    }
}
build_comment_tree(js) 创建评论的HTML
# 获取对应帖子的所有评论
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))
views.py 获取对应帖子的所有评论

  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>
触发show_reply_btn和reply函数的html
/*显示或隐藏"回复"标签*/
function show_reply_btn(ele,show) {
    show?$(ele).find(".reply_btn:first").removeClass("hide"):$(ele).find(".reply_btn:first").addClass("hide")
}
show_reply_btn(js)显示或隐藏"回复"标签
//点击某个评论的回复按钮后,修改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();
}
reply(js) 点击某个评论的回复按钮后,修改textarea的comment_id属性并让其得到焦点

  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>
触发post_commen(js)函数的html
/* 提交评论的内容 */
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)
            }
        }
    });
}
post_commen(js) 提交评论的内容
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))
views.py 提交品论内容

 

以上是关于04: 层级评论的主要内容,如果未能解决你的问题,请参考以下文章

动态 Rstudio 代码片段

js处理层级数据结构的一些总结

VUE展示无限层级树形数据结构

结束haml评论

需要一种有效的方法来避免使用 Laravel 5 重复代码片段

自定义 Xcode 片段库