我們大部分人都發過動態，想必都知道發動態、回復評論、刪除動態的整個過程，那么作為初學者，要模仿這些功能有點復雜的，最起碼表的關系得弄清楚~~
先把思路理一下：
（1）用戶登錄，用session讀取當前用戶----目的是：該用戶可以發表動態，重點是顯示該用戶好友及他自己發表的動態，並且按發表時間排序。
（2）做個發表動態框實現發表動態功能
（3）顯示該用戶和他好友已經發表對的動態信息，並按發表時間由近到遠顯示
（4）再每條動態后面做一個評論按鈕和刪除按鈕；實現對動態的評論，回復和刪除（斜體部分下一篇隨筆，不然太長了）
需要用到的表：
（1）用戶表：
（2）好友表
（3）動態表
我先將代碼分塊解析，最后將主頁代碼完整附上，不然弄不清邏輯可能會有點混~~~~
第一步：實現簡單的登錄
（1）login.php頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#body{
height: 300px;
width: 300px;
margin: 200px auto;
}
</style>
</head>
<body>
<div id="body">
<form method="post" action="login-cl.php">
用戶名：<input type="text" name="uid" /><br /><br />
密碼：<input type="password" name="pwd"/><br />
<input type="submit" value="登錄" />
</form>
</div>
</body>
</html>
效果圖如下：
（2）login-cl.php頁面：（用session存取用戶名）
<?php
session_start();
$uid = $_POST["uid"];
$pwd = $_POST["pwd"];
require "../DB.class.php";
$db = new DB();
$sql = "select pwd from users where uid = '{$uid}'";
$mm = $db->strquery($sql);
var_dump($mm);
if($mm == $pwd && !empty($pwd))
{
$_SESSION["uid"] = $uid;
header("location:main.php");
}
else{
echo "用戶名或密碼錯誤！";
}
?>
第二步：登錄之后，布局發布動態框
（1）發布之前，判斷一下session是否已經取到值，如果沒有，返回到登陸頁面，如果取到值則顯示“歡迎，xx”的字體（后面的姓名均用拼音顯示，不再讀取漢字的姓名）
<?php
session_start();
$uid = "";
if(empty($_SESSION["uid"]))
{
header("location:login.php");
exit;
}
$uid = $_SESSION["uid"];
echo "歡迎："."<span class='qid' yh='{$uid}'>{$uid}</span>";
?>
（2）
<!--寫動態-->
<div id="xdt">
<p>發表動態：</p>
<textarea cols="100px" rows="5px" name="xdt" class="xdt"></textarea>
<input type="submit" value="發表" id="fb" />
</div>
實現的效果：
第三步：顯示該用戶和他好友已經發表的動態信息，並按發表時間由近到遠顯示
重點是：
（1）顯示的動態只是登陸的該用戶和他好友的，非好友不顯示--------所以在處理頁面的sql語句要注意
（2）將讀取出來的信息按照發表時間讀取，發表時間最近的越在上邊
首先：
<!--容納動態內容-->
<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"></div>
</div>
其次：
//當發表動態時，將動態內容寫進數據庫，並刷新頁面
$("#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";
}
});
})
對應的main-cl.php頁面：
<?php
session_start();
$uid = $_SESSION["uid"];
$dt = $_POST["dt"];
$date = date ("Y-m-d H:i:s");
require "../DB.class.php";
$db = new DB();
$sql = "insert into qqdongtai values ('','{$uid}','{$dt}','{$date}')";
$db->query($sql,0);
$sql = "select * from qqdongtai where uid='{$uid}' or uid in (select uid from qqfriends where fname =(select name from qqusers where uid='{$uid}'))";
//echo $sql;
$arr = $db->strquery($sql);
echo $arr;
?>
然后：
//刷新頁面時將內容讀取出來，並按發表時間讀出來
$.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'>"+lie[2]+"</p><div class='c'>發表動態時間："+lie[3]+"</div>";
str =str+"<div id='d'><button class='btn btn-primary' data-toggle='modal' data-target='#myModal'>評論</button><span><a href='del.php?code="+lie[0]+"'>刪除動態</a></span></div>";
}
$("#nr").html(str);
}
});
sx-cl.php頁面：
<?php
session_start();
$uid = $_SESSION["uid"];
$date = date ("Y-m-d H:i:s");
require "../DB.class.php";
$db = new DB();
//選取該用戶和該用戶好友的動態，並按時間順訓讀出
$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->strquery($sql);
echo $arr;
?>
由上面可知：登錄用戶是lisi，由好友表可以知道，lisi的好友只有zhangsan和zhaoliu,那么顯示的動態只能有lisi,zhangsan,和zhaoliu的。現在看一下效果及數據庫~~~~
第四步：用bootstrap添加模態框用來評論動態
（1）引入文件：
<!--引入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>
（2）用模態框做評論效果：
<!-- 評論模態框（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" 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 qdhf">確定</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
實現效果：（樣式比較簡陋）
點擊“評論”：
到這一步基本就能實現動態的發布和顯示好友動態了~~~~未完待續----評論和評論回復見下一篇隨筆~~~
主頁面全部代碼：
<!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 royalblue;
}
.fdt{
position: relative;
min-height:300px;
width: 1000px;
}
/*誰發表動態樣式*/
.a{
float: left;
min-height:40px;
width: 1000px;
border-bottom: 2px solid brown;
}
.xm{
font-size: 18px;
color: brown;
font-weight: bold;
}
/*發表動態樣式內容*/
.b{
float: left;
text-align: left;
height:100px;
line-height: 50px;
}
/*發表時間與回復刪除樣式*/
.c{
height:30px;
width: 800px;
float: left;
font-size: 12px;
text-align:right;
}
#d{
height:30px;
width: 200px;
float: left;
font-size: 15px;
text-align:center;
}
</style>
</head>
<body>
<div id="body">
<?php
session_start();
$uid = "";
if(empty($_SESSION["uid"]))
{
header("location:login.php");
exit;
}
$uid = $_SESSION["uid"];
//這種方法可以取到uid。
echo "歡迎："."<span class='qid' yh='{$uid}'>{$uid}</span>";
?>
<!--寫動態-->
<div id="xdt">
<p>發表動態：</p>
<!--<form method="post" action="main-cl.php">-->
<textarea cols="100px" rows="5px" name="xdt" class="xdt"></textarea>
<input type="submit" value="發表" id="fb" />
<!--</form>-->
</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"></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" 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 qdhf">提交評論</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</div>
</body>
</html>
<script>
//刷新頁面時將內容讀取出來，並按發表時間讀出來
$.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'>"+lie[2]+"</p><div class='c'>發表動態時間："+lie[3]+"</div>";
str =str+"<div id='d'><button class='btn btn-primary' data-toggle='modal' data-target='#myModal'>評論</button><span><a href='del.php?code="+lie[0]+"'>刪除動態</a></span></div>";
}
$("#nr").html(str);
//點擊回復
}
});
//當發表動態時，將動態內容寫進數據庫，並刷新頁面
$("#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";
}
});
})
</script>