碼上歡樂
相關內容    簡體    繁體

模仿qq空間或朋友圈發布動態、評論動態、回復評論、刪除動態或評論的功能（中）

本文轉載自   查看原文   2017-05-30 21:51   2060    特效

在上一篇隨筆中已經將如何發布動態呈現了，那么現在來看一下剩下的評論動態、回復評論、刪除動態和評論功能，這幾個功能會有點繞~~~

一、思路如下：

（1）你發表動態之后，會有人評論這一條動態，當評論之后，你也會回復該評論；（此處評論要單獨一張表，回復也要單獨一張表）

（2）刪除動態：會將動態連同評論、回復全部刪除；刪除評論：只會刪除該條評論

二、在寫代碼之前，我還是想把流程說一遍：

（1）發表動態---評論---回復---再回復

（2）將上邊的流程細化，我先在紙上寫出，再上傳，碼字不能表達清楚（注意的是，我想要的功能的實現，並不是一模一樣的哈）

 

 

三、還是先將代碼分塊解釋，最后將主頁面代碼完全附上（含上一篇）

在上一篇中已經實現發布動態、彈出評論框，那么現在接着向下走：

 

分別看一下qqfriends,qqdongtai,qqpinglun，qqhuifu表,這是初始狀態:

 

 

 

先以用戶李四登錄，由數據庫qqfriends表中知道，李四的好友是zhangsan, 和zhaoliu,那么他的空間中顯示的好友動態如下：

 

 

 

 

與上一篇相比，在這一篇中，誰登錄的我用中文顯示的：

 

<?php
			session_start();
			$uid = "";
			if(empty($_SESSION["uid"]))
			{
				header("location:login.php");
				exit;
			}
			$uid = $_SESSION["uid"];
			
			require "../DB.class.php";
			$db = new DB();
			$sql = "select name from qqusers where uid='{$uid}'";
		    $name = $db->strquery($sql);
			
			echo "歡迎："."<span class='qid' yh='{$uid}'>{$name}</span>";
			?>

 

第一步：評論

 

1、評論張三的動態，點擊“確定”后，就是第二張圖了~

 

 

 

2、並將評論的內容寫進數據庫

 

				//定義空字符串，容納評論的id		
					var code=""; 
			    $(".pl").click(function(){			    	
			               code = $(this).attr("code");	//將評論的id重新賦值      			           				 		                	
			             })	
			//將評論寫進數據庫	
			$("#tjpl").click(function(){
				  var plnr = $(".pldt").val();
				  var plid = code;   //取發動態的id
					$.ajax({
					url:"pl-cl.php",
					data:{plnr:plnr,plid:plid},
					type:"POST",
					dataType:"TEXT",
					success:function(data){
						alert("評論成功！");
                     window.location.href="main.php";
					}						
					});												
			   })

　　

pl-cl.php頁面

<?php
require "../DB.class.php";
$db = new DB();
session_start();
$uid = $_SESSION["uid"];

$plnr = $_POST["plnr"];
$dtid = $_POST["plid"];

$time  = date("Y-m-d H:i:s", time());

$sql = "insert into qqpinglun values ('','{$dtid}','{$uid}','{$plnr}','{$time}')";
$db->query($sql,0);

?>

　

查看qqpinglun表中是不是多了這一條 “為什么開心呢？”：

 

　

3、讀取評論內容：

 

			<!--讀取評論內容-->	
			<div id="dqpl">
			<?php
				$sql = "select * from qqpinglun";
				$arr = $db->query($sql);
				foreach($arr as $v)
				{
					$sql = "select * from qqdongtai where dtid='{$v[1]}'";
					$arr2 = $db->query($sql);
					foreach($arr2 as $m)
					{
						//取發動態的姓名
						$sql = "select name from qqusers where uid='{$v[2]}'";
					    $name = $db->strquery($sql);

					   //若果是登錄者評論則顯示“我”
					    if($v[2]==$uid)
						{
							$name ="我";
						}
						//獲取被評論者的姓名
					    $sql = "select name from qqusers where uid=(select uid from qqdongtai where dtid='{$v[1]}')";
					    $bpl = $db->strquery($sql);
					    echo "<div class='a'><span class='xm'>{$name}</span>評論<span class='xm'>{$bpl}</span>的動態:{$m[2]}<div>
					    	<div class='b'>{$v[3]}</div>
					    <div class='c'>發表評論時間：{$v[4]}</div>
					    <div class='d'><button class='btn btn-primary hf' ids ='{$v[0]}'>回復
					    </button><span><a href='scpl-cl.php?code={$v[0]}'>刪除評論</a></span></div>";
                   	
					}
                
				}		
			?>				
			</div>

　　

 

 

