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='width: 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实现畅言留言板和网易跟帖样式

 

posted @ 2017-05-31 09:44  依旧十八岁的夕阳小子  阅读(248)  评论(0)  编辑  收藏  举报