本文作者:DurkBlue

PHP如何实现畅言留言板和网易跟帖样式呢?

DurkBlue2019-12-041796
PHP如何实现畅言留言板和网易跟帖样式呢?摘要: 我要实现的就是下图的这种样式,原理需要在评论表添加两个主要字段 id 和 pid  ,其他字段随意添加,比如文章id、回复时间、回复内容、回复人什么的。其中pid就是当前...

我要实现的就是下图的这种样式,

PHP如何实现畅言留言板和网易跟帖样式呢? 第1张

原理

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

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

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


实现方法

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="comment" >  
    评论1
    <div class="comment">  
        评论3
        <div class="comment">  
            评论2
            <div class="comment">  
                评论4
            </div>
        </div>  
    </div
    <div class="comment">  
         评论5
    </div>   
</div>  
<div class="comment">  
    评论6
</div>


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


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

Php代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
Array  
(  
    [0] => Array  
        (  
            [id] => 1  
            [pid] =>  
            [content] => 评论1  
        )  
    
    [1] => Array  
        (  
            [id] => 2  
            [pid] =>  
            [content] => 评论2  
        )  
    
    [2] => Array  
        (  
            [id] => 3  
            [pid] =>  1
            [content] => 评论3回复评论1  
        )  
    
    [3] => Array  
        (  
            [id] => 4  
            [pid] => 2
            [content] => 评论4回复评论2  
        )  
    
    [4] => Array  
        (  
            [id] => 5  
            [pid] => 1  
            [content] => 评论5回复评论1  
        )  
     [5] => Array  
        (  
            [id] => 6  
            [pid] =>   
            [content] => 评论6 
        
)


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

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

Php代码

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


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

Php代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
Array  
(  
    [0] => Array  
        (  
            [id] => 1  
            [pid] =>  
            [content] => 评论1  
            [child] => Array  (
                   [0] => Array  
                        (  
                            [id] => 3  
                            [pid] => 1  
                            [content] => 评论3回复评论1  
                            [child] => Array ( )  
    
                        )
                   [1] => Array  
                        (  
                            [id] => 5  
                            [pid] => 1  
                            [content] => 评论5回复评论1  
                            [child] => Array ( )  
                        )
            )
        )  
    
    [1] => Array  
        (  
            [id] => 2  
            [pid] =>  
            [content] => 评论2  
            [child] => Array  
                (  
                    [0] => Array  
                        (  
                            [id] => 4  
                            [pid] => 2  
                            [content] => 评论4回复评论1  
                            [child] => Array ( )  
    
                        )  
    
                )  
    
        )  
    
    [2] => Array  
        (  
            [id] => 6  
            [pid] =>  
            [content] => 评论6  
            [child] => Array  ()  
        )  
    
)


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

Php代码

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


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


此篇文章由DurkBlue博客申请发布,转载吧请注明来处
文章投稿或转载声明

来源:DurkBlue版权归原作者所有,转载请保留出处。本站文章发布于 2019-12-04
温馨提示:文章内容系作者个人观点,不代表DurkBlue博客对其观点赞同或支持。

赞(0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享