第二步：回復

 

1、回復剛剛的評論：

 

 

2、將回復內容寫進數據庫

 

		    //定義空字符串，容納回復評論的id		
				var ids=""; 
			    $(".hf").click(function(){			    	
			               ids = $(this).attr("ids");	//將評論的id重新賦值      	
//			               alert((ids));	
			                $('#mM').modal('show');           				 		                	
			             })	
			//將回復評論寫進數據庫	
			$("#tjhf").click(function(){
				  var hfnr = $(".hfpl").val();
//				   alert(hfnr);
//				   alert(ids);
					$.ajax({
					url:"hf-cl.php",
					data:{hfnr:hfnr,ids:ids},
					type:"POST",
					dataType:"TEXT",
					success:function(data){
 					alert("回復成功！");
                window.location.href="main.php";
					}						
					});												
			   })

　

　hf-cl.php頁面

 

<?php
require "../DB.class.php";
$db = new DB();
session_start();
$uid = $_SESSION["uid"];

$hfnr = $_POST["hfnr"];
$cid = $_POST["ids"];

$time  = date("Y-m-d H:i:s", time());

$sql = "insert into qqhuifu values ('','{$cid}','{$uid}','{$hfnr}','{$time}')";
$db->query($sql,0);

?>

　

　查看qqhuifu表，是不是多了一行呢？

 

 

 

3、將回復內容讀出：

 

<div id="dqhf">	
					<!--取一次回復-->
				<?php
				$sql = "select *  from qqhuifu where cid in (select cid from qqpinglun)";
				$arr = $db->query($sql);

				foreach($arr as $a)
				{
					$sql = "select * from qqpinglun where cid='{$a[1]}'";
					$arr2 = $db->query($sql);

					foreach($arr2 as $n)
					{
						//取評論動態的姓名
						$sql = "select name from qqusers where uid='{$a[2]}'";
					    $name = $db->strquery($sql);

					   //若果是登錄者評論則顯示“我”
					    if($a[2]==$uid)
						{
							$name ="我";
						}
						//獲取被回復評論的姓名
					    $sql = "select name from qqusers where uid=(select uid from qqpinglun where cid='{$a[1]}')";
					    $bpl = $db->strquery($sql);
					    
					    echo "<div class='a'><span class='xm'>{$name}</span>回復<span class='xm'>{$bpl}</span>的評論:{$n[3]}<div>
					    	<div class='b'>{$a[3]}</div>
					    <div class='c'>回復時間：{$a[4]}</div>
					    <div class='d'><button class='btn btn-primary hf' ids ='{$a[0]}'>回復
					    </button><span><a href='schf-cl.php?code={$a[0]}'>刪除回復</a></span></div>";  	
					}
					}
				?>
				
			
						
			</div>

　　

回復內容已經顯示了：

 

 

第三步：刪除

 

1、刪除動態：（含評論和回復）

 

scdt-cl.php

 

<?php
$code = $_GET["code"];

require "../DB.class.php";
$db = new DB();

$sql = "delete from qqdongtai where dtid='{$code}'";
$db->query($sql,0);

$sql2 = "delete from qqpinglun where dtid='{$code}'";
$db->query($sql2,0);

$sql3 = "delete from qqhuifu where cid=(select cid from qqpinglun where dtid='{$code}')";
$db->query($sql3,0);

header("location:main.php");
?>

　　

2、刪除評論：（含回復）

 

scpl-cl.php

 

<?php
$code = $_GET["code"];

require "../DB.class.php";
$db = new DB();

$sql2 = "delete from qqpinglun where cid='{$code}'";
$db->query($sql2,0);

$sql3 = "delete from qqhuifu where cid='{$code}'";
$db->query($sql3,0);

header("location:main.php");
?>

3、刪除回復：（只自己）

schf-cl.php

<?php
$code = $_GET["code"];

require "../DB.class.php";
$db = new DB();

$sql2 = "delete from qqpinglun where cid='{$code}'";
$db->query($sql2,0);

