vue+php实现的微博留言功能示例
(编辑：jimmy 日期: 2024/11/29 浏览：3 次 )
本文实例讲述了vue+php实现的微博留言功能。分享给大家供大家参考，具体如下：
html部分：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>微博留言</title> <link href="style/weibo.css" rel="external nofollow" rel="stylesheet" type="text/css" /> <script src="/UploadFiles/2021-04-02/vue.min.js">php部分：
<"内容", time: 时间戳, acc: 顶次数, ref: 踩次数}, {...}, ...] weibo.php"set names 'utf8'"); mysql_query('CREATE DATABASE zns_ajax'); mysql_select_db('zns_ajax'); $sql= <<< END CREATE TABLE `zns_ajax`.`weibo` ( `ID` INT NOT NULL AUTO_INCREMENT PRIMARY KEY , `content` TEXT NOT NULL , `time` INT NOT NULL , `acc` INT NOT NULL , `ref` INT NOT NULL ) CHARACTER SET utf8 COLLATE utf8_general_ci END; mysql_query($sql); //正式开始 //header('Content-type:zns/json'); $act=$_GET['act']; $PAGE_SIZE=6; switch($act) { case 'add': $content=urldecode($_GET['content']); $time=time(); $content=str_replace("\n", "", $content); $sql="INSERT INTO weibo (ID, content, time, acc, ref) VALUES(0, '{$content}', {$time}, 0, 0)"; mysql_query($sql); $res=mysql_query('SELECT LAST_INSERT_ID()'); $row=mysql_fetch_array($res); $id=(int)$row[0]; echo "{\"error\": 0, \"id\": {$id}, \"time\": {$time}}"; break; case 'get_page_count': $sql="SELECT COUNT(*)/{$PAGE_SIZE}+1 FROM weibo"; mysql_query($sql); $res=mysql_query($sql); $row=mysql_fetch_array($res); $count=(int)$row[0]; echo "{\"count\": {$count}}"; break; case 'get': $page=(int)$_GET['page']; if($page<1)$page=1; $s=($page-1)*$PAGE_SIZE; $sql="SELECT ID, content, time, acc, ref FROM weibo ORDER BY time DESC LIMIT {$s}, {$PAGE_SIZE}"; $res=mysql_query($sql); $aResult=array(); while($row=mysql_fetch_array($res)) { $arr=array(); array_push($arr, '"id":'.$row[0]); array_push($arr, '"content":"'.$row[1].'"'); array_push($arr, '"time":'.$row[2]); array_push($arr, '"acc":'.$row[3]); array_push($arr, '"ref":'.$row[4]); array_push($aResult, implode(',', $arr)); } if(count($aResult)>0) { echo '[{'.implode('},{', $aResult).'}]'; } else { echo '[]'; } break; case 'acc': $id=(int)$_GET['id']; $res=mysql_query("SELECT acc FROM weibo WHERE ID={$id}"); $row=mysql_fetch_array($res); $old=(int)$row[0]+1; $sql="UPDATE weibo SET acc={$old} WHERE ID={$id}"; mysql_query($sql); echo '{"error":0}'; break; case 'ref': $id=(int)$_GET['id']; $res=mysql_query("SELECT ref FROM weibo WHERE ID={$id}"); $row=mysql_fetch_array($res); $old=(int)$row[0]+1; $sql="UPDATE weibo SET ref={$old} WHERE ID={$id}"; mysql_query($sql); echo '{"error":0}'; break; case 'del': $id=(int)$_GET['id']; $sql="DELETE FROM weibo WHERE ID={$id}"; //echo $sql;exit; mysql_query($sql); echo '{"error":0}'; break; } "htmlcode">@charset "utf-8";body,ul,ol,li,dl,dt,dd,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0} body{font-size:12px;font-family:"Microsoft YaHei"} ul,ol{list-style-type:none} select,input,img,select{vertical-align:middle} a{text-decoration:underline;color:#313030} a{blr:expression(this.onFocus=this.blur())} input,textarea{outline:0;resize:none} a{outline:0} .znsArea{width:755px;overflow:hidden;margin:0 auto;font-family:"Microsoft YaHei"} .commentOn{width:753px;display:block;overflow:hidden;border:#a5bcff solid 1px;background:#f3f8fd;margin-top:25px;font-family:Verdana} .reply{overflow:hidden;padding:10px 20px;background:#FFF;border-top:#e9e9e9 solid 1px;border-bottom:#e9e9e9 solid 1px} .userInfo{display:block;overflow:hidden;height:25px;border-bottom:#bababa solid 1px} .userName{float:left;background:url(../img/userBj.png) left center no-repeat;padding-left:15px;color:#000;font-size:14px;font-weight:bold} .replyTime{float:left;color:#8b8585;line-height:30px;font-size:11px} .replyContent{line-height:24px;font-size:14px;color:#2b2b2b;font-family:"Microsoft YaHei"} .operation{clear:both;width:100%;height:30px;margin-top:8px} .handle{float:right;padding-top:6px} .handle a{text-decoration:none;float:left;margin-left:12px;background:url(../img/icons.png) 0 0 no-repeat;height:18px;line-height:18px;padding-left:20px} .handle .top_icon{background-position:0 0} .handle .down_icon{background-position:0 -17px} .handle .cut{background-position:0 -33px} .handle a:active{color:#09F} .noContent{text-align:center;display:block;background:#FFF;font:14px/2.3 "Microsoft YaHei";border-bottom:#e9e9e9 solid 1px;border-top:#e9e9e9 solid 1px;color:#999} .takeComment{width:713px;display:block;overflow:hidden;border:#a5bcff solid 1px;background:#f3f8fd;margin-top:25px;font-family:Verdana;padding:15px 20px} .takeTextField{width:701px;height:70px;border:#b1b1b1 solid 1px;clear:both;display:block;margin:10px 0 10px 0;line-height:20px;padding:5px;box-shadow:inset 0 0 5px #DDD;font-family:"Microsoft YaHei"} .takeSbmComment{display:block;overflow:hidden} .takeSbmComment span{float:right;color:#CCC;line-height:37px;padding-right:10px} .inputs{float:right;width:125px;height:37px;border:none 0;background:tranparent;background:url(../img/takeSbmComment.png) left top no-repeat;cursor:pointer;opacity:.8} .inputs:hover{opacity:1} .inputs:active{opacity:.9} .messList{overflow:hidden} .page{text-align:right;font-size:0;font-family:Verdana;padding:10px 16px} .page a{display:inline-block;height:20px;padding:0 7px;border:#CCC solid 1px;font:12px/20px Verdana;text-decoration:none;margin-left:5px;background:#FFF} .page a:hover{background:#09F;color:#FFF;border-color:#09F} .page .active{background:#CCC} .page a:active{opacity:.8}希望本文所述对大家vue.js程序设计有所帮助。
下一篇：一些你可能不熟悉的JS知识点总结