vue+php实现的微博留言功能示例

佚名 6年前 (2019-04-11) 随笔 1098人围观抢沙发百度已收录

html部分：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 <!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部分：

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。 ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 <?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部分：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 @charset "utf-8" ;body,ul,ol,li,dl,dt,dd,p,h 1 ,h 2 ,h 3 ,h 4 ,h 5 ,h 6 ,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 : 14px ; line-height : 14px ; 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 }