$sql3 = "delete from qqhuifu where cid='{$code}'";
$db->query($sql3,0);

header("location:main.php");
?>

　

　關於刪除就不依次試了~~~注意包含關系就好了

 

主頁面全部代碼：

 

<!DOCTYPE html>
<html> 
	<head>
		<meta charset="UTF-8">
		<title></title>
			<!--引入bootstrap的css文件-->
		<link type="text/css" rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"  />
		<!--引入js包-->
		<script src="../jquery-3.2.0.js"></script>
		<!--引入bootstrap的js文件-->
	    <script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
		<style>
			#body{
				height: auto;
				width: 1000px;
				margin: 0px auto;
			}
			#xdt{
				height: 200px;
				width:1000px;	
				border: 1px solid cadetblue;
			  }
			  /*動態和評論div*/
			  .fdt{
			  	position: relative;	  	
			  	width: 1000px;
			  }
			   /*讀取內容div*/
	              #nr{
	             	width: 1000px;
	             	
	             }
			  /*誰發表動態樣式*/
			  .a{
			  	float: left;
			  	min-height:40px;
			  	width: 1000px;
			  	background-color: goldenrod;
			  }
			  /*姓名*/
			  .xm{
			  	font-size: 18px;
			  	color: brown;
			  	font-weight: bold;
			  }
			  /*發表動態樣式內容*/
			   .b{
			   	float: left;
			   	text-align: left;
			   	height:100px;
			    line-height: 50px;
			    width: 100%;
			    background-color: greenyellow;
			  }
			  /*發表時間與回復刪除樣式*/
			   .c{
			   	height:30px;
			   	width: 800px;
			   	float: left;
			   	font-size: 12px;
	            text-align:right;
	            background-color: gainsboro;
	             }
	             /*彈出模態框評論框*/
	            .d{
			   	height:30px;
			   	width: 200px;
			   	float: left;
			   	font-size: 15px;
	            text-align:center;
	            background-color: gainsboro;
	             }
	            
	              /*讀取評論div*/
	             #dqpl{
	             	width: 1000px;
	             }
	            #dqhf
	            {
	             	width: 1000px;
	             }
		</style>                 
	</head>
	<body>
		<div id="body">
		<?php
			session_start();
			$uid = "";
			if(empty($_SESSION["uid"]))
			{
				header("location:login.php");
				exit;
			}
			$uid = $_SESSION["uid"];
			
			require "../DB.class.php";
			$db = new DB();
			$sql = "select name from qqusers where uid='{$uid}'";
		    $name = $db->strquery($sql);
			//這種方法可以取到uid。
			echo "歡迎："."<span class='qid' yh='{$uid}'>{$name}</span>";
			?>
			
		<!--寫動態-->
		<div id="xdt">
			<p>發表動態：</p>
			<textarea cols="100px" rows="5px" name="xdt" class="xdt"></textarea>
			<input type="submit" value="發表" id="fb" />		
		</div>
		<!--動態內容結束-->
		
		<!--容納動態內容-->	
		<div class="fdt">
			<p style="color: brown;  font-family: '微軟雅黑';font-weight: bold;font-size: 20px; margin-bottom: 20px; margin-top: 20px;">朋友動態：<p>
			<!--讀取動態內容-->
			<div id="nr">
				<?php
				$date = date ("Y-m-d H:i:s");
				$sql = "select * from qqdongtai where uid='{$uid}' or uid in (select uid from qqfriends where fname =(select name from qqusers where uid='{$uid}')) order by time desc";
				//echo $sql;
				$arr = $db->query($sql);
