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

2019-11-19 11:59:14

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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= <<< ENDCREATE 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_ciEND;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程序设计有所帮助。

上一篇：基于vue通用表单解决方案的思考与分析

下一篇：一些你可能不熟悉的JS知识点总结