vue+php实现的微博留言功能示例
程序员文章站
2022-09-08 19:22:51
本文实例讲述了vue+php实现的微博留言功能。分享给大家供大家参考,具体如下:
html部分:
本文实例讲述了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="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script> <script src="https://cdn.bootcss.com/vue-resource/1.5.0/vue-resource.js"></script> <style> [v-cloak]{ display: none; } </style> <script> vue.filter('formatdate',function (date) { var odata = new date(date*1000) return odata.getfullyear()+'-'+(odata.getmonth()+1)+'-'+odata.getdate()+" "+ odata.gethours()+":"+odata.getminutes()+":"+odata.getseconds() }); window.onload = function () { var vm = new vue({ el:'.znsarea', data:{ usermsg:'', msgdict:[], url:'weibo.php', totalpage :0, nowpage:1 }, methods:{ add:function () { if(this.usermsg=='') return this.$http.get(this.url, { params:{ 'act':'add', 'content':this.usermsg } }).then(function (res) { this.msgdict.unshift({ 'content':this.usermsg, 'time':res.data.time, 'acc':0, 'ref':0, 'id':res.data.id }) this.usermsg = '' }) }, loaddata:function (n) { this.$http.get(this.url,{ params:{ 'act':'get', 'page':n } }).then(function (res) { this.msgdict = res.data }) }, pagecount:function () { this.$http.get(this.url,{ params:{ 'act':'get_page_count' } }).then(function (res) { this.totalpage = res.data.count }) }, changepage:function (i) { this.nowpage=i this.loaddata(i) }, del:function (did) { this.$http.get(this.url,{ params:{ act:'del', id:did } }).then(function () { for(var delitem in this.msgdict){ if(this.msgdict[delitem].id==did){ this.msgdict.splice(this.msgdict[delitem],1) } } }) this.loaddata(this.nowpage) }, acc:function (mid) { this.$http.get(this.url,{ params:{ act:'acc', id:mid } }).then(function () { for(var item in this.msgdict){ if(this.msgdict[item].id==mid){ this.msgdict[item].acc +=1 } } }) }, ref:function (mid) { this.$http.get(this.url,{ params:{ act:'ref', id:mid } }).then(function () { for(var item in this.msgdict){ if(this.msgdict[item].id==mid){ this.msgdict[item].ref +=1 } } }) } }, created:function () { this.loaddata(1) this.pagecount() } }) } </script> </head> <body> <div class="znsarea"> <!--留言--> <div class="takecomment"> <textarea name="textarea" class="taketextfield" id="tijiaotext" v-model="usermsg" @keydown.enter="add"></textarea> <div class="takesbmcomment"> <input type="button" class="inputs" value="" @click="add" @keydown.enter="add"/> <span>(可按 enter 回复)</span> </div> </div> <!--已留--> <div class="commenton"> <div class="nocontent" v-show="msgdict.length==0">暂无留言</div> <div class="messlist"> <div class="reply" v-for="item in msgdict"> <p class="replycontent" v-text="item.content"></p> <p class="operation"> <span class="replytime" v-cloak>{{item.time|formatdate}}</span> <span class="handle"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="top" v-text="item.acc" @click="acc(item.id)"></a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="down_icon" v-text="item.ref" @click="ref(item.id)"></a> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="cut" @click="del(item.id)">删除</a> </span> </p> </div> </div> <div class="page"> <span v-for="i in totalpage"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="changepage(i)" v-text="i" :class="{active:i==nowpage}"></a> </span> </div> </div> </div> </body> </html>
php部分:
<?php /* ********************************************** author: blue@zhinengshe.com date: 2012-4-5 usage: weibo.php?act=add&content=xxx 添加一条 返回:{error:0, id: 新添加内容的id, time: 添加时间} weibo.php?act=get_page_count 获取页数 返回:{count:页数} weibo.php?act=get&page=1 获取一页数据 返回:[{id: id, content: "内容", time: 时间戳, acc: 顶次数, ref: 踩次数}, {...}, ...] weibo.php?act=acc&id=12 顶某一条数据 返回:{error:0} weibo.php?act=ref&id=12 踩某一条数据 返回:{error:0} 注意: 服务器所返回的时间戳都是秒(js是毫秒) ********************************************** */ //创建数据库之类的 $db=@mysql_connect('localhost:3307', 'root', '') or @mysql_connect('localhost', 'root', 'admin'); mysql_query("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; } ?>
css部分:
@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程序设计有所帮助。
上一篇: 摊煎饼牛人,拉屎牛人,撞衫牛人,老大妈牛人搞笑图片合集
下一篇: 随处可见的恶搞图片,笑里藏着笑