首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onMarch 16, 2019

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

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

- Author -

bevis126

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JQuery 学习笔记01 JQuery初接触
May 06 Javascript
jQuery使用数组编写图片无缝向左滚动
Dec 11 Javascript
JS.elementGetStyle(element, style)应用示例
Sep 24 Javascript
jquery $.fn $.fx是什么意思有什么用
Nov 04 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
Jquery中map函数的用法
Jun 03 Javascript
Vue.js框架路由使用方法实例详解
Aug 25 Javascript
vue打包后显示空白正确处理方法
Nov 01 Javascript
vue中v-text / v-html使用实例代码详解
Apr 02 Javascript
JavaScript中this的全面解析及常见实例
May 14 Javascript
element的el-table中记录滚动条位置的示例代码
Nov 06 Javascript
在Vue中使用mockjs代码实例
Nov 25 Vue.js
一些你可能不熟悉的JS知识点总结
Mar 15 #Javascript
使用element-ui table expand展开行实现手风琴效果
Mar 15 #Javascript
element-ui组件table实现自定义筛选功能的示例代码
Mar 15 #Javascript
vue过滤器用法实例分析
Mar 15 #Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
Mar 15 #Javascript
详解vue移动端项目代码拆分记录
Mar 15 #Javascript
小程序自定义单页面、全局导航栏的实现代码
Mar 15 #Javascript
Launch Mode(1) NoSQL(1) 弹窗(1) 变量提升(1) json_extract(1) netty(1) 缓冲区(1) 类加载器(1) form表单(1) JOIN(1)
You might like
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
php类中的各种拦截器用法分析
2014/11/03 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
PHP队列场景以及实现代码实例详解
2021/02/26 PHP
JS input 数字验证代码
2009/07/30 Javascript
优化Jquery,提升网页加载速度
2013/11/14 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
2014/01/08 Javascript
按钮接受回车事件的三种实现方法
2014/06/06 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
js用拖动滑块来控制图片大小的方法
2015/02/27 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
2015/07/18 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
2016/10/10 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
nodejs实现OAuth2.0授权服务认证
2017/12/27 NodeJs
JS对象与json字符串相互转换实现方法示例
2018/06/14 Javascript
详解使用create-react-app添加css modules、sasss和antd
2018/07/31 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
2018/09/17 Javascript
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
python网络编程学习笔记(三)：socket网络服务器
2014/06/09 Python
用Python编写生成树状结构的文件目录的脚本的教程
2015/05/04 Python
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
python实现员工管理系统
2018/01/11 Python
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
Python3正则匹配re.split，re.finditer及re.findall函数用法详解
2018/06/11 Python
pandas 快速处理 date_time 日期格式方法
2018/11/12 Python
python属于解释型语言么
2020/06/15 Python
公司门卫管理制度
2014/02/01 职场文书
2014年话务员工作总结
2014/11/19 职场文书
2016公司中秋节寄语
2015/12/07 职场文书
如何自己动手写SQL执行引擎
2021/06/02 MySQL
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery