評論操做展現

時間 2020-01-03

標籤評論展現简体版

原文原文鏈接

評論操做展現

評論操做有兩種實現方式：

經過前端使用javaScript實現
經過後端代碼實現；自定義模板語言
注：由於涉及到遞歸，因此能在前端生成效果就在前端生成

經過JavaScript前端實現層級評論效果展現

涉及到的主要知識有Jquery的使用，ajax的使用，遞歸方法的運用和html屬性的添加javascript

<!--前端代碼塊-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--jquery的調用-->
    <script src="/static/js/jquery-2.1.4.min.js"></script>
    <style type="text/css">
        .comment_msg{
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <div class="comment">
        <a comment_id="2" class="com">評論模板層級樣式</a>
        <div class="comment_list">
            <div class="comment_msg">
                <span>一級評論</span>
                <div class="comment_msg">
                    <span>二級評論</span>
                    <div class="comment_msg">
                        <span>三級評論</span>
                    </div>
                </div>
            </div>
            <div class="comment_msg">
                <span>一級評論</span>
                <div class="comment_msg">
                    <span>二級評論</span>
                </div>
            </div>
            <div class="comment_msg">
                <span>一級評論</span>
            </div>
        </div>
        <div class="comment_list">
            <a comment_id="1" class="com">評論</a>
        </div>
    </div>
</body>
</html>

//javaScript代碼塊
<script>
    $(function () {
        commentTab();
    });
    function commentTab(){
        $('.com').click(function(){
            var comment_id = $(this).attr("comment_id");
            var that = $(this);
            $.ajax({
                url:"/comment/",
                type:"post",
                data:{comment_id:comment_id},
                dataType:'json',
                success:function (ret) {
                    addDivs(ret,that);
                }
            })
        })
    };
    function addDivs(data,that){
        var html = '<div class="comment_list">';
        $.each(data,function(k,v){
            var arg = '<div class="comment_msg"><span>';
            arg += v.content +'</span>';
            arg += diGui(v.son);
            arg += '</div>';
            html += arg;
        });
        html += "</div>";
        that.after(html);
    }
    function diGui(sons){
        var html = '';
        $.each(sons,function(k,v){
            var args = '<div class="comment_msg"><span>';
            args += v.content +'</span>';
            args += diGui(v.son);
            args += '</div>';
            html += args;
        });
        return html;
    }
</script>

#後端代碼塊
def comment(request):
    if request.method == "GET":
        return render(request,"comment.html")
    elif request.method == "POST":
        id = request.POST.get('comment_id')
        comment_list = [
            {'id': 1, 'content': 'Python', 'user': '阿鬆大', 'parent_id': None},
            {'id': 2, 'content': 'Java', 'user': '阿鬆大', 'parent_id': None},
            {'id': 3, 'content': 'PHP', 'user': '阿鬆大', 'parent_id': None},
            {'id': 4, 'content': '你hh', 'user': '按文', 'parent_id': 1},
            {'id': 5, 'content': '阿薩德', 'user': '豆腐乾', 'parent_id': 1},
            {'id': 6, 'content': '風格和', 'user': '豆腐乾', 'parent_id': 4},
            {'id': 7, 'content': '繁華的', 'user': '微軟', 'parent_id': 2},
            {'id': 8, 'content': '刀鋒', 'user': '微軟', 'parent_id': 3},
            {'id': 9, 'content': '我想靜靜', 'user': '阿鬆大', 'parent_id': 8},
            {'id': 10, 'content': '我想靜靜', 'user': '全文', 'parent_id': None},
            {'id': 11, 'content': '我是符符', 'user': 'xiaopang', 'parent_id': 6},
        ]
        ret = []
        comment_dict = {}
        for line in comment_list:
            line.update({'son': []})  # 給數據加鍵值
            comment_dict[line['id']] = line  # 添加到字典中
        for r in comment_list:
            comment_line = r
            comment_line_parent_id = comment_line['parent_id']
            if not comment_line_parent_id:
                ret.append(r)
            else:
                comment_dict[comment_line_parent_id]['son'].append(r)
        return HttpResponse(json.dumps(ret))

經過後端代碼實現

涉及Jquery，ajax，自定義模板語言（template）css

<!-- 前端代碼塊 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/js/jquery-2.1.4.min.js"></script>
    <style type="text/css">
        .comment_msg{
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <div class="comment">
        <a comment_id="2" class="com">評論模板層級樣式</a>
        <div class="comment_list">
            <div class="comment_msg">
                <span>一級評論</span>
                <div class="comment_msg">
                    <span>二級評論</span>
                    <div class="comment_msg">
                        <span>三級評論</span>
                    </div>
                </div>
            </div>
            <div class="comment_msg">
                <span>一級評論</span>
                <div class="comment_msg">
                    <span>二級評論</span>
                </div>
            </div>
            <div class="comment_msg">
                <span>一級評論</span>
            </div>
        </div>
    </div>
    <div class="comment_list">
        <a comment_id="1" class="com">評論</a>
    </div>
</body>
</html>

//javascript代碼塊
    $(function () {
        commentTab();
    });
    function commentTab(){
        $('.com').click(function(){
            var comment_id = $(this).attr("comment_id");
            var that = $(this);
            $.ajax({
                url:"/comment/",
                type:"post",
                data:{comment_id:comment_id},
                dataType:"html",
                success:function (ret) {
                    console.log(ret);
                    //addDivs(ret,that);
                    that.after(ret);
                }
            })
        })
    };

#後端代碼塊
def comment(request):
    if request.method == "GET":
        return render(request,"comment.html")
    elif request.method == "POST":
        id = request.POST.get('comment_id')
        comment_list = [
            {'id': 1, 'content': 'Python', 'user': '阿鬆大', 'parent_id': None},
            {'id': 2, 'content': 'Java', 'user': '阿鬆大', 'parent_id': None},
            {'id': 3, 'content': 'PHP', 'user': '阿鬆大', 'parent_id': None},
            {'id': 4, 'content': '你hh', 'user': '按文', 'parent_id': 1},
            {'id': 5, 'content': '阿薩德', 'user': '豆腐乾', 'parent_id': 1},
            {'id': 6, 'content': '風格和', 'user': '豆腐乾', 'parent_id': 4},
            {'id': 7, 'content': '繁華的', 'user': '微軟', 'parent_id': 2},
            {'id': 8, 'content': '刀鋒', 'user': '微軟', 'parent_id': 3},
            {'id': 9, 'content': '我想靜靜', 'user': '阿鬆大', 'parent_id': 8},
            {'id': 10, 'content': '我想靜靜', 'user': '全文', 'parent_id': None},
            {'id': 11, 'content': '我是符符', 'user': 'xiaopang', 'parent_id': 6},
        ]
        ret = []
        comment_dict = {}
        for line in comment_list:
            line.update({'son': []})  # 給數據加鍵值
            comment_dict[line['id']] = line  # 添加到字典中
        for r in comment_list:
            comment_line = r
            comment_line_parent_id = comment_line['parent_id']
            if not comment_line_parent_id:
                ret.append(r)
            else:
                comment_dict[comment_line_parent_id]['son'].append(r)
        #return HttpResponse(json.dumps(ret))
        return render(request, 'comments.html', {'comment_tree': ret})

<!--自定義模板語言：前端代碼-->
{% load comafter %}
{% addDivs comment_tree %} #導入參數，此參數是後端返回的數組ret

#author：wylkjj
#date：2020/1/2
#-*- coding:utf-8 -*-
#後端自定義模板語言
from django import template
from django.utils.safestring import mark_safe
register = template.Library()
#遞歸方法
def diGui(son):
    html = ""
    for cv in son:
        b = '<div class="comment_msg"><span>'
        b += cv['content'] + "</span>"
        b += diGui(cv['son'])
        b += "</div>"
        html += b
    return html

@register.simple_tag
def addDivs(comment_list):
    html = '<div class="comment_list">'
    for v in comment_list:
        a = '<div class="comment_msg"><span>'
        a += v['content'] + "</span>"
        a += diGui(v['son'])
        a += "</div>"
        html += a
    return mark_safe(html)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。