评论操做展现

时间 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)