zoukankan      html  css  js  c++  java

  • php实现畅言留言板和网易跟帖样式

     

    博客分类：
     

    我要实现的就是下图的这种样式，可参考下面这两个网站的留言板，他们的实现原理都是一样的

    http://changyan.sohu.com/blog/?p=177

    http://www.reddit.com/r/wow/comments/2y6739/method_vs_blackhand_mythic_kill_video_world_1st/

    php实现畅言留言板和网易跟帖样式php实现畅言留言板和网易跟帖样式

    和

    php实现畅言留言板和网易跟帖样式php实现畅言留言板和网易跟帖样式

     

    原理

    需要在评论表添加两个主要字段 id 和 pid  ，其他字段随意添加，比如文章id、回复时间、回复内容、回复人什么的。

    其中pid就是当前已经回复过的评论的id。

    从上图可以看出，里面每一层的pid就是就是他上一层评论的id。仔细观察下上面的布局。是不是很像PHP中的多维数组？如果你能想到，那么就简单了。

     

    实现方法

    1.前台 这个比较简单 就是div嵌div。然后设置div的border和margin  padding就行了

    Html代码  收藏代码
    1. <div class="comment">  
    2.     <div class="comment">  
    3.         <div class="comment">  
    4.    
    5.         </div>  
    6.     </div>  
    7. </div>  
    8.    
    9. <div class="comment">  
    10.    
    11. </div>  

    2、后台   用到了两次递归，首先用递归把数据库中的结果重组下，重组之后，然后用递归输出上面的那种前台代码即可

    comment表结构和内容如下

    php实现畅言留言板和网易跟帖样式php实现畅言留言板和网易跟帖样式

    然后直接读出这个表中的所有评论。可以得到如下数组

    Php代码  收藏代码
    1. Array  
    2. (  
    3.     [0] => Array  
    4.         (  
    5.             [id] => 1  
    6.             [pid] =>  
    7.             [content] => 评论1  
    8.         )  
    9.    
    10.     [1] => Array  
    11.         (  
    12.             [id] => 2  
    13.             [pid] =>  
    14.             [content] => 评论2  
    15.         )  
    16.    
    17.     [2] => Array  
    18.         (  
    19.             [id] => 3  
    20.             [pid] =>  
    21.             [content] => 评论3  
    22.         )  
    23.    
    24.     [3] => Array  
    25.         (  
    26.             [id] => 4  
    27.             [pid] => 1  
    28.             [content] => 评论4回复评论1  
    29.         )  
    30.    
    31.     [4] => Array  
    32.         (  
    33.             [id] => 5  
    34.             [pid] => 1  
    35.             [content] => 评论5回复评论1  
    36.         )  
    37.    
    38.     [5] => Array  
    39.         (  
    40.             [id] => 6  
    41.             [pid] => 2  
    42.             [content] => 评论6回复评论2  
    43.         )  
    44.    
    45.     [6] => Array  
    46.         (  
    47.             [id] => 7  
    48.             [pid] => 4  
    49.             [content] => 评论7回复评论4  
    50.         )  
    51.    
    52.     [7] => Array  
    53.         (  
    54.             [id] => 8  
    55.             [pid] => 7  
    56.             [content] => 评论8回复评论7  
    57.         )  
    58.    
    59.     [8] => Array  
    60.         (  
    61.             [id] => 9  
    62.             [pid] => 8  
    63.             [content] => 评论9回复评论8  
    64.         )  
    65.    
    66.     [9] => Array  
    67.         (  
    68.             [id] => 10  
    69.             [pid] => 8  
    70.             [content] => 评论10回复评论8  
    71.         )  
    72.    
    73. )  

    然后我们就需要把这个数组重组成上面的那种留言板形式的

    其中$array就是上面读取出来的数组，首先取出pid默认为空的，然后递归，在取出pid为当前评论id的数组

    Php代码  收藏代码
    1. public static function tree($array,$child="child", $pid = null)  
    2. {  
    3.     $temp = [];  
    4.     foreach ($array as $v) {  
    5.         if ($v['pid'] == $pid) {  
    6.             $v[$child] = self::tree($array,$child,$v['id']);  
    7.             $temp[] = $v;  
    8.         }  
    9.     }  
    10.     return $temp;  
    11. }  

    重组后，可以得到下面的这个数组，可以看到，这个数组的样式已经和前台评论样式很像了

    Php代码  收藏代码
    1. Array  
    2. (  
    3.     [0] => Array  
    4.         (  
    5.             [id] => 1  
    6.             [pid] =>  
    7.             [content] => 评论1  
    8.             [child] => Array  
    9.                 (  
    10.                     [0] => Array  
    11.                         (  
    12.                             [id] => 4  
    13.                             [pid] => 1  
    14.                             [content] => 评论4回复评论1  
    15.                             [child] => Array  
    16.                                 (  
    17.                                     [0] => Array  
    18.                                         (  
    19.                                             [id] => 7  
    20.                                             [pid] => 4  
    21.                                             [content] => 评论7回复评论4  
    22.                                             [child] => Array  
    23.                                                 (  
    24.                                                     [0] => Array  
    25.                                                         (  
    26.                                                             [id] => 8  
    27.                                                             [pid] => 7  
    28.                                                             [content] => 评论8回复评论7  
    29.                                                             [child] => Array  
    30.                                                                 (  
    31.                                                                     [0] => Array  
    32.                                                                         (  
    33.                                                                             [id] => 9  
    34.                                                                             [pid] => 8  
    35.                                                                             [content] => 评论9回复评论8  
    36.                                                                             [child] => Array  
    37.                                                                                 (  
    38.                                                                                 )  
    39.    
    40.                                                                         )  
    41.    
    42.                                                                     [1] => Array  
    43.                                                                         (  
    44.                                                                             [id] => 10  
    45.                                                                             [pid] => 8  
    46.                                                                             [content] => 评论10回复评论8  
    47.                                                                             [child] => Array  
    48.                                                                                 (  
    49.                                                                                 )  
    50.    
    51.                                                                         )  
    52.    
    53.                                                                 )  
    54.    
    55.                                                         )  
    56.    
    57.                                                 )  
    58.    
    59.                                         )  
    60.    
    61.                                 )  
    62.    
    63.                         )  
    64.    
    65.                     [1] => Array  
    66.                         (  
    67.                             [id] => 5  
    68.                             [pid] => 1  
    69.                             [content] => 评论5回复评论1  
    70.                             [child] => Array  
    71.                                 (  
    72.                                 )  
    73.    
    74.                         )  
    75.    
    76.                 )  
    77.    
    78.         )  
    79.    
    80.     [1] => Array  
    81.         (  
    82.             [id] => 2  
    83.             [pid] =>  
    84.             [content] => 评论2  
    85.             [child] => Array  
    86.                 (  
    87.                     [0] => Array  
    88.                         (  
    89.                             [id] => 6  
    90.                             [pid] => 2  
    91.                             [content] => 评论6回复评论2  
    92.                             [child] => Array  
    93.                                 (  
    94.                                 )  
    95.    
    96.                         )  
    97.    
    98.                 )  
    99.    
    100.         )  
    101.    
    102.     [2] => Array  
    103.         (  
    104.             [id] => 3  
    105.             [pid] =>  
    106.             [content] => 评论3  
    107.             [child] => Array  
    108.                 (  
    109.                 )  
    110.    
    111.         )  
    112.    
    113. )  

    得到上面的数组后 ，再用递归输出即可

    Php代码  收藏代码
    1. public static function traverseArray($array)  
    2. {  
    3.     foreach ($array as $v) {  
    4.         echo "<div class='comment' style=' 100%;margin: 10px;background: #EDEFF0;padding: 20px 10px;border: 1px solid #777;'>";  
    5.         echo $v['content'];  
    6.         if ($v['child']) {  
    7.             self::traverseArray($v['child']);  
    8.         }  
    9.         echo "</div>";  
    10.    
    11.     }  
    12.    
    13. }  

    然后即可看到

    php实现畅言留言板和网易跟帖样式php实现畅言留言板和网易跟帖样式

    原理就是这样 ，就是重组下数组，然后遍历输出就行了。

    原文：http://www.cnsecer.com/7211.html

    转自：php实现畅言留言板和网易跟帖样式
  • 相关阅读:
    DOM
    JavaScript 数组的方法总结
    vuex 状态持久化插件 —— vuex-persistedstate
    移动端1px细线
    CSS多行文本并显示省略号
    Java面试题
    Git提交分支
    Redis的安装配置
    Spring IoC
    单例模式
  • 原文地址：https://www.cnblogs.com/chengzhi59/p/6922699.html
Copyright © 2011-2022 走看看