抽屉实现评论数据结构及评论内容显示示例

1.实现评论数据结构两种方式

　　（1）循环实现评论数据结构（推荐）

　　（2）js递归实现评论数据结构

2.显示评论内容两种方式

　　（1）js递归显示评论内容（推荐）

　　　　　　　　前端进行递归实现

　　（2）simple_tag递归显示评论内容　　　　

　　　　　　　　render + simple_tag
　　　　　　　　前端直接after指定位置

 1 from django.shortcuts import render,HttpResponse
 2 from app01 import models
 3
 4 def index(request):
 5     return render(request, 'index.html')
 6 #循环实现评论数据结构(推荐）
 7 def comment(request):
 8     news_id = request.GET.get('news_id')
 9     # models.xxx.filter(news_id=news_id).values(...)
10     comment_list = [
11         {'id': 1, 'content': 'Python最牛逼', 'user': '搞基建', 'parent_id': None},
12         {'id': 2, 'content': 'Java最牛逼', 'user': '搞基建', 'parent_id': None},
13         {'id': 3, 'content': 'PHP最牛逼', 'user': '搞基建', 'parent_id': None},
14         {'id': 4, 'content': '你最牛逼', 'user': '小比虎', 'parent_id': 1},
15         {'id': 5, 'content': '老师最你比', 'user': '李欢', 'parent_id': 1},
16         {'id': 6, 'content': '郭永昌是...', 'user': '郭永昌', 'parent_id': 4},
17         {'id': 7, 'content': '哈哈我是流氓...', 'user': '崔月圆', 'parent_id': 2},
18         {'id': 8, 'content': '我女朋友好漂亮...', 'user': '崔月圆', 'parent_id': 3},
19         {'id': 9, 'content': '见到你女友，交定你朋友...', 'user': '搞基建', 'parent_id': 8},
20         {'id': 10, 'content': '见到你女友，交定你朋友...', 'user': '鼻环', 'parent_id': None},
21         {'id': 11, 'content': '我是大胖...', 'user': 'xiaopang', 'parent_id': 6},
22     ]
23     comment_tree = []
24     comment_list_dict = {}
25     for row in comment_list:
26         row.update({'children': []})
27         comment_list_dict[row['id']] = row
28     for item in comment_list:
29         parent_row = comment_list_dict.get(item['parent_id'])
30         if not parent_row:
31             comment_tree.append(item)
32         else:
33             parent_row['children'].append(item)
34
35     import json
36     return HttpResponse(json.dumps(comment_tree)) #JS递归显示评论内容（推荐）
37     #return render(request, 'comment.html', {'comment_tree': comment_tree}) #simple_tag递归显示评论内容

