jQuery 留言版、评论盖楼的实现-php版

admin

后台是php的，其他语言类似

当然不用jquery也可以实现，对留言、评论或者回复进行回复的功能。

1、首先是数据库的设计：

应该有最基本的字段：

id:留言编号

blogid:文章id

replyid:可以为空，如果是对留言进行回复则该replyid为要回复的留言的id

author:留言作者

content：留言内容

 

2、添加评论

就是想数据库添加一条数据这里就不详细说了。比如

id:20130316191144,

blogid:20130316191112,

replyid:0, //此留言是对文章直接评论不是对留言进行回复，所以可以为0或者为空

author:’留言作者’

content：’留言内容’

 

3、对评论进行回复：

 

比如对上面评论进行回复可以这样插入一条数据

id:20130316191145,

blogid:20130316191112,

replyid:20130316191144, //此时的replyid就为要回复的评论的id

 

author:’留言作者’

content：’留言内容’

 

4、读取评论:

 

我用php写的，后台传过来一个list，里面是该文章的所有评论

然后遍历该list：

 

<?php 
	$messages = $messageService -> getByArticleId($article_id);
	foreach ($messages as $message) {
		// 如果replyid为0表示是对文章直接进行评论，所以直接遍历输出该评论内容即可
		if($message -> getReplyId() == 0){
	
		?>

		<div class="m_item" id="<?=$message -> getId()?>">
			<div class="m_i_title">
				<a style="color:blue" id="user">
					<?=$message -> getUser()?>
				</a>
					 发表于
				<a style="color:blue" id="createTime">
					<?=$message -> getCreateTime()?>
				</a>
				<a href="#messageForm" onclick="reply('<?=$message -> getId()?>','<?=$message -> getUser()?>')" style="cursor:pointer;text-decoration:none" title="回复">[<img src="images/ico_reply.png" height="18">]</a>
				<a onclick="" style="cursor:pointer"> 引用 </a>
			</div>
			<div class="m_i_content">
				<!-- 替换回车换行、直接输出html标签 -->
				<?=str_replace($order, $replace,htmlentities($message -> getContent(),ENT_QUOTES,'UTF-8'))?>
			</div>
		</div>

		<?php
		// 如果replyid不为0表示是对评论进行回复，然后根据replyid找到对应的评论，
		// 然后添加到该评论的后面，并实现层的缩进，从而形成“盖楼的样式”
		}else{
			?>
			<script language="javascript">
				$(document).ready(function(){

					var message = "<div class='m_item' id='<?=$message -> getId()?>'>"+
						"<div class='m_i_title'>"+
							"<a style='color:blue' id='user'>"+
								"<?=$message -> getUser()?>"+													
							"</a> 发表于"+
							"<a style='color:blue' id='createTime'>"+
								"<?=$message -> getCreateTime()?>"+
							"</a>"+
							"<a href='#messageForm' onclick='reply(\"<?=$message -> getId()?>\",\"<?=$message -> getUser()?>\")' style='cursor:pointer;text-decoration:none' title='回复'>[<img src='images/ico_reply.png' height='18'>]</a>"+
							"<a onclick='' style='cursor:pointer'> 引用 </a>"+
							"</div>"+
							"<div class='m_i_content' id='m_i_content_<?=$message -> getId()?>'>"+
							"</div>"+
						"</div>";
	

					var parentDiv = $("#<?=$message -> getReplyId()?>");
					parentDiv.after(message);
					var childDiv = document.getElementById("<?=$message -> getId()?>");											
					parentDivWidth = parentDiv.width();										
					childDivWidth = (parentDivWidth - 30);											
					childDiv.style.width = childDivWidth;
					childDiv.style.marginTop = "0px";											
					
					document.getElementById("m_i_content_<?=$message -> getId()?>").innerHTML = "<?=str_replace($order, $replace, htmlentities($message -> getContent(),ENT_QUOTES,'UTF-8')) ?>";

				});									
				
			</script>
			<?php
		}
	}
?>

需要注意的地方：

我是根据发表评论的时间查询的评论，所以先输出评论时间早的数据，如果有人对该评论进行回复时间可能在此评论之前，所以在else里面才能找到该回复，并添加到相应的评论后面，只要抓住这一点实现盖楼就很简单了

 

该功能可能存在缺陷，如果有更好的想法欢迎提出，与大家学习交流。

效果图：

发表评论