、
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/postguestbook/index.phpm : indexa : regusername : 要注册的用户名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‘;//设置cookiesetCookie(‘username1‘,uesrname1.value,3600*60);}});}//用户登录var uesrname2=document.getElementById(‘uesrname2‘);var password2=document.getElementById(‘password2‘);var btnLogin=document.getElementById(‘btnLogin‘);/*get/postguestbook/index.phpm : indexa : loginusername : 要登录的用户名password : 登陆的密码返回{code : 返回的信息代码 0 = 没有错误，1 = 有错误message : 返回的信息 具体返回信息}*/btnLogin.onclick=function(){loginFn(uesrname2,password2); }//用户退出/*get/postguestbook/index.phpm : indexa : 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=‘‘;//清除cookieremoveCookie(‘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‘);//记录cidvar 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);}}//设置cookiefunction setCookie(Key,value,t){ ???var oDate=new Date(); ???oDate.setDate(oDate.getDate()+t); ???document.cookie= Key+‘=‘+value+‘;expires=‘+oDate.toGMTString();}//删除cookiefunction removeCookie(Key){ ???setCookie(Key,‘‘,-1);} //读取cookiefunction 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;}}ajax留言板
原文地址：https://www.cnblogs.com/yangxue72/p/8310228.html