无限极评论功能的实现

参考网址
https://blog.csdn.net/yums467/article/details/50749968 我根据的这个

思路
1 先建立个评论的数据库表，字段要有 art_id 用来对应文章表的art_id，评论内容，parent_id, uid

2评论的时候插入文章id ,uid 然后评论内容就OK了

实现步骤

html 页面中

            <!--comments-->
            // 遍历显示评论内容
            <h3>{$num} 评论</h3>
            <div class="comments">
                <ul class="comments-list">
                {volist name="commlist" id="data"} 
                <li comment_id="{$data['id']}"> 
                    <li class="comments_li">
                    <!-- 一级评论 -->
                        <div class="comment clearfix">
                            <img src="images/avatar.png"  class="avatar" />
                            <p class="meta">{$data.nickname}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;says:<br /><small></small></p>
                            <div class="textarea">
                                <p>{$data.content} </p>
                            </div>   
                            <div class="meta"><a href="javascript:;" id="replay_id" comment_id="{$data.id}" class="reply_btn" >回复</a></div>
                        </div>
                    <!-- 二级评论 -->
                        <ul class="clearfix">
                        {volist name="data.children" id="child"  }
                        <li comment_id="{$child.id}"> 
                            <li>                           
                                <div class="comment clearfix">
                                    <!-- <img src="images/avatar.png" alt="avatar" class="avatar" /> -->
                                    <img src="images/avatar.png"  class="avatar" />
                                    <p class="meta">{$child.nickname}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;says:<br /><small>{$child.create_time} </small></p>
                                    <div class="textarea">
                                        <p>{$child.content}</p>
                                    </div>
                            <!-- <a href="javascript:;" class="reply_btn" >回复</a> -->
                            <div class="meta"><a href="javascript:;" id="replay_id" comment_id="{$child.id}" class="reply_btn" >回复</a></div>
                                    
                                     <!-- <div class="meta"> <a class="comment-reply" replyswitch="off" comment_id="{$child.id}">回复</a> </div>  -->
                                </div>
                    <!-- 三级评论 -->
                                <ul class="clearfix">
                                 {volist name="child.children" id="grandson" }
                                 <li comment_id="{$grandson.id}">
                                    <li>
                                       <div class="comment clearfix">
                                            <img src="images/avatar.png" class="avatar" />
                                            <p class="meta">{$grandson.nickname}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;says:<br /><small>May 17, 2012</small> </p>
                                            <div class="textarea">
                                                <p>{$grandson.content}</p>
                                            </div>
                                            <!-- 三级评论就不能回复了 -->
                            <!-- <div class="meta"><a href="javascript:;" id="replay_id" comment_id="{$grandson.id}" class="reply_btn" >回复</a></div> -->

                                        </div>       
                                    </li>
                                {/volist}
                                </ul>          
                            </li>
                            {/volist}
                        </ul>
                    </li>
                    {/volist}
                </ul>
            </div>

            <hr />

            <!-- 发表 评论框 -->
            <form  method="post" action="home/article/add_nullcomment.html"  enctype="multipart/form-data" />
                <div class="clear"></div>
                <div class="af-outer af-required">
                    <div class="af-inner">
                        <input type="hidden" name="art_id" value="{$data['id']}" />
                        <label for="input-message" id="message_label">发表 评论:</label>
                        <textarea name="message" id="input-message" cols="30" class="text-input span8"></textarea>
                        <label class="error" for="input-message" id="message_error">Message is required.</label>
                    </div>
                </div>
                <div class="af-outer af-required">
                    <div class="af-inner">
                     <input type="submit" name="button" class="btn btn-welcome btn-large"  value="发布" />
                        <!-- <input type="submit" name="submit" class="form-button btn btn-welcome btn-large" id="submit_btn" value="提交!" /> -->
                    </div>
                </div>
            </form>

控制器中

111// 展示评论内容到html页面
//获取评论总数

public function display_only()	
{
	$udata = session::get('USER_INFO');
	$data = $_GET;
	$id = $data['id'];					// article表的id,查关联表的type_id
	$data2 = DB::name('article')->where('id',$id)->find();		
	// 评论表的art_id 是文章表的art_id
	$art_id = $data2['art_id'];    
	//获取评论总数
	$num = DB::name('comment')->where('art_id',$data2['art_id'])->count(); 
 	$this->assign('num',$num); 
 	$data4=array(); 
 	// 这种方法得到评论列表所有的评论
 	$data4 = $this->getCommlist();
 	
 	// 这个方法 把 将某个键值相同的合并到一个数组中，再取其中 art_id 为 当前art_id  的
 	$result =   array();
	foreach($data4 as $k=>$v){
	    $result[$v['art_id']][]    =   $v;
	} 

	$arr = array();
	foreach($result as $val)  // 此时的$val就是$result同 art_id的一个大数组，我要的就是这个，怎么判断它的art_id
	{
			foreach($val as $v)
			{
				if($v['art_id'] == $art_id)  
				{
					// echo '<hr>';  
					$arr = $val;
				}
			}
	}

 	//获取评论列表 
 	$this->assign("commlist",$arr);     

222 /**
*递归获取评论列表，这一步是最重要的，将评论内容以 tree 格式展示
*/

protected function getCommlist($ parent_id = 0,&$result = array())
{

	$arr = DB::name('comment')->where('parent_id',$parent_id)->order("create_time desc")->select();

	if(empty($arr))
	{ 
		return array(); 
	} 
	foreach ($arr as $cm) 
	{ 
		$thisArr=&$result[]; 
		$cm["children"] = $this->getCommlist($cm["id"],$thisArr);
		$thisArr = $cm;
	 } 
		
	return $result;
}

js 中
// 加载回复框
//页面加载完毕后开始执行的事件

    $(".reply_btn").click(function(){
    
        var parent_id = $(this).attr("comment_id");                     //要回复的评论id
        $(".reply_textarea").remove();
        // 加载回复框 
        $(this).parent().append("< div class='reply_textarea'>  <textarea id='replay_content' rows='5' cols='100'>  </textarea> <br/> <input type='submit' onclick='submit_button('+parent_id')' value='发表' /> </div>")

// 提交回复内容到后台

    function submit_button(parent_id){
        var b = document.getElementById('replay_content').value;
         .ajax({
                type:'POST',
                url:"home/article/add_comment.html",
                data:{
                    "content": b,
                    "comment_id": parent_id,
                    "art_id": {$data['art_id']},
                },
                success:function(data){            
                    if (data.code == '3') 
                    {       
                        alert(成功);    
                    }else{
                        alert(失败);   
                    }
                },
                error:function(){ 
                } 
            });              
    }

333 js 中调的方法
// 添加子评论

public function add_comment()
{
	$data = $_POST;
	$uname1 = session::get('USER_INFO');
	$uname = $uname1['uname'];
	$uid = $uname1['uid'];

	$datb['content'] = $data['content'];
	$datb['uid']	 = $uid;								
	$datb['parent_id']  = $data['comment_id'];
	$datb['art_id']     = $data['art_id'];           // 文章id
	$datb['nickname']     = $uname;
	$datb['create_time'] = date('Y-m-d H:i:s');

	$result = DB::name('comment')->insert($datb);
	if($result)
	{
		$returnData = ['code'=>3, 'info'=>'评论成功'];
	}else{
		$returnData = ['code'=>4, 'info'=>'评论失败'];
	}
	// $returnData = json_encode($shanchu, JSON_UNESCAPED_UNICODE); 
	// var_dump(json_encode($returnData));
	return json_encode($returnData,JSON_UNESCAPED_UNICODE);	
}