、
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; width: 1000px; height: 42px; border-right: 1px solid #eee; } #wrapper a.loginNav { padding: 0 10px; float: right; width: 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; width: 1000px; } #sidebar { padding: 10px; position: absolute; top: 0px; right: 0px; width: 300px; border: 1px solid #CCC; background-color: white; } #sidebar h4 { padding: 5px; height: 24px; line-height: 24px; background-color: #CCC; } #sendBox { width: 300px; } #sendBox div { margin: 5px 0; } #sendBox textarea { margin-bottom: 5px; width: 294px; height: 140px; } #list { width: 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 { width: 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; } }