//				var_dump($arr);
				foreach($arr as $v)
				{
					$sql = "select name from qqusers where uid='{$v[1]}'";
					$name = $db->strquery($sql);
					if($v[1]==$uid)
					{
						$name = "我";
					}
					echo "<div class='a'><span class='xm'>{$name}</span>發表動態：</div>
					<div class='b'>{$v[2]}</div>
					<div class='c'>發表動態時間:{$v[3]}</div>
					<div class='d'><button class='btn btn-primary pl' data-toggle='modal' data-target='#myModal' code ='$v[0]'>評論</button>
						<span><a href='scdt-cl.php?code={$v[0]}'>刪除動態</a></span></div>";
				}
				
				?>
			
			</div>			
					<!--讀取評論內容-->	
			<div id="dqpl">
			<?php
				$sql = "select * from qqpinglun";
				$arr = $db->query($sql);
				foreach($arr as $v)
				{
					$sql = "select * from qqdongtai where dtid='{$v[1]}'";
					$arr2 = $db->query($sql);
					foreach($arr2 as $m)
					{
						//取發動態的姓名
						$sql = "select name from qqusers where uid='{$v[2]}'";
					    $name = $db->strquery($sql);

					   //若果是登錄者評論則顯示“我”
					    if($v[2]==$uid)
						{
							$name ="我";
						}
						//獲取被評論者的姓名
					    $sql = "select name from qqusers where uid=(select uid from qqdongtai where dtid='{$v[1]}')";
					    $bpl = $db->strquery($sql);
					    echo "<div class='a'><span class='xm'>{$name}</span>評論<span class='xm'>{$bpl}</span>的動態:{$m[2]}<div>
					    	<div class='b'>{$v[3]}</div>
					    <div class='c'>發表評論時間：{$v[4]}</div>
					    <div class='d'><button class='btn btn-primary hf' ids ='{$v[0]}'>回復
					    </button><span><a href='scpl-cl.php?code={$v[0]}'>刪除評論</a></span></div>";
                   	
					}
                
				}		
			?>				
			</div>
			<!--讀取回復的內容--> 
			<div id="dqhf">	
			
				<?php
				$sql = "select *  from qqhuifu where cid in (select cid from qqpinglun)";
				$arr = $db->query($sql);
//				var_dump($arr);
				foreach($arr as $a)
				{
					$sql = "select * from qqpinglun where cid='{$a[1]}'";
					$arr2 = $db->query($sql);
//					var_dump($arr2);
					foreach($arr2 as $n)
					{
						//取評論動態的姓名
						$sql = "select name from qqusers where uid='{$a[2]}'";
					    $name = $db->strquery($sql);

					   //若果是登錄者評論則顯示“我”
					    if($a[2]==$uid)
						{
							$name ="我";
						}
						//獲取被回復評論的姓名
					    $sql = "select name from qqusers where uid=(select uid from qqpinglun where cid='{$a[1]}')";
					    $bpl = $db->strquery($sql);
					    
					    echo "<div class='a'><span class='xm'>{$name}</span>回復<span class='xm'>{$bpl}</span>的評論:{$n[3]}<div>
					    	<div class='b'>{$a[3]}</div>
					    <div class='c'>回復時間：{$a[4]}</div>
					    <div class='d'><button class='btn btn-primary hf' ids ='{$a[0]}'>回復
					    </button><span><a href='schf-cl.php?code={$a[0]}'>刪除回復</a></span></div>";  	
					}
					}
				?>
				
			
						
			</div>
			
			
			
		</div>
				
		<!-- 評論模態框（Modal） -->
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			    <div class="modal-dialog">
			        <div class="modal-content">
			            <div class="modal-header">
			                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			                <h4 class="modal-title" id="myModalLabel">評論</h4>
			            </div>
			           <textarea class="modal-body pldt" cols="80px"></textarea>
			            <div class="modal-footer">
			                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
			                <button type="button" class="btn btn-primary" id="tjpl">提交評論</button>
			            </div>
			        </div>
			    </div>
			</div>	
			<!--模態框結束-->				
		
		<!-- 回復模態框（Modal） -->
			<div class="modal fade" id="mM" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			    <div class="modal-dialog">
			        <div class="modal-content">
			            <div class="modal-header">
			                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			                <h4 class="modal-title" id="myModalLabel">回復</h4>
			            </div>
			           <textarea class="modal-body hfpl" cols="80px"></textarea>
			            <div class="modal-footer">
			                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
			                <button type="button" class="btn btn-primary" id="tjhf">提交回復</button>
			            </div>
			        </div>
			    </div>
			</div>	
			<!--模態框結束-->	
		
					
						
		</div>	
	</body>
</html>
			<script>
				
				