views.py（循环实现评论数据结构）

  1 from django.shortcuts import render,HttpResponse
  2 from app01 import models
  3 #递归实现评论数据结构（不推荐）
  4 class Node:
  5     @staticmethod
  6     def digui(ret, row):
  7         # ret: {'id': 4, 'content': '你最牛逼', 'user': '小比虎', 'parent_id': 1, 'children': []},{'id': 5, 'content': '老师最你比', 'user': '李欢', 'parent_id': 1},]
  8         # row {'id': 6, 'content': '郭永昌是...', 'user': '郭永昌', 'parent_id': 4},
  9         for rt in ret:
 10             if rt['id'] == row['parent_id']:
 11                 row['children'] = []
 12                 rt['children'].append(row)
 13                 return
 14             else:
 15                 Node.digui(rt['children'],row)
 16
 17     @staticmethod
 18     def create_tree(comment_list):
 19         ret = []
 20         """
 21         {'user': '搞基建', 'parent_id': None, 'id': 1, 'children': [{'id': 4, 'content': '你最牛逼', 'user': '小比虎', 'parent_id': 1, 'children': []},{'id': 5, 'content': '老师最你比', 'user': '李欢', 'parent_id': 1},], 'content': 'Python最牛逼'}
 22         {'user': '搞基建', 'parent_id': None, 'id': 2, 'children': [], 'content': 'Java最牛逼'}
 23         {'user': '搞基建', 'parent_id': None, 'id': 3, 'children': [], 'content': 'PHP最牛逼'}
 24         """
 25         for row in comment_list:
 26             # row {'id': 6, 'content': '郭永昌是...', 'user': '郭永昌', 'parent_id': 4},
 27             if not row['parent_id']: # None
 28                 row['children'] = []
 29                 ret.append(row)
 30             else:
 31                 Node.digui(ret,row)
 32         return ret
 33
 34 def comment(request):
 35     news_id = 1
 36
 37     # comment_list = models.Comment.objects.filter(news_id=news_id)
 38     # for row in comment_list:
 39     #     print(row.id,row.content,row.user_info.name,row.parent_id)
 40     comment_list = [
 41         {'id': 1, 'content': 'Python最牛逼', 'user': '搞基建', 'parent_id': None},
 42         {'id': 2, 'content': 'Java最牛逼', 'user': '搞基建', 'parent_id': None},
 43         {'id': 3, 'content': 'PHP最牛逼', 'user': '搞基建', 'parent_id': None},
 44         {'id': 4, 'content': '你最牛逼', 'user': '小比虎', 'parent_id': 1},
 45         {'id': 5, 'content': '老师最你比', 'user': '李欢', 'parent_id': 1},
 46         {'id': 6, 'content': '郭永昌是...', 'user': '郭永昌', 'parent_id': 4},
 47         {'id': 7, 'content': '哈哈我是流氓...', 'user': '崔月圆', 'parent_id': 2},
 48         {'id': 8, 'content': '我女朋友好漂亮...', 'user': '崔月圆', 'parent_id': 3},
 49         {'id': 9, 'content': '见到你女友，交定你朋友...', 'user': '搞基建', 'parent_id': 8},
 50         {'id': 10, 'content': '见到你女友，交定你朋友...', 'user': '鼻环', 'parent_id': None},
 51     ]
 52     """
 53     comment_tree = Node.create_tree(comment_list)
 54     for i in comment_tree:
 55         print(i)
 56     """
 57     # hash_comment_list = {}
 58     # for m in range(len(comment_list)):
 59     #     comment_list[m].update({'children':[]})
 60     #     hash_comment_list[comment_list[m]['id']] = comment_list[m]
 61     # # print(hash_comment_list)
 62     # ret = []
 63     # for i in range(len(comment_list)):
 64     #     node = comment_list[i]
 65     #     pnode = hash_comment_list.get(node['parent_id'])
 66     #     if pnode:
 67     #         pnode['children'].append(node)
 68     #     else:
 69     #         ret.append(node)
 70     # print(ret)
 71
 72     # hash_comment_list = {}
 73     # for item in comment_list:
 74     #     item.update({'children': []})
 75     #     hash_comment_list[item['id']] = item
 76     # # print(hash_comment_list)
 77     # ret = []
 78     # for row in comment_list:
 79     #     node = row
 80     #     pnode = hash_comment_list.get(node['parent_id'])
 81     #     if pnode:
 82     #         pnode['children'].append(node)
 83     #     else:
 84     #         ret.append(node)
 85     #     print(comment_list)
 86     # print(ret)
 87
 88
 89     # for i in comment_list:
 90     #     i.update({'children': []})
 91     #
 92     # for i in comment_list:
 93     #     if i['id'] == 5:
 94     #         i['children'].append(i)
 95     #
 96     # for i in comment_list:
 97     #     print(i)
 98
 99     """
100     [
101         {
102             'id': 1,
103             'content': 'Python最牛逼',
104             'user': '搞基建',
105             'parent_id': None,
106             'children': [
107                 {'id': 4, 'content': '你最牛逼', 'user': '小比虎', 'parent_id': 1, 'children': [
108                     {'id': 6, 'content': '郭永昌是...', 'user': '郭永昌', 'parent_id': 4, 'children': []},
109                 ]},
110                 {'id': 5, 'content': '老师最你比', 'user': '李欢', 'parent_id': 1, 'children': []},
111             ]
112         },
113         {
114             'id': 2,
115             'content': 'Python最牛逼',
116             'user': '搞基建',
117             'parent_id': None,
118             'children': []
119         },
120         {
121             'id': 3,
122             'content': 'Python最牛逼',
123             'user': '搞基建',
124             'parent_id': None,
125             'children': []
126         },
127     ]
128     """
129     return HttpResponse('Comment')

views.py（js递归实现评论数据结构）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .comment-box{
 8             margin-left: 20px;
 9         }
10     </style>
11 </head>
12 <body>
13     <div class="item">
14         <a news_id="19" class="com">评论</a>
15         <div class="comment-list">
16             <div class="comment-box">
17                 <span>Py最牛</span>
18                 <div></div>
19             </div>
20             <div class="comment-box">
21                 <span>搞基建</span>
22                 <div class="comment-box">
23                     <span>小胡比</span>
24                 </div>
25                 <div class="comment-box">
26                     <span>玩得患</span>
27                 </div>
28             </div>
29         </div>
30     </div>
31     <div class="item">
32         <a news_id="18" class="com">评论</a>
33     </div>
34     <div class="item">
35         <a news_id="17" class="com">评论</a>
36     </div>
37
38     <script src="/static/jquery-2.1.4.min.js"></script>
39     //JS递归显示评论内容
40     <script>
41         $(function () {
42             bindCommentEvent();
43         });
44         function bindCommentEvent() {
45            $('.com').click(function () {
46                var news_id = $(this).attr('news_id');
47                var _this = $(this);
48                $.ajax({
49                    url: '/comment/',
50                    type: 'GET',
51                    data: {news_id: news_id},
52                    dataType: "html",
53                    success:function (arg) {
54                        //create_tree(arg, _this);
55                        console.log(arg);
56                        _this.after(arg);
57                    }
58                })
59            })
60         }
61
62         function diGui(children_list){
63                 var html = "";
64                 $.each(children_list,function (ck,cv) {
65                        var b = '<div class="comment-box"><span>';
66                        b+= cv.content + "</span>";
67                        b += diGui(cv.children);
68                        b += "</div>";
69                        html += b;
70                  });
71                 return html;
72             }
73
74         function create_tree(data,$this) {
75              var html = '<div class="comment-list">';
76              $.each(data,function (k,v) {
77                 var a = '<div class="comment-box"><span>';
78                  a+= v.content + "</span>";
79                  // 创建子评论
80                  a += diGui(v.children);
81                  a+= "</div>";
82                  html += a;
83              });
84              html += "</div>";
85              $this.after(html);
86         }
87     </script>
88 </body>
89 </html>

