網(wǎng)站上的贊功能類似于統(tǒng)計功能。
創(chuàng)新互聯(lián)建站專注于企業(yè)營銷型網(wǎng)站、網(wǎng)站重做改版、寶豐網(wǎng)站定制設計、自適應品牌網(wǎng)站建設、H5技術、商城開發(fā)、集團公司官網(wǎng)建設、成都外貿(mào)網(wǎng)站建設、高端網(wǎng)站制作、響應式網(wǎng)頁設計等建站業(yè)務,價格優(yōu)惠性價比高,為寶豐等各大城市提供網(wǎng)站開發(fā)制作服務。
總體來說,在頁面上做好“贊”連接或者按鈕,點擊觸發(fā)事件;事件中可以ajax操作服務器代碼,在數(shù)據(jù)庫中執(zhí)行+1操作等,并返回結果給“贊”數(shù)值。
根據(jù)是否需要記錄用戶,分兩種情況:
不需要記錄誰贊了,只統(tǒng)計被贊次數(shù)
文章表里加一個被贊次數(shù)的字段,用戶每點一次“贊”,更新對應文章的被贊次數(shù),也就是這個字段值+1;
需要記錄用戶“贊”的記錄
新加一個“贊”的記錄表,包括點贊的用戶id,被贊的文章id,贊的時間等,用戶每點一次贊,就在這個表里新增一條數(shù)據(jù)。這個可以嚴格控制用戶贊同一篇文章的次數(shù)
請加左側
7。
2.
7.
6.
7.
1.
9,。
5.
數(shù)據(jù)庫設計
先準備兩張表,pic表保存的是圖片信息,包括圖片對應的名稱、路徑以及圖片“贊”總數(shù),pic_ip則記錄用戶點擊贊后的IP數(shù)據(jù)。
CREATE?TABLE?IF?NOT?EXISTS?`pic`?(?
`id`?int(11)?NOT?NULL?AUTO_INCREMENT,?
`pic_name`?varchar(60)?NOT?NULL,?
`pic_url`?varchar(60)?NOT?NULL,?
`love`?int(11)?NOT?NULL?DEFAULT?'0',?
PRIMARY?KEY?(`id`)?
)?ENGINE=MyISAM??DEFAULT?CHARSET=utf8;?
CREATE?TABLE?IF?NOT?EXISTS?`pic_ip`?(?
`id`?int(11)?NOT?NULL?AUTO_INCREMENT,?
`pic_id`?int(11)?NOT?NULL,?
`ip`?varchar(40)?NOT?NULL,?
PRIMARY?KEY?(`id`)?
)?ENGINE=MyISAM??DEFAULT?CHARSET=utf8
index.php
在index.php中,我們通過PHP讀取pic表中的圖片信息并展示出來,結合CSS,提升頁面展示效果。
?php?
include_once("connect.php");?
$sql?=?mysql_query("select?*?from?pic");?
while($row=mysql_fetch_array($sql)){?
$pic_id?=?$row['id'];?
$pic_name?=?$row['pic_name'];?
$pic_url?=?$row['pic_url'];?
$love?=?$row['love'];?
??
liimg?src="images/?php?echo?$pic_url;?"?alt="?php?echo?$pic_name;?"pa?href="#"??
title="贊"class="img_on"?rel="?php?echo?$pic_id;?"?php?echo?$love;?/a/p/li?
?php?}?
CSS中,我們將定義鼠標滑向和離開紅心按鈕的動態(tài)效果,并定位按鈕的位置。
.list{width:760px;?margin:20px?auto}?
.list?li{float:left;?width:360px;?height:280px;?margin:10px;?position:relative}?
.list?li?p{position:absolute;?top:0;?left:0;?width:360px;?height:24px;?line-height:24px;??
background:#000;?opacity:.8;filter:alpha(opacity=80);}?
.list?li?p?a{padding-left:30px;?height:24px;?background:url(images/heart.png)?no-repeat??
4px?-1px;color:#fff;?font-weight:bold;?font-size:14px}?
.list?li?p?a:hover{background-position:4px?-25px;text-decoration:none}
jQuery代碼
當用戶點擊自己喜歡的圖片上的紅心按鈕時,向后臺love.php發(fā)送ajax請求,請求響應成功后,更新原有的數(shù)值
$(function(){?
$("p?a").click(function(){?
var?love?=?$(this);?
var?id?=?love.attr("rel");?//對應id?
love.fadeOut(300);?//漸隱效果?
$.ajax({?
type:"POST",?
url:"love.php",?
data:"id="+id,?
cache:false,?//不緩存此頁面?
success:function(data){?
love.html(data);?
love.fadeIn(300);?//漸顯效果?
}?
});?
return?false;?
});?
});
love.php
后臺love.php接收前端的ajax請求,根據(jù)提交的圖片id值,查找IP表中是否已有該用戶ip的點擊記錄,如果有則告訴用戶已“贊過了”,反之,則進行一下操作:
1、更新圖片表中對應的圖片love字段值,將數(shù)值加1。
2、將該用戶IP信息寫入到pic_ip表中,用以防止用戶重復點擊。
3、獲取更新后的贊值,即贊該圖片的用戶總數(shù),并將該總數(shù)輸出給前端頁面。
include_once("connect.php");?//連接數(shù)據(jù)庫?
$ip?=?get_client_ip();?//獲取用戶IP?
$id?=?$_POST['id'];?
if(!isset($id)?||?empty($id))?exit;?
$ip_sql=mysql_query("select?ip?from?pic_ip?where?pic_id='$id'?and?ip='$ip'");?
$count=mysql_num_rows($ip_sql);?
if($count==0){?//如果沒有記錄?
$sql?=?"update?pic?set?love=love+1?where?id='$id'";?//更新數(shù)據(jù)?
mysql_query(?$sql);?
$sql_in?=?"insert?into?pic_ip?(pic_id,ip)?values?('$id','$ip')";?//寫入數(shù)據(jù)?
mysql_query(?$sql_in);?
$result?=?mysql_query("select?love?from?pic?where?id='$id'");?
$row?=?mysql_fetch_array($result);?
$love?=?$row['love'];?//獲取贊數(shù)值?
echo?$love;?
}else{?
echo?"贊過了..";?
}
我上傳的附件中 數(shù)據(jù)庫SQL 你可以直接建立test 數(shù)據(jù)庫UTF8編碼的,然后把SQL文件導入進去。修改一下connect.php中數(shù)據(jù)庫的連接信息即可。