php无限级分类实现评论及回复

16 篇文章 0 订阅
10 篇文章 0 订阅
  • 经常在各大论坛或新闻板块详情页面下边看到评论功能,当然不单单是直接发表评论内容那么简单,可以对别人的评论进行回复,别人又可以对你的回复再次评论或回复,如此反复,理论上可以说是没有休止,从技术角度分析很容易想到运用无限级分类技术存储数据,运用递归获取评论层级结构数据,运用ajax实现评论页面交互,这里用thinkphp框架做个简单的demo练练手,为了简化流程这里第三级评论开始停止回复,当然只要在这个基础上稍作修改就可以实现无限回复功能,主要是view层样式修改较麻烦,需花些时间。

一、效果需求分析:

  1. 在头部可以直接发布一级评论,最新发表的评论显示在最上面,如下效果图
    这里写图片描述

  2. 对发表的评论可以回复,回复显示在上级评论下边,形成层级关系,如下效果图
    这里写图片描述

  3. 页面操作细节:点击某个评论的回复按钮时,显示回复文本输入框,同时其他评论的回复文本输入框消失,当再次点击该回复按钮时,该文本框消失

  4. 在最后一级评论(这里设置是第三级)关闭回复功能

  5. 即时显示评论总数

二、实现思路及细节

1.数据表设计

评论表

2.controller层关键函数:

(1). 递归获取评论列表