index.html（JS递归显示评论内容推荐）

 1 #__author:  Administrator
 2 #date:  2016/12/26
 3 from django import template
 4 from django.utils.safestring import mark_safe
 5 #simple_tag递归显示评论内容
 6 #路径：/app01/templatetags
 7 register = template.Library()
 8
 9 def diGui(children_list):
10     html = ""
11     for cv in children_list:
12         b = '<div class="comment-box"><span>'
13         b += cv['content'] + "</span>"
14         b += diGui(cv['children'])
15         b += "</div>"
16         html += b
17     return html
18
19 @register.simple_tag
20 def create_tree(comment_list):
21     html = '<div class="comment-list">'
22     for v in comment_list:
23         a = '<div class="comment-box"><span>'
24         a += v['content'] + "</span>"
25         a += diGui(v['children'])
26         a += "</div>"
27         html += a
28     return mark_safe(html)
29
30 """
31  function diGui(children_list){
32                 var html = "";
33                 $.each(children_list,function (ck,cv) {
34                        var b = '<div class="comment-box"><span>';
35                        b+= cv.content + "</span>";
36                        b += diGui(cv.children);
37                        b += "</div>";
38                        html += b;
39                  });
40                 return html;
41             }
42
43
44             function create_tree(data,$this) {
45                  var html = '<div class="comment-list">';
46                  $.each(data,function (k,v) {
47                     var a = '<div class="comment-box"><span>';
48                      a+= v.content + "</span>";
49                      // 创建自评论
50                      a += diGui(v.children);
51                      a+= "</div>";
52                      html += a;
53                  });
54
55                  html += "</div>";
56                 $this.after(html);
57         }
58     """

laogao.py（simple_tag递归显示评论内容）

{% load laogao %}
{% create_tree comment_tree %}//simple_tag递归显示评论内容

comment.html（simple_tag递归显示评论内容）

转载于:https://www.cnblogs.com/lbzbky/p/11028601.html

抽屉实现评论数据结构及评论内容显示示例相关推荐

备战秋招——记录自己学习的第六天（Django项目难点拆分——层级评论数据结构实现）
我们知道,在实现BBS项目时,评论的功能是必不可少的. 先配置好环境 (urls) from django.contrib import admin from django.urls import p ...
Python爬虫爬取豆瓣电影评论内容，评论时间和评论人
Python爬虫爬取豆瓣电影评论内容,评论时间和评论人我们可以看到影评比较长,需要展开才能完整显示.但是在网页源码中是没有显示完整影评的.所以我们考虑到这部分应该是异步加载的方式显示.所以打开网页的 ...
数据结构：评论盖楼设计，支持无限层级
第一部分:问题抛出常见的设计,采用标准的树形结构,每个结点记录父ID(pid).利用pid查询子集时,一次只能查询出一层,查询多层时,逻辑代码将会非常繁琐,而且无法一次查询出子集的数量等等,另外多次 ...
WordPress后台的文章、分类，媒体，页面，评论,链接等所有信息中显示ID并将ID设置为第一列...
WordPress后台默认是不显示文章.分类等信息ID的,查看起来非常不方便,不知道Wp团队出于什么原因默认不显示这个但可以使用Simply Show IDs插件来实现不使用插件,其他网友的实现: ...
php网站评论代码,PHP评论代码帮助
我正在编写我的第一个博客.在各种教程和其他论坛的帮助下,我设法收集了半工作代码. 现在我有一个代码,它接受并显示评论,但问题是协调哪些评论发布在哪个帖子上.我目前的设置是我的所有帖子都是HTML文件, ...
商品评论信息与评论信息分类
商品详情分析-显示商品评论信息: 数据库实现: 实体类: package com.qfedu.fmmall.entity;import lombok.AllArgsConstructor; impor ...
爬取MOOC课程评论区的评论数据
对MOOC上某一课程评论区的评论数据爬取出来(例如:爬取<大学生计算机基础>) 1.爬取流程框架 2.爬取数据 ** 用户名-namesList.用户ID-user_ID.评论内容-com ...
微信小程序点赞+评论（无限级评论回复）/带图评论解决方案
微信小程序点赞+评论(无限级评论回复)/带图评论解决方案需求描述实现要点分析目录结构前端功能方法集成后端方法数据库结构效果展示未解决的问题需求描述最近在思考一个需求:文章可以评论 ...
wordpress评论插件_WordPress评论插件的全面比较
wordpress评论插件 Engagement, engagement, engagement. 参与,参与,参与. My brother Lee and I are web developers ...

抽屉实现评论数据结构及评论内容显示示例

抽屉实现评论数据结构及评论内容显示示例相关推荐

最新文章

热门文章