我的畢設(shè)項(xiàng)目的評(píng)論模塊原來(lái)是采用多說(shuō)插件完成的，但是我現(xiàn)在希望能夠自己管理評(píng)論內(nèi)容，所以自己開始寫評(píng)論模塊。具體準(zhǔn)備采用與簡(jiǎn)書下評(píng)論類似的結(jié)構(gòu)，即一級(jí)評(píng)論直接顯示在文章下方，而二三級(jí)評(píng)論顯示在一級(jí)評(píng)論的下方，如下圖所示：

評(píng)論結(jié)構(gòu)

我覺得這可以說(shuō)是無(wú)限極分類的一種運(yùn)用，準(zhǔn)確的說(shuō)是子孫樹的運(yùn)用，進(jìn)行子孫樹分類后，循環(huán)輸出內(nèi)容，形成評(píng)論(不懂無(wú)限極分類的朋友可以去看看我的文章無(wú)限極分類原理與實(shí)現(xiàn))。

當(dāng)然，真正完成無(wú)限極回復(fù)評(píng)論的功能還有其他的要點(diǎn)，下面就來(lái)說(shuō)說(shuō)我是怎么完成無(wú)限極評(píng)論的。

數(shù)據(jù)庫(kù)設(shè)計(jì)

首先，就是數(shù)據(jù)表的設(shè)計(jì)。如果是論壇系統(tǒng)，可以將評(píng)論的數(shù)據(jù)分割成兩個(gè)表，一個(gè)表存儲(chǔ)評(píng)論的信息，包括發(fā)布帖子的用戶id或回復(fù)的用戶id，回復(fù)的帖子id，回復(fù)的時(shí)間等；另一個(gè)表，存儲(chǔ)評(píng)論的內(nèi)容，包括帖子的主題和回復(fù)的內(nèi)容。

我完成的是文章的評(píng)論模塊，就沒分成兩個(gè)表了，直接將評(píng)論的內(nèi)容與信息放在一起，如下面結(jié)構(gòu)：

SQL語(yǔ)句：

CREATE TABLE comment (
    comm_id INT UNSIGNED PRIMARY KEY AUTO_INCREMENT,
    user_id INT UNSIGNED NOT NULL DEFAULT 0 ,
    parent_id INT UNSIGNED NOT NULL DEFAULT 0 ,
    article_id INT UNSIGNED NOT NULL DEFAULT 0 ,
    comm_cont TEXT,
    comm_time INT UNSIGNED NOT NULL DEFAULT 0 
) ENGINE=MYISAM CHARSET=UTF8 ;

這種結(jié)構(gòu)是完成無(wú)限極回復(fù)的基礎(chǔ)，也能夠很明顯的看出取出的數(shù)據(jù)能很好的進(jìn)行無(wú)限極分類。

評(píng)論的結(jié)構(gòu)分析

完成一個(gè)評(píng)論模塊是很容易的，評(píng)論放入數(shù)據(jù)庫(kù)，然后取回放置在html中，同樣能完成評(píng)論模塊。但是，這種結(jié)構(gòu)是很雜亂，無(wú)序的。要想完成如簡(jiǎn)書評(píng)論一樣的評(píng)論模塊，就得采用特殊的方式。

那么，就要好好觀察一下簡(jiǎn)書評(píng)論的結(jié)構(gòu)了。

評(píng)論結(jié)構(gòu)

結(jié)合上面的數(shù)據(jù)表結(jié)構(gòu)，可以推斷一下，從數(shù)據(jù)表中取出且無(wú)限極分類后的數(shù)據(jù)，它的結(jié)構(gòu)應(yīng)該是這樣的：

