获取用户动态在一些论坛等社交网络中很常见,甚至可以说,就是一个微博嘛。其实这个系统很简单的,很容易就能写出来。
当然,你平时要做好准备,在你的后台数据库加一张动态表,在用户发帖、回帖等各个动作的执行时候,再加一条把用户的各个动作入库,记录到一张专门的动态表内。时刻收集好用户的动态,这样才能向用户的好友或者整个网站的用户展示好友动态。
现在举一个例子来说明,怎么编写一个获取动态系统,也就是微博。
一、基本目标
假设我们现在收集了16条用户动态在Testtable表里面,时间什么的具体数据居然有条1877年发表的动态,请忽略这些细节,毕竟这16数据都是我自己乱打的。
假设这个表各个字段代表的东西如下图,毕竟这个表我用来做了多个实验,因此字段名称为何number是代表发表的动态,也请忽略这些细节,先假设这个number字段,代表用户的动态。
然后在一个网页上,按时间排序,先显示5条动态,如果用户想看更多,则点击按钮,每次读出5条给用户看。
当然,考虑到用户体验性什么鬼,我们还要在加载动态的时候,显示“加载中……”
如果没有最新动态,则提示。同时削去“查看更多的按钮”
二、基本思想
目录结构如下,就三个页面。
三、制作过程
1、首先在model.php根据《【php】利用php的构造函数与析构函数编写Mysql数据库查询类》(点击打开链接)的思想,写好数据库查询类,把testTable这些用户动态表的动态按照时间的倒序查询出来,把查询结构存放到一个testTableList的二维数组里面。
<?php
class testtable{
private $con;
function __construct($databaseName){
$this->con=mysql_connect("localhost","root","root");
if(!$this->con){
die("连接失败!");
}
mysql_select_db($databaseName,$this->con);
mysql_query("set names utf8;");
}
public function getAll(){
$result=mysql_query("select * from testtable order by date desc;");
$testtableList=array();
for($i=0;$row=mysql_fetch_array($result);$i++){
$testtableList[$i]['id']=$row['id'];
$testtableList[$i]['username']=$row['username'];
$testtableList[$i]['number']=$row['number'];
$testtableList[$i]['date']=$row['date'];
}
return $testtableList;
}
function __destruct(){
mysql_close($this->con);
}
}
?>
2、之后我们要再Controller.php,根据Model.php查询出来的二维数据,构造一个如下图的Json给前台的View.html页面。这个Json其实就是第1-6条动态。Json说白了,就是一个特殊的字符串。在这个controller.php构造出如下格式的字符串,打印出来,在view.html用Ajax获取这串字符串就可以了。
不过打印这个字符串的时候,必须注意,在利用php构造循环的时候,不要在某些容易忽略的位置多打逗号,,否则前台的javascript一辈子都识别不了此乃Json。
在Json字符串前后用[ ]括起来,前台的javascript直接用eval就可以了。
具体代码如下:
<?php
header("Content-type: text/html; charset=utf-8");//设置编码,其实不设置也可以的。接受的javascript所在的页面设置好就可以了。
include_once("model.php");//引入数据库查询类
$dynamicPage=$_REQUEST["dynamicPage"];//从前台传递过来的动态起始位置
$testtable=new testtable("test");
$testtableList=$testtable->getAll();//把整张test数据库中的testtable表拿出来再说
$total=$dynamicPage+5;//初定查询5条动态
if($dynamicPage+5>count($testtableList)){//如果剩余的动态不足5条
$total=count($testtableList);//则把剩余的动态读出来就可以了
}
//下面根据存放查询结果的二维数组构造json字符串
$jsonStr="";
//注意,php中字符串与字符串的连接是点.,数字的相加是+,不要和C++,Java等语言混淆了
$jsonStr.="[";
for($i=$dynamicPage;$i<$total;$i++){//只构造动态起始位置到(动态起始位置+5)的共5条动态给前台的javascript
$jsonStr.="{
'id':'".$testtableList[$i]['id']."',
'username':'".$testtableList[$i]['username']."',
'number':'".$testtableList[$i]['number']."',
'date':'".$testtableList[$i]['date']."'
}";//注意最后一项的date结尾没有逗号
if($i+1!=$total){//注意,如果是数组的最后一项没有逗号
$jsonStr.=",";
}
}
$jsonStr.="];";
echo $jsonStr;//注意构造完这个字符串要打印在这个php页面上
?>
3、view.html,最后大功告成的一步也就是javascript的内容,
首先,这个页面在HTML布局中什么都没有。就一个标题,与一个设置好id的div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态列表</title>
</head>
<body>
<h1>动态列表</h1>
<div id="dynamic">
</div>
</body>
</html>
之后是《【JavaScript】网页节点的增删改查》(
点击打开链接)的难点。具体代码如下:
<script>
//动态的起始位置一开始是0
var dynamicPage=0;
//创建Ajax对象,不同浏览器有不同的创建方法,其实本函数就是一个简单的new语句而已。
function createXMLHttpRequest() {
var XMLHttpRequest1;
if (window.XMLHttpRequest) {
XMLHttpRequest1 = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
XMLHttpRequest1 = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
XMLHttpRequest1 = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return XMLHttpRequest1;
}
function getDynamic(){
//如果有“查看更多”这个按钮,那么我们在添加最新动态的时候,先删去
if(document.getElementById("moreButton")){
//删除这个按钮
var moreButton=document.getElementById("moreButton");
moreButton.parentNode.removeChild(moreButton);
}
//创建一个加载中的p节点,加到动态列表id="dynamic"的div中,设置好id,一会儿便于删除
var pLoading = document.createElement("p");
pLoading.id="pLoading";
pLoading.innerHTML="加载中……";
document.getElementById("dynamic").appendChild(pLoading);
//这句话纯属恶搞!
alert("假设网速很卡");
//开始对controller.php这个页面进行Ajax
var XMLHttpRequest1=createXMLHttpRequest();
var url="controller.php";
//通过post方法
XMLHttpRequest1.open("POST",url,true);
XMLHttpRequest1.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//给它传递dynamicPage这个参数
XMLHttpRequest1.send("dynamicPage=" + dynamicPage);
XMLHttpRequest1.onreadystatechange=function(){
if(XMLHttpRequest1.readyState==4){
if(XMLHttpRequest1.status==200){
var data=eval(XMLHttpRequest1.responseText);//把后台的字符串读成json处理
if(data==""){//如果这是空串就简单了,直接扔一个“无最新动态”的p节点给dynamic的div
var p = document.createElement("p");
p.innerHTML="没有最新动态了!";
frag.appendChild(p);
}
else{
//因controller.php扔过来的东西比较多,我们把创建的动态先放到一个文件碎片上面
//不要读一条加一条,是读一条加一条到文件碎片上面,最后把整个文件碎片加到网页上,这样就不卡了
var frag = document.createDocumentFragment();
for (var i = 0; i < data.length; i++) {//对于json数组的操作
//为json数组中的每一个json,创建一个p节点
var p = document.createElement("p");
//这个p的内容如下
p.innerHTML="id为:"+data[i].id+"的"+data[i].username+"在"+data[i].date+"的动态是:"+data[i].number;
//把这个p放到文件碎片上
frag.appendChild(p);
//再补条华丽的分割线
var hr = document.createElement("hr");
frag.appendChild(hr);
}
//最后我们在于文件碎片中补个查看更多的按钮
var moreButton = document.createElement("button");
moreButton.id="moreButton";
moreButton.innerHTML="查看更多……";
//注意在javascript设置按钮的事件是怎么设置的!
moreButton.οnclick=function(){getDynamic()};
frag.appendChild(moreButton);
//动态的起始位置偏移5个位置
dynamicPage=dynamicPage+5;
}
//最后才把整个文件碎片放到div里面。这样就不会读一条,网页节点被操作一次了。
document.getElementById("dynamic").appendChild(frag);
//当然,我们要移除那个“加载中...”的p节点
pLoading=document.getElementById("pLoading")
pLoading.parentNode.removeChild(pLoading);
}
else{
alert("网络连接中断!");
}
}
};
}
//一开始,先读5条动态给用户看看吧!
getDynamic();
</script>
Javascript删除节点是有技巧的,先用var xx=document.getElementById("xx")找到自己,然后找自己的家长来删除自己xx.parentNode.removeChild(xx);
在Javascript如果利用var xx=document.createElement("button");创建一个按钮,那么这个按钮的onclick事件必须写成xx.οnclick=function(){什么什么函数()},如果只写xx.οnclick=什么什么函数()则无法把这个事件绑定在这个按钮的!