What I want to implement is the style shown below. You can refer to the message boards of the two websites below. They The implementation principles are the same
Changing message board style:
NetEase post style:
Principle
Two main fields id and pid need to be added to the comment table. Other fields can be added at will, such as article id, reply time, reply content, reply person, etc.
Where pid is the id of the comment that has been replied to currently.
As can be seen from the picture above, the pid of each layer is the id of the comment on the previous layer. Take a closer look at the layout above. Is it very similar to multidimensional arrays in PHP? If you can think of it, it's easy.
Implementation method
1. Front desk: This is relatively simple, just div embedded in div. Then just set the border and margin padding of the div
<div class="comment"> <div class="comment"> <div class="comment"> </div> </div> </div> <div class="comment"> </div>
2. Backend: Two recursions are used. First, recursion is used to reorganize the results in the database. After reorganization, then recursion is used to output the above front-end code
The structure and content of the comment table are as follows
Then read all comments in this table directly. You can get the following array
Array ( [0] => Array ( [id] => 1 [pid] => [content] => 评论1 ) [1] => Array ( [id] => 2 [pid] => [content] => 评论2 ) [2] => Array ( [id] => 3 [pid] => [content] => 评论3 ) [3] => Array ( [id] => 4 [pid] => 1 [content] => 评论4回复评论1 ) [4] => Array ( [id] => 5 [pid] => 1 [content] => 评论5回复评论1 ) [5] => Array ( [id] => 6 [pid] => 2 [content] => 评论6回复评论2 ) [6] => Array ( [id] => 7 [pid] => 4 [content] => 评论7回复评论4 ) [7] => Array ( [id] => 8 [pid] => 7 [content] => 评论8回复评论7 ) [8] => Array ( [id] => 9 [pid] => 8 [content] => 评论9回复评论8 ) [9] => Array ( [id] => 10 [pid] => 8 [content] => 评论10回复评论8 ) )
Then we need to reorganize this array into the message board form above
Among them, $array is the array read above. First, the pid is taken out, which is empty by default, and then recursively, and then the array whose pid is the current comment id is taken out
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; }
After reorganization, you can get the array below. You can see that the style of this array is very similar to the front comment style
Array ( [0] => Array ( [id] => 1 [pid] => [content] => 评论1 [child] => Array ( [0] => Array ( [id] => 4 [pid] => 1 [content] => 评论4回复评论1 [child] => Array ( [0] => Array ( [id] => 7 [pid] => 4 [content] => 评论7回复评论4 [child] => Array ( [0] => Array ( [id] => 8 [pid] => 7 [content] => 评论8回复评论7 [child] => Array ( [0] => Array ( [id] => 9 [pid] => 8 [content] => 评论9回复评论8 [child] => Array ( ) ) [1] => Array ( [id] => 10 [pid] => 8 [content] => 评论10回复评论8 [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] => 6 [pid] => 2 [content] => 评论6回复评论2 [child] => Array ( ) ) ) ) [2] => Array ( [id] => 3 [pid] => [content] => 评论3 [child] => Array ( ) ) )
After getting the above array, you can use recursive output
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>"; } }
Then you can see
The principle is like this, just reorganize the array and then traverse the output.
The above is the entire process of implementing the Changyan message board and NetEase post style in PHP. You can also try to innovate. I hope this article will be helpful to your learning.