//ajax方法：刷新頁面時將內容讀取出來，並按發表時間讀出來
//				$.ajax({
//					url:"sx-cl.php",
//					dataType:"TEXT",
//					success:function(data){
//						var hang = data.trim().split("|");
//						var str="";
//						for(var i=0;i<hang.length;i++)
//						{
//							var lie = hang[i].split("^");            		         	
//							   str = str + "<div class='a'><span class='xm'>"+lie[1]+"</span>發表動態：</div><div class='b'><p>"+lie[2]+"</p><div class='c'>發表動態時間："+lie[3]+"</div>";							   						   
//						    str =str+"<div id='d'><button class='btn btn-primary pl' data-toggle='modal' data-target='#myModal' code ='"+lie[0]+"'>評論</button><span><a href='del.php?code="+lie[0]+"'>刪除動態</a></span></div>";
//						}
//						$("#nr").html(str);
//					//點擊“評論按鈕”實現將code值傳到模態框的“提交按鈕”
//					//為什么放在此處：因為ajax是異步的，如果不放在此處會加不上點擊事件
//			                $(".pl").click(function(){
//			                	code = $(this).attr("code");	//將評論的id重新賦值          				 		                	
//			                })					
//					}	
//				});	
//				
								
//php方法：  當發表動態時，將動態內容寫進數據庫，並刷新頁面
				$("#fb").click(function(){
				var dt= $(".xdt").val();
				var uid = $(".qid").attr("yh");
				$.ajax({
					url:"main-cl.php",
					data:{dt:dt},
					type:"POST",
					dataType:"TEXT",
					success:function(data){
                      alert("發表動態成功！");
						window.location.href="main.php";
					}	
				});
				})	
				
				//定義空字符串，容納評論的id		
					var code=""; 
			    $(".pl").click(function(){			    	
			               code = $(this).attr("code");	//將評論的id重新賦值      			           				 		                	
			             })	
			//將評論寫進數據庫	
			$("#tjpl").click(function(){
				  var plnr = $(".pldt").val();
				  var plid = code;   //取發動態的id
//			   alert(plnr);
// 		       alert(plid);	
					$.ajax({
					url:"pl-cl.php",
					data:{plnr:plnr,plid:plid},
					type:"POST",
					dataType:"TEXT",
					success:function(data){
						alert("評論成功！");
                     window.location.href="main.php";
					}						
					});												
			   })	
			   		
			  			   	
		    //定義空字符串，容納回復評論的id		
				var ids=""; 
			    $(".hf").click(function(){			    	
			               ids = $(this).attr("ids");	//將評論的id重新賦值      	
//			               alert((ids));	
			                $('#mM').modal('show');           				 		                	
			             })	
			//將回復評論寫進數據庫	
			$("#tjhf").click(function(){
				  var hfnr = $(".hfpl").val();
//				   alert(hfnr);
//				   alert(ids);
					$.ajax({
					url:"hf-cl.php",
					data:{hfnr:hfnr,ids:ids},
					type:"POST",
					dataType:"TEXT",
					success:function(data){
 					alert("回復成功！");
                window.location.href="main.php";
					}						
					});												
			   })	
			   		
			   		
			   		   															     																		
	</script>

　　

 

到此處為止，動態的發布、動態的評論、動態的回復、動態的刪除都已經寫完了，但是有個問題還還還沒解決完，也就是回復的回復問題。請看下面的簡圖：

 

也就是回復表中有一部分是回復的評論，而剩余的部分則是回復的回復（有點繞）想看的就繼續關注（下）未完待續~~~

 

 先總結一下遇到的問題：

 

（1）為什么ajax輸出的button添加不上點擊事件？

     因為ajax是異步ajax，所以要緊接其后。

 

（2）為什么取不到button的值------this

 

（3）一個php頁面中，什么時候用ajax？什么時候用php？

    在這個實例中,我用ajax將數據寫進數據庫；用php從數據庫讀取內容。（上一篇中，動態是用ajax讀取的，在這一篇中，兩種方法都有，詳情請看全部代碼）

 

（4）最后，邏輯清晰很關鍵，尤其是表與表之間的關聯。

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 模仿qq空間或朋友圈發布動態、評論動態、回復評論、刪除動態或評論的功能（上） 微信小程序--仿朋友圈Pro(內容發布、點贊、評論、回復評論) java調用個人微信API接口發朋友圈，評論和刪除朋友圈 Android仿微信朋友圈發布動態功能 微信小程序仿朋友圈功能開發（發布、點贊、評論等功能） AJAX動態加載評論 實現類似微信朋友圈功能（一 ）只供自己好友可見的點贊和評論 【刷題】面筋-測開-測試微信朋友圈的評論功能 微信朋友圈評論功能的細節考慮及實現 普通的評論回復功能
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM