、
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css.css"/>
<script src="ajax.js" type="text/javascript" charset="utf-8"></script>
<script src="dom.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="header"></div>
<div id="container">
<div id="list">
<!--<dl>
<dt><strong>zmouse</strong> 说 :</dt>
<dd>内容</dd>
<dd class="t">
<a href="javascript:;" id="support">顶(<span>0</span>)</a>
|
<a href="javascript:;" id="oppose">踩(<span>0</span>)</a>
</dd>
</dl>-->
</div>
<div id="showMore">显示更多...</div>
<div id="sidebar">
<div id="user" style="margin-bottom: 10px;display: none;">
<h4>
<span id="userinfo">leo</span>
<a href="javascript:;" id="logout">退出</a>
</h4>
</div>
<!--注册-->
<div id="reg" style="display: none;">
<h4>注册</h4>
<div>
<p>用户名：<input type="text" name="username1" id="uesrname1" /></p>
<p id="verifyUserNameMsg"></p>
<p>密码：<input type="password" name="password1" id="password1" /></p>
<p><input type="button" name="btnReg" id="btnReg" value="注册" /></p>
</div>
</div>
<!--登录-->
<div id="login">
<h4>登录</h4>
<div>
<p>用户名：<input type="text" name="username2" id="uesrname2" /></p>
<p>密码：<input type="password" name="password2" id="password2" /></p>
<p>
<input type="button" name="btnLogin" id="btnLogin" value="登录" />
<span>没有帐号，请<a href="javascript:;" id="txtReg">注册</a></span>
</p>
</div>
</div>
<!--留言编辑发表-->
<div id="sendBox">
<h4>发表留言</h4>
<div>
<textarea id="content"></textarea>
<input type="button" id="btnPost" class="btn1" value="提交" />
</div>
</div>
</div>
</div>
</body>
</html>
CSS
body,h1,h2,h3,h4,h5,h6{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: #444;
}
.hide{
display: none;
}
.show{
display: block;
}
.btn1{
padding: 0 12px;
margin-left: 0;
height: 28px;
line-height: 28px;
font-size: 14px;
border: 1px solid #D9D9D9;
background: #FAFAFA;
}
#header{
position: relative;
height: 42px;
background-color: #fff;
border-bottom: 1px solid #ccc;
}
#wrapper{
margin: 0 auto;
overflow: hidden;
1000px;
height: 42px;
border-right: 1px solid #eee;
}
#wrapper a.loginNav {
padding: 0 10px; float: right;
100px; height: 42px; border-left: 1px solid #EEE;
text-align: center; line-height: 42px;
}
#wrapper a.loginNav:hover {
color: #9A0000;
}
#container {
margin: 10px auto; position: relative;
1000px;
}
#sidebar {
padding: 10px; position: absolute; top: 0px; right: 0px;
300px; border: 1px solid #CCC; background-color: white;
}
#sidebar h4 {
padding: 5px;
height: 24px; line-height: 24px; background-color: #CCC;
}
#sendBox {
300px;
}
#sendBox div {
margin: 5px 0;
}
#sendBox textarea {
margin-bottom: 5px;
294px; height: 140px;
}
#list {
660px;
}
#list dl {
margin: 0 0 10px 0; padding: 10px;
border: 1px solid #CCC; background-color: white;
}
#list dt {
height: 30px; line-height: 30px;
}
#list dd.t {
text-align: right;
}
#list dd.t a {margin: 0 5px;}
#showMore {
640px;
margin: 0 0 10px 0; padding: 10px;
border: 1px solid #CCC; background-color: white; text-align: center;
cursor: pointer;
}
#verifyUserNameMsg{
font-size: 12px;
}
#login a{
color: blue;
}
JS
ajax.js
function ajax(method, url, data, success) {
var xhr = null;
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
if (method == 'get' && data) {
url += '?' + data;
}
xhr.open(method,url,true);
if (method == 'get') {
xhr.send();
} else {
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send(data);
}
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
success && success(xhr.responseText);
} else {
alert('出错了,Err：' + xhr.status);
}
}
}
}
dom.js
window.onload=function(){
//点击注册文字，显示注册框
var txtReg=document.getElementById('txtReg');
var reg=document.getElementById('reg');
var login=document.getElementById('login');
txtReg.onclick=function(){
login.style.display='none';
reg.style.display='block';
}
//检测用户名
/*
* http://localhost/liu/guestbook/index.php?bb=index&a=verifyUserName&username=leo
*
调用方式： get
调用的接口： guestbook/index.php
请求参数：
m:index
a:verifyUserName
username:要验证的用户名
返回
{
code:返回的信息代号
message:返回的信息
}
* */
var uesrname1=document.getElementById('uesrname1');
var verifyUserNameMsg=document.getElementById('verifyUserNameMsg');
var password1=document.getElementById('password1');
var btnReg=document.getElementById('btnReg');
//当输入框失去焦点的时候，验证用户名
uesrname1.onblur=function(){
ajax('get','guestbook/index.php','m=index&a=verifyUserName&username='+this.value,function(data){
var d=JSON.parse(data);
// console.log(d);
verifyUserNameMsg.innerHTML=d.message;
if(d.code){
verifyUserNameMsg.style.color='red';
}else{
verifyUserNameMsg.style.color='green';
}
})
}
//用户名注册
/*
get/post
guestbook/index.php
m : index
a : reg
username : 要注册的用户名
password : 注册的密码
返回
{
code : 返回的信息代码 0 = 没有错误，1 = 有错误
message : 返回的信息 具体返回信息
}
*/
var user=document.getElementById('user');
var userinfo=document.getElementById('userinfo');
var logout=document.getElementById('logout');
btnReg.onclick=function(){
ajax('post','guestbook/index.php','m=index&a=reg&username='+encodeURI(uesrname1.value)+'&password='+password1.value,function(data){
var d=JSON.parse(data);
// console.log(d);
//注册成功自动登录
if(!d.code){
loginFn(uesrname1,password1);
reg.style.display='none';
//设置cookie
setCookie('username1',uesrname1.value,3600*60);
}
});
}
//用户登录
var uesrname2=document.getElementById('uesrname2');
var password2=document.getElementById('password2');
var btnLogin=document.getElementById('btnLogin');
/*
get/post
guestbook/index.php
m : index
a : login
username : 要登录的用户名
password : 登陆的密码
返回
{
code : 返回的信息代码 0 = 没有错误，1 = 有错误
message : 返回的信息 具体返回信息
}
*/
btnLogin.onclick=function(){
loginFn(uesrname2,password2);
}
//用户退出
/*
get/post
guestbook/index.php
m : index
a : logout
返回
{
code : 返回的信息代码 0 = 没有错误，1 = 有错误
message : 返回的信息 具体返回信息
}
*/
logout.onclick=function(){
ajax('post','guestbook/index.php','m=index&a=logout',function(data){
var d=JSON.parse(data);
user.style.display='none';
login.style.display='block';
uesrname2.value='';
password2.value='';
//清除cookie
removeCookie('username1');
removeCookie('uid');
//清除名字
userinfo.innerHTML=" ";
})
}
//检测cookie，如果有的话，页面一直处于登陆状态
var uid=getCookie('uid');
var name=getCookie( ' '+'username');
var name1=getCookie('username1');
if (uid||name1){
user.style.display='block';
login.style.display='none';
if(uid){
userinfo.innerHTML=name;
}else{
userinfo.innerHTML=name1;
}
}else{
userinfo.innerHTML=" ";
}
//留言
/*
* 用户留言保存
调用方式：post
调用的接口： guestbook/index.php
请求参数：
m:index
a:send
content:留言内容
返回
{
code:返回的信息代号 0留言成功，1留言失败
data:{
cid:留言id
content:留言内容
dateline:留言的时间戳（秒）
oppose:踩
support:支持
uid:留言人的id
username:留言者的名字
}
message:返回的信息
}
* */
var content=document.getElementById('content');
var btnPost=document.getElementById('btnPost');
var list=document.getElementById('list');
var oDl=document.getElementsByTagName('dl');
//记录cid
var arr1=[];
var arr2=[];
btnPost.onclick=function(){
ajax('post','guestbook/index.php','m=index&a=send&content='+content.value,function(data){
var d=JSON.parse(data);
var data=d.data;
// console.log(d)
//提交成功生成留言列表
if(!d.code){
//清除抢沙发文字
if(!list.children[0]){
list.innerHTML='';
}
creatList(data,true);
arr1.push(data.cid);
oDl=document.getElementsByTagName('dl');
Fn();
content.value='';
}
});
}
//留言检测
/*
*
调用方式：post
调用的接口： guestbook/index.php
请求参数：
m:index
a:getList
page:当前页数
n:每页显示条数
返回
{
code:返回的信息代号
data:{
count:留言条数
list:{
cid
content
dataline
oppose
support
uid
username
}
n:每页显示条数
page:当前页数
pages:总页数
}
message:返回的信息
}
* */
var iPage=1;
var showMore=document.getElementById('showMore');
showList();
function showList(){
ajax('post','guestbook/index.php','m=index&a=getList&page='+iPage+'&n=5',function(data){
var d=JSON.parse(data);
var arr=null;
if(!d.code){
arr=d.data.list;
for (var i=0;i<arr.length;i++) {
creatList(arr[i]);
arr1.push(arr[i].cid);
arr2.push(arr[i].username);
}
oDl=document.getElementsByTagName('dl');
Fn();
//当留言的总页数大于当前页码时，更多按钮显示，否则隐藏
if(d.data.pages>d.data.page){
showMore.style.display='block';
}else{
showMore.style.display='none';
}
}else{
list.innerHTML='还没有留言，赶紧占领沙发吧....';
showMore.style.display='none';
}
});
}
//点击加载更多
showMore.onclick=function(){
iPage++;
showList();
}
//封装函数
function Fn(){
for (var i=0;i<oDl.length;i++) {
oDl[i].index=i;
oDl[i].onoff=true;
oDl[i].cid=arr1[i];
oDl[i].username=arr2[i];
var support=oDl[i].getElementsByTagName('a')[0];
var cai=oDl[i].getElementsByTagName('a')[1];
//顶
support.onclick=function(){
//获得登录的用户名
var user=userinfo.innerHTML;
var Cid=this.parentNode.parentNode.cid;
// console.log(Cid);
// console.log(user,arr2[this.parentNode.parentNode.index]);
var that=this;
//用户自己不能顶或者踩自己的
if(user==arr2[this.parentNode.parentNode.index]){
alert('不能自己顶自己哦');
}else if(user==" "){
alert('请先登录');
}else{
ajax('post','guestbook/index.php','m=index&a=doSupport&cid='+Cid,function(data){
var d=JSON.parse(data);
// console.log(d);
if(!d.code){
var num=parseInt(that.children[0].innerHTML);
num=num+1;
that.children[0].innerHTML=num;
}
})
}
}
//踩
cai.onoff=true;
cai.onclick=function(){
//获得登录的用户名
var user=userinfo.innerHTML;
var Cid=this.parentNode.parentNode.cid;
var that=this;
//用户自己不能顶或者踩自己的
if(user==arr2[this.parentNode.parentNode.index]){
alert('不能自己踩自己哦');
}else if(user==" "){
alert('请先登录');
}else{
ajax('post','guestbook/index.php','m=index&a=doOppose&cid='+Cid,function(data){
var d=JSON.parse(data);
// console.log(d);
if(!d.code){
var num=parseInt(that.children[0].innerHTML);
num=num+1;
that.children[0].innerHTML=num;
}
})
}
}
}
}
//用户登录
function loginFn(name,pass){
ajax('post','guestbook/index.php','m=index&a=login&username='+encodeURI(name.value)+'&password='+pass.value,function(data){
var d=JSON.parse(data);
alert(d.message);
//登陆成功
if (!d.code) {
userinfo.innerHTML=name.value;
user.style.display='block';
login.style.display='none';
}
})
}
//生成留言列表
function creatList(data,insert){
var odl=document.createElement('dl');
var odt=document.createElement('dt');
odt.innerHTML='<strong>'+data.username+'</strong> 说 :';
var odd1=document.createElement('dd');
odd1.innerHTML=data.content;
var odd2=document.createElement('dd');
odd2.className='t';
odd2.innerHTML='<a href="javascript:;" class="support">顶(<span>'+data.support+'</span>)</a>| <a href="javascript:;" class="oppose">踩(<span>'+data.oppose+'</span>)</a>';
odl.appendChild(odt);
odl.appendChild(odd1);
odl.appendChild(odd2);
if (insert &&list.children[0]) {
list.insertBefore(odl, list.children[0]);
} else{
// list.innerHTML='';
list.appendChild(odl);
}
}
//设置cookie
function setCookie(Key,value,t){
var oDate=new Date();
oDate.setDate(oDate.getDate()+t);
document.cookie= Key+'='+value+';expires='+oDate.toGMTString();
}
//删除cookie
function removeCookie(Key){
setCookie(Key,'',-1);
}
//读取cookie
function getCookie(key){
var arr1=document.cookie.split(';');
for (var i=0;i<arr1.length;i++) {
var arr2=arr1[i].split('=');
if(arr2[0]==key){
return decodeURI(arr2[1]);
}
}
}
}
PHP
index.php
<?php
/**
* @ index.php
* @ zmouse@vip.qq.com
*/
define('IN_APP', TRUE);
//定义APP路径
define('APP_NAME', 'miaov_guestbook');
define('APP_PATH', dirname(__FILE__) . '/');
require(APP_PATH . 'libs/common.php');
Controller/IndexController.class.php
<?php
/**
* @ controller Index.class.php
* @ zmouse@vip.qq.com
*/
defined('IN_APP') or exit('Denied Access!');
class IndexController extends Controller {
public function index() {
echo '<p>欢迎你啊</p>';
//$result = $this->db->get("select * from users", 1);
//dump($result);
}
/**
* @ interface 用户名验证
*/
public function verifyUserName() {
$username = trim(isset($_REQUEST['username']) ? $_REQUEST['username'] : '');
switch ($this->_verifyUserName($username)) {
case 0:
$this->sendByAjax(array('message'=>'恭喜你，该用户名可以注册！'));
break;
case 1:
$this->sendByAjax(array('code'=>1,'message'=>'用户名长度不能小于3个或大于16个字符！'));
break;
case 2:
$this->sendByAjax(array('code'=>2,'message'=>'对不起，该用户名已经被注册了！'));
break;
default:
break;
}
}
/**
* @ interface 用户注册
*/
public function reg() {
$username = trim(isset($_REQUEST['username']) ? $_REQUEST['username'] : '');
$password = trim(isset($_REQUEST['password']) ? $_REQUEST['password'] : '');
$avatar = trim(isset($_REQUEST['avatar']) && in_array($_REQUEST['avatar'], array(1,2,3,4,5,6,7,8,9)) ? intval($_REQUEST['avatar']) : 1);
if ($this->_verifyUserName($username) !== 0 || strlen($password)<3 || strlen($password) > 20) {
$this->sendByAjax(array('code'=>1,'message'=>'注册失败！'));
}
$password = md5($password);
if (false === $this->db->query("INSERT INTO `users` (`username`, `password`, `avatar`) VALUES ('{$username}', '{$password}', {$avatar})")) {
$this->sendByAjax(array('code'=>1,'message'=>'注册失败！'));
} else {
$this->sendByAjax(array('message'=>'注册成功！'));
}
}
/**
* @ 用户登陆
*/
public function login() {
$username = trim(isset($_REQUEST['username']) ? $_REQUEST['username'] : '');
$password = trim(isset($_REQUEST['password']) ? $_REQUEST['password'] : '');
if (isset($_COOKIE['uid'])) {
$this->sendByAjax(array('code'=>1,'message'=>'你已经登陆过了！'));
}
if ($rs = $this->db->get("SELECT * FROM `users` WHERE `username`='{$username}'")) {
if ($rs['password'] != md5($password)) {
$this->sendByAjax(array('code'=>1,'message'=>'登陆失败！'));
} else {
setcookie('uid', $rs['uid'], time() + 3600*60, '/');
setcookie('username', $rs['username'], time() + 3600*60, '/');
$this->sendByAjax(array('code'=>0,'message'=>'登陆成功！'));
}
} else {
$this->sendByAjax(array('code'=>1,'message'=>'登陆失败！'));
}
}
/**
* @ 用户退出
*/
public function logout() {
if (!isset($_COOKIE['uid'])) {
$this->sendByAjax(array('code'=>1,'message'=>'你还没有登陆！'));
} else {
setcookie('uid', 0, time() - 3600*60, '/');
$this->sendByAjax(array('code'=>0,'message'=>'退出成功！'));
}
}
/**
* 用户留言保存
*/
public function send() {
if (!isset($_COOKIE['uid'])) {
$this->sendByAjax(array('code'=>1,'message'=>'你还没有登陆！'));
} else {
$content = trim(isset($_POST['content']) ? $_POST['content'] : '');
if (empty($content)) {
$this->sendByAjax(array('code'=>1,'message'=>'留言内容不能为空！'));
}
$dateline = time();
$this->db->query("INSERT INTO `contents` (`uid`, `content`, `dateline`) VALUES ({$_COOKIE['uid']}, '{$content}', {$dateline})");
$returnData = array(
'cid' => $this->db->getInsertId(),
'uid' => $_COOKIE['uid'],
'username' => $_COOKIE['username'],
'content' => $content,
'dateline' => $dateline,
'support' => 0,
'oppose' => 0,
);
$this->sendByAjax(array('code'=>0,'message'=>'留言成功！','data'=>$returnData));
}
}
/**
* @ 顶
*/
public function doSupport() {
if (!isset($_COOKIE['uid'])) {
$this->sendByAjax(array('code'=>1,'message'=>'你还没有登陆！'));
} else {
$cid = isset($_REQUEST['cid']) ? intval($_REQUEST['cid']) : 0;
if (!$cid) $this->sendByAjax(array('code'=>1,'message'=>'无效留言cid！'));
$content = $this->db->get("SELECT cid FROM `contents` WHERE `cid`={$cid}");
if (!$content) $this->sendByAjax(array('code'=>1,'message'=>'不存在的留言cid！'));
$this->db->query("UPDATE `contents` SET `support`=support+1 WHERE `cid`={$cid}");
$this->sendByAjax(array('code'=>0,'message'=>'顶成功！'));
}
}
/**
* @ 踩
*/
public function doOppose() {
if (!isset($_COOKIE['uid'])) {
$this->sendByAjax(array('code'=>1,'message'=>'你还没有登陆！'));
} else {
$cid = isset($_REQUEST['cid']) ? intval($_REQUEST['cid']) : 0;
if (!$cid) $this->sendByAjax(array('code'=>1,'message'=>'无效留言cid！'));
$content = $this->db->get("SELECT cid FROM `contents` WHERE `cid`={$cid}");
if (!$content) $this->sendByAjax(array('code'=>1,'message'=>'不存在的留言cid！'));
$this->db->query("UPDATE `contents` SET `oppose`=oppose+1 WHERE `cid`={$cid}");
$this->sendByAjax(array('code'=>0,'message'=>'踩成功！'));
}
}
/**
* @ 获取留言列表
*/
public function getList() {
$page = isset($_REQUEST['page']) ? intval($_REQUEST['page']) : 1; //当前页数
$n = isset($_REQUEST['n']) ? intval($_REQUEST['n']) : 10; //每页显示条数
//获取总记录数
$result_count = $this->db->get("SELECT count('cid') as count FROM `contents`");
$count = $result_count['count'] ? (int) $result_count['count'] : 0;
if (!$count) {
$this->sendByAjax(array('code'=>1,'message'=>'还没有任何留言！'));
}
$pages = ceil($count / $n);
if ($page > $pages) {
$this->sendByAjax(array('code'=>2,'message'=>'没有数据了！'));
}
$start = ( $page - 1 ) * $n;
$result = $this->db->select("SELECT c.cid,c.uid,u.username,c.content,c.dateline,c.support,c.oppose FROM `contents` as c, `users` as u WHERE u.uid=c.uid ORDER BY c.cid DESC LIMIT {$start},{$n}");
$data = array(
'count' => $count,
'pages' => $pages,
'page' => $page,
'n' => $n,
'list' => $result
);
$this->sendByAjax(array('code'=>0,'message'=>'','data'=>$data));
}
/**
* @ 用户名验证
*/
private function _verifyUserName($username='') {
if (strlen($username) < 3 || strlen($username) > 16) {
return 1;
}
$rs = $this->db->get("SELECT `username` FROM `users` WHERE `username`='{$username}'");
if ($rs) return 2;
return 0;
}
}