/**
*递归获取评论列表
   */
   protected function getCommlist($parent_id = 0,&$result = array()){    	
   	$arr = M('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;
   }

(2). 展示评论页面的action

public function index(){  
  	$num =  M('comment')->count(); //获取评论总数
  	$this->assign('num',$num);
      $data=array();
  	$data=$this->getCommlist();//获取评论列表
  	$this->assign("commlist",$data);
      $this->display('index');
  }

(3).评论页面ajax访问添加评论的action

/**
*添加评论
   */
   public function addComment(){			
   	$data=array();
   	if((isset($_POST["comment"]))&&(!empty($_POST["comment"]))){
   		$cm = json_decode($_POST["comment"],true);//通过第二个参数true,将json字符串转化为键值对数组
   		$cm['create_time']=date('Y-m-d H:i:s',time());
   		$newcm = M('comment');
   		$id = $newcm->add($cm);

   		$cm["id"] = $id;
   		$data = $cm;

   		$num =  M('comment')->count();//统计评论总数
   		$data['num']= $num;

   	}else{
   		$data["error"] = "0";
   	}
   	

   	echo json_encode($data);
   }

3.view层实现

(1). 展示页面的整体结构设计

这里写图片描述
实际效果:
这里写图片描述
页面html代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>php无限级分类实战————评论及回复功能</title>
	<link rel="stylesheet" type="text/css" href="/Public/css/comment.css">
	<script type="text/javascript" src="/Public/js/jquery-1.11.3.min.js" ></script>
	<script type="text/javascript" src="/Public/js/comment.js" ></script>
</head>
<body>

<div class="comment-filed">
  <!--发表评论区begin-->
  <div>
	<div class="comment-num">
		<span>{$num}条评论</span>
	</div>
	<div>
		<div>
		<textarea class="txt-commit" replyid="0"></textarea>
		</div>
		<div class="div-txt-submit">
			<a class="comment-submit" parent_id="0" style="" href="javascript:void(0);"><span style=''>发表评论</span></a>
		</div>		
	</div>
  </div>
  <!--发表评论区end-->

  <!--评论列表显示区begin-->
  	<!-- {$commentlist} -->
  	<div class="comment-filed-list" >
	  	<div><span>全部评论</span></div>
	  	<div class="comment-list" >
	  		<!--一级评论列表begin-->
	  		<ul class="comment-ul">	  	
	  			<volist name="commlist" id="data">	  				
	  				<li comment_id="{$data.id}">	  				
	  				<div >
	  					<div>
  							<img class="head-pic"  src="{$data.head_pic}" alt="">	
  						</div>
						<div class="cm">
							<div class="cm-header">
	  						<span>{$data.nickname}</span>
	  						<span>{$data.create_time}</span>
	  						</div>
							<div class="cm-content">
		  						<p>
		  							{$data.content}
		  						</p>
							</div>
		  					<div class="cm-footer">
		  						<a class="comment-reply" comment_id="{$data.id}" href="javascript:void(0);">回复</a>		  				
		  					</div>	
						</div>	  					  						  				
	  				</div>

					<!--二级评论begin-->
					<ul class="children">
					   <volist name="data.children" id="child" > 				  			
			  			<li comment_id="{$child.id}">	  				
			  				<div >
			  					<div>
		  							<img class="head-pic"  src="{$child.head_pic}" alt="">	
		  						</div>
								<div class="children-cm">
									<div  class="cm-header">
			  						<span>{$child.nickname}</span>
			  						<span>{$child.create_time}</span>
			  						</div>
									<div class="cm-content">
				  						<p>
				  							{$child.content}
				  						</p>
									</div>
				  					<div class="cm-footer">		  						
				  						<a class="comment-reply" replyswitch="off" comment_id="{$child.id}"  href="javascript:void(0);">回复</a>
				  					</div>	
								</div>	  					  						  				
			  				</div>
							
							<!--三级评论begin-->
							<ul class="children">
								<volist name="child.children" id="grandson" >	
								<li comment_id="{$grandson.id}">	  				
					  				<div >
					  					<div>
				  							<img class="head-pic"  src="{$grandson.head_pic}" alt="">	
				  						</div>
										<div class="children-cm">
											<div  class="cm-header">
					  						<span>{$grandson.nickname}</span>
					  						<span>{$grandson.create_time}</span>
					  						</div>
											<div class="cm-content">
						  						<p>
						  							{$grandson.content}
						  						</p>
											</div>
						  					<div class="cm-footer">		  						
						  						<!-- <a class="comment-reply" comment_id="1"  href="javascript:void(0);">回复</a> -->
						  					</div>	
										</div>	  					  						  				
					  				</div>
					  			</li>
					  			</volist>
							</ul>	
							<!--三级评论end-->

			  			</li>
			  		   </volist>
					</ul>	
					<!--二级评论end-->

	  			</li>
	  			</volist>	  				  				  				  				  
	  		</ul>
	  		<!--一级评论列表end-->
	  	</div>		
  	</div>
  <!--评论列表显示区end-->
</div>	
</body>
</html>

(2). 单个评论信息div结构代码

<div >
	<div>
		<img class="head-pic"  src="{$data.head_pic}" alt="">	
	</div>
	<div class="cm">
		<div class="cm-header">
				<span>{$data.nickname}</span>
				<span>{$data.create_time}</span>
				</div>
		<div class="cm-content">
					<p>
						{$data.content}
					</p>
		</div>
		<div class="cm-footer">
			<a class="comment-reply" comment_id="{$data.id}" href="javascript:void(0);">回复</a>		  				
		</div>	
	</div>	  					  						  				
</div>

对应的效果图:
这里写图片描述

对应的css代码:

.head-pic{
	width:40px;
	height:40px;	
}

.cm{
	position:relative;
	top:0px;
	left:40px;
	top:-40px;
	width:600px;
}

.cm-header{
	padding-left:5px;
}

.cm-content{
	padding-left:5px;
}

.cm-footer{
	padding-bottom:15px;
	text-align:right;
	border-bottom: 1px dotted #CCC;
}

.comment-reply{
	text-decoration:none;
	color:gray;
	font-size: 14px;
}
  1. JS代码

(1). 提交评论:提交评论的a标签按钮引用了样式comment-submit,在其点击事件中进行ajax操作

$('body').delegate('.comment-submit','click',function(){	
		var content = $.trim($(this).parent().prev().children("textarea").val());//根据布局结构获取当前评论内容
		$(this).parent().prev().children("textarea").val("");//获取完内容后清空输入框
		if(""==content){
			alert("评论内容不能为空!");		
		}else{
			var cmdata = new Object();
			cmdata.parent_id = $(this).attr("parent_id");//上级评论id
			cmdata.content = content;
			cmdata.nickname = "游客";//测试用数据
			cmdata.head_pic = "/Public/images/default.jpg";//测试用数据				
			var replyswitch = $(this).attr("replyswitch");//获取回复开关锁属性
			$.ajax({
				type:"POST",
				url:"/index.php/home/index/addComment",
				data:{
					comment:JSON.stringify(cmdata)				
				},
				dataType:"json",			
				success:function(data){
					if(typeof(data.error)=="undefined"){
						$(".comment-reply").next().remove();//删除已存在的所有回复div	
						//更新评论总数						
						$(".comment-num").children("span").html(data.num+"条评论");
						//显示新增评论
						var newli = "";						
						if(cmdata.parent_id == "0"){
						 //发表的是一级评论时,添加到一级ul列表中						 
						 newli = "<li comment_id='"+data.id+"'><div ><div><img class='head-pic'  src='"+data.head_pic+"' alt=''></div><div class='cm'><div  class='cm-header'><span>"+data.nickname+"</span><span>"+data.create_time+"</span></div><div class='cm-content'><p>"+data.content+"</p></div><div class='cm-footer'><a class='comment-reply' comment_id='"+data.id+"'  href='javascript:void(0);'>回复</a></div></div></div><ul class='children'></ul></li>";							
							$(".comment-ul").prepend(newli);
						}else{
						 //否则添加到对应的孩子ul列表中							 
						 	if('off'==replyswitch){//检验出回复关闭锁存在,即三级评论不再提供回复功能						 	
						 		newli = "<li comment_id='"+data.id+"'><div ><div><img class='head-pic'  src='"+data.head_pic+"' alt=''></div><div class='children-cm'><div  class='cm-header'><span>"+data.nickname+"</span><span>"+data.create_time+"</span></div><div class='cm-content'><p>"+data.content+"</p></div><div class='cm-footer'></div></div></div><ul class='children'></ul></li>";
						 	}else{//二级评论的回复按钮要添加回复关闭锁属性					 	
						 		newli = "<li comment_id='"+data.id+"'><div ><div><img class='head-pic'  src='"+data.head_pic+"' alt=''></div><div class='children-cm'><div  class='cm-header'><span>"+data.nickname+"</span><span>"+data.create_time+"</span></div><div class='cm-content'><p>"+data.content+"</p></div><div class='cm-footer'><a class='comment-reply' comment_id='"+data.id+"'  href='javascript:void(0);' replyswitch='off' >回复</a></div></div></div><ul class='children'></ul></li>";
						 	}						 	
						 	$("li[comment_id='"+data.parent_id+"']").children("ul").prepend(newli);
						}

					}else{
						//有错误信息
						alert(data.error);
					}
					
				}
			});
		}
		

	});

(2).回复评论:回复评论的a标签按钮引用了样式comment-reply,在其点击事件中进行显示或隐藏评论输入框的操作

//点击"回复"按钮显示或隐藏回复输入框
	$("body").delegate(".comment-reply","click",function(){
		if($(this).next().length>0){//判断出回复div已经存在,去除掉
		 	$(this).next().remove();
		 }else{//添加回复div
		 	$(".comment-reply").next().remove();//删除已存在的所有回复div	
		 	//添加当前回复div
		 	var parent_id = $(this).attr("comment_id");//要回复的评论id
		 	
		 	var divhtml = "";
		 	if('off'==$(this).attr("replyswitch")){//二级评论回复后三级评论不再提供回复功能,将关闭属性附加到"提交回复"按钮"
		 		divhtml = "<div class='div-reply-txt' style='width:98%;padding:3px;' replyid='2'><div><textarea class='txt-reply' replyid='2' style='width: 100%; height: 60px;'></textarea></div><div style='margin-top:5px;text-align:right;'><a class='comment-submit'  parent_id='"+parent_id+"' style='font-size:14px;text-decoration:none;background-color:#63B8FF;' href='javascript:void(0);' replyswitch='off' >提交回复</a></div></div>";
		 	}else{
		 		divhtml = "<div class='div-reply-txt' style='width:98%;padding:3px;' replyid='2'><div><textarea class='txt-reply' replyid='2' style='width: 100%; height: 60px;'></textarea></div><div style='margin-top:5px;text-align:right;'><a class='comment-submit'  parent_id='"+parent_id+"' style='font-size:14px;text-decoration:none;background-color:#63B8FF;' href='javascript:void(0);'>提交回复</a></div></div>";
		 	}		 	
			$(this).after(divhtml);
		 }
	});

三、完整代码免费下载

https://github.com/mykine/comment
  • 25
    点赞
  • 65
    收藏
    觉得还不错? 一键收藏
  • 37
    评论
实现无限分类的方法有多种,其中包括递归和非递归两种方式。下面分别介绍一下这两种方法的实现。 1. 递归实现无限分类 递归实现无限分类的方法是将分类数据作为一个树形结构来处理。具体实现步骤如下: (1)从数据库中获取所有分类数据,并按照父子关系组织为树形结构。 (2)遍历树形结构,输出每个分类的名称以及子分类的名称。 (3)对于每个子分类,重复步骤(2)。 下面是一个递归实现无限分类的示例代码: ```php function getCategoryTree($parent_id = 0, $level = 0) { $categories = getCategoryByParentId($parent_id); if (count($categories) > 0) { foreach ($categories as $category) { echo str_repeat('-', $level) . $category['name'] . '<br>'; getCategoryTree($category['id'], $level + 1); } } } function getCategoryByParentId($parent_id) { // 从数据库中获取 $parent_id 的所有子分类数据 // ... return $categories; } // 输出所有分类 getCategoryTree(); ``` 2. 非递归实现无限分类递归实现无限分类的方法是使用堆栈(或队列)来处理分类数据。具体实现步骤如下: (1)从数据库中获取所有分类数据,并按照父子关系组织为一个数组。 (2)将根分类(即 parent_id 为 0 的分类)入栈。 (3)从堆栈中取出一个分类,并输出该分类的名称。 (4)将该分类的所有子分类依次入栈。 (5)重复步骤(3)和(4),直到堆栈为空。 下面是一个非递归实现无限分类的示例代码: ```php function getCategoryTree() { $categories = getCategoryByParentId(0); $stack = array(); foreach ($categories as $category) { array_push($stack, array('category' => $category, 'level' => 0)); } while (count($stack) > 0) { $current = array_pop($stack); echo str_repeat('-', $current['level']) . $current['category']['name'] . '<br>'; $children = getCategoryByParentId($current['category']['id']); foreach ($children as $child) { array_push($stack, array('category' => $child, 'level' => $current['level'] + 1)); } } } function getCategoryByParentId($parent_id) { // 从数据库中获取 $parent_id 的所有子分类数据 // ... return $categories; } // 输出所有分类 getCategoryTree(); ``` 以上就是php实现无限分类的两种方法。从实现难度和效率上来看,递归方法更简单,但对于数据量较大的情况,可能会导致栈溢出。非递归方法虽然复杂一些,但可以处理更大的数据量。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 37
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值