无限极评论功能的实现

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

思路
1 先建立个评论的数据库表,字段要有 文章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页面
//获取评论总数
n u m = D B : : n a m e ( c o m m e n t ) &gt; w h e r e ( a r t i d , num = DB::name(&#x27;comment&#x27;)-&gt;where(&#x27;art_id&#x27;, id)->count();
t h i s &gt; a s s i g n ( n u m , this-&gt;assign(&#x27;num&#x27;, num);
// 显示评论列表,应该是pid是0的,id是传过来的id的遍历 $id 就是文章表中的id
$data4=array();
h h = D B : : n a m e ( c o m m e n t ) &gt; w h e r e ( a r t i d , hh = DB::name(&#x27;comment&#x27;)-&gt;where(&#x27;art_id&#x27;, id)->order(‘id asc’)->find(); // 取id最小的一条,取出来
// $parent_id = $hh[‘id’]; // id
$parent_id = $hh[‘parent_id’];
d a t a 4 = data4= this->getCommlist($parent_id );

 	 //获取评论列表 
 	$this->assign("commlist",$data4);      // 在这显示的评论列表

222 /**
*递归获取评论列表,这一步是最重要的,将评论内容以 tree 格式展示
*/
// 传过来的参数 parent_id 要加 $
protected function getCommlist(parent_id,&$result = array())
{
a r r = D B : : n a m e ( c o m m e n t ) &gt; w h e r e ( p a r e n t i d , arr = DB::name(&#x27;comment&#x27;)-&gt;where(&#x27;parent_id&#x27;, 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);	
}

猜你喜欢

转载自blog.csdn.net/qq_39835505/article/details/84984712
今日推荐