array (
    array(一級(jí)評(píng)論,
        child=>array(
            二級(jí)評(píng)論，
            三級(jí)評(píng)論
            ）
        ），
    array (
        一級(jí)評(píng)論 ，
        child=>array(
            )
    ……

為什么這么說(shuō)？你可以很明顯的看出，二級(jí)、三級(jí)評(píng)論被包裹在一級(jí)評(píng)論中，而二級(jí)、三級(jí)評(píng)論是平行關(guān)系；因此，二級(jí)、三級(jí)評(píng)論是一級(jí)評(píng)論的子孫節(jié)點(diǎn)，而二級(jí)、三級(jí)評(píng)論是平行節(jié)點(diǎn)，不存在父子關(guān)系。

因此，可以得出，分類后的數(shù)據(jù)有且只有一個(gè)子孫節(jié)點(diǎn)，多級(jí)評(píng)論無(wú)論是不是對(duì)一級(jí)評(píng)論進(jìn)行回復(fù)，只要是處于一級(jí)評(píng)論的范圍，那么它的父節(jié)點(diǎn)必然是一級(jí)評(píng)論。

那么，二級(jí)、三級(jí)回復(fù)中的@某某某又是怎么實(shí)現(xiàn)的？其實(shí)，我在這里困擾了很長(zhǎng)時(shí)間。我期望用對(duì)表的自身連接來(lái)完成，但是不行，破壞了上面所述的結(jié)構(gòu)。最后，我從簡(jiǎn)書請(qǐng)求的json數(shù)據(jù)中得到了答案，請(qǐng)看簡(jiǎn)書評(píng)論的json數(shù)據(jù)：

JSON數(shù)據(jù)

上傳后有點(diǎn)模糊，各位同學(xué)可以借助火狐或者谷歌瀏覽器上面的插件觀察JSON數(shù)據(jù)。

重點(diǎn)觀察compiled_content字段，可以推斷它是將@某某某直接存儲(chǔ)到數(shù)據(jù)庫(kù)中的。這樣問題就解決了，同時(shí)觀察json數(shù)據(jù)，也能夠驗(yàn)證我上面所述的結(jié)構(gòu)是正確的。

具體實(shí)現(xiàn)

分析完結(jié)構(gòu)就來(lái)說(shuō)說(shuō)具體怎么來(lái)完成無(wú)限極回復(fù)。第一步，一級(jí)評(píng)論形成，這個(gè)簡(jiǎn)單，直接將評(píng)論存儲(chǔ)即可

一級(jí)評(píng)論

而二級(jí)評(píng)論要利用到j(luò)s，點(diǎn)擊評(píng)論時(shí)，獲取一級(jí)評(píng)論的用戶名，并保存，在發(fā)布回復(fù)時(shí)注意將其和評(píng)論的內(nèi)容結(jié)合在一起發(fā)往后臺(tái)：

二級(jí)評(píng)論

// replyUser 即 被回復(fù)的用戶名 @xxxx
var content = $('#reply').val.split(replyUser)[1];
var userlink = '<a href="#" class="xxx" target="_blank" >' + replyUser + '</a>';
var comm_cont = encodeURIComponent(userlink+content);

那么在數(shù)據(jù)庫(kù)中表現(xiàn)如下：

數(shù)據(jù)表內(nèi)容

之后就是一個(gè)關(guān)鍵點(diǎn)，利用子孫樹進(jìn)行分類，分類函數(shù)如下：

/**
 * @param $data array  數(shù)據(jù)
 * @param $parent  string 父級(jí)元素的名稱 如 parent_id
 * @param $son     string 子級(jí)元素的名稱 如 comm_id
 * @param $pid     int    父級(jí)元素的id 實(shí)際上傳遞元素的主鍵
 * @return array 
 */
function getSubTree($data , $parent , $son , $pid = 0) {
    $tmp = array();
    foreach ($data as $key => $value) {
        if($value[$parent] == $pid) {
            $value['child'] =  getSubTree($data , $parent , $son , $value[$son]);
            $tmp[] = $value;            
        }
    }
    return $tmp;
}

如此分類后，數(shù)據(jù)結(jié)構(gòu)發(fā)生變化，大致如下：

分類后數(shù)據(jù)

擁有這種結(jié)構(gòu)就能很好去完成評(píng)論了，如下

<?php foreach($tree as $key=>$val) ?>
<div class="comm_list" >
    <h2><?php echo $val['user_name'];?></h2>
    <p><?php echo $val['comm_cont'] ?></p>
    <!-- 其他信息 -->
    <div class="comm_reply">
        <?php if(!empty($val['child'])) { ?>
        <?php foreach($val['child'] as $k=>$v) ?>
        <div class="reply_list" >
            <h2><?php echo $v['user_name'];?></h2>
            <p><?php echo $v['comm_cont'] ?></p>
            <!-- 其他信息 -->
        </div>
        <?php }}?>
    </div>
</div>
<?php } ?>

同時(shí)，形成的回復(fù)樣式如下所示：

snipaste20170105_204906.png

這樣類簡(jiǎn)書評(píng)論結(jié)構(gòu)的無(wú)限極回復(fù)就完成了。

PS

這只是評(píng)論的一種形式，如還有一種類樓梯式的結(jié)構(gòu)，這種實(shí)現(xiàn)則更為簡(jiǎn)單一點(diǎn)，如下圖：

樓梯式評(píng)論結(jié)構(gòu)

這種結(jié)構(gòu)就很容易完成，只要存儲(chǔ)數(shù)據(jù)庫(kù)中的parent_id完全等于你回復(fù)的comm_id，在經(jīng)過如下無(wú)限極分類，就能夠完成。

/**
 * 子孫樹
 */
function getSubTree($data , $parent , $son , $pid = 0, $lev = 0) {
    $tmp = array();
    foreach ($data as $key => $value) {
        if($value[$parent] == $pid) {
            $value['lev'] = $lev;
            $tmp[] = $value;
            $tmp = array_merge($tmp , getSonTree($data , $parent , $son , $value[$son] , $lev+1));
        }
    }
    return $tmp;
}

這種無(wú)限極子孫樹分類和前面給出的子孫樹分類不同，分類后不會(huì)將子類包裹在child中，而是形成等級(jí)，最高級(jí)為0，依次往下。

例如：一級(jí)評(píng)論的comm_id=1,parent_id=0,那么二級(jí)評(píng)論的comm_id=2,parent_id=1；三級(jí)評(píng)論的comm_id=3,parent_id=2；

分類最后形成如下結(jié)構(gòu)

array(
array('comm_id'=>1,parent_id=>0,art_id=>1,'lev'=>0) ,
array('comm_id'=>2,parent_id=>1,art_id=>1,'lev'=>1),
array('comm_id'=>3,parent_id=>2,art_id=>1,'lev'=>2),
array('comm_id'=>4,parent_id=>3,art_id=>1,'lev'=>3),
array('comm_id'=>5,parent_id=>2,art_id=>1,'lev'=>2)
);

然后直接循環(huán)輸出，并將lev作為屬性打印在html中，最后利用js讀取lev，并根據(jù)不同的等級(jí)分配不同的margin-left即可，它會(huì)隨著margin的不同而排列在不同的位置，如下：

// html中
<?php foreach($tree as $key=>$val) {?>
<div class="comm_list" lev="<?php echo $val['lev']?>">
……
</div>
<?php } ?>

// js中
$('div.comm_list').css('margin-left' , 20 * lev);

END