首页
所有分类
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 相关文章推荐
javascript的函数
Jan 31 Javascript
在javascript中对于DOM的加强
Apr 11 Javascript
Web Inspector：关于在 Sublime Text 中调试Js的介绍
Apr 18 Javascript
jquery彩色投票进度条简单实例演示
Jul 23 Javascript
H5用户注册表单页 注册模态框!
Sep 17 Javascript
基于JavaScript实现自动更新倒计时效果
Dec 19 Javascript
微信小程序实现带刻度尺滑块功能
Mar 29 Javascript
vue.js+element-ui动态配置菜单的实例
Sep 07 Javascript
vue发送websocket请求和http post请求的实例代码
Jul 11 Javascript
layui自定义插件citySelect实现省市区三级联动选择
Jul 26 Javascript
详解Nuxt.js 实战集锦
Nov 19 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
Aug 11 Javascript
一些你可能不熟悉的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
计时器(1) limit(1) MYSQL函数(1) Mysql报错(1) turtle(1) 定时任务(2) mysql.user(1) 绘图(1) blinker(1) 信号库(1)
You might like
日本十大科幻动漫 宇宙骑士垫底，第一已成经典
2020/03/04 日漫
php实现微信发红包
2015/12/05 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
2012/03/10 Javascript
js数组操作常用方法
2014/05/08 Javascript
一个支持任意尺寸的图片上下左右滑动效果
2014/08/24 Javascript
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
js实现新年倒计时效果
2015/12/10 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
微信小程序 绘图之饼图实现
2016/10/24 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
在一个页面实现两个zTree联动的方法
2017/12/20 Javascript
axios使用拦截器统一处理所有的http请求的方法
2018/11/02 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
解决Antd Table组件表头不对齐的问题
2020/10/27 Javascript
Django日志模块logging的配置详解
2017/02/14 Python
用Python写一段用户登录的程序代码
2018/04/22 Python
Python实现识别图片内容的方法分析
2018/07/11 Python
python保留小数位的三种实现方法
2020/01/07 Python
用opencv给图片换背景色的示例代码
2020/07/08 Python
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
基于 HTML5 Canvas实现 的交互式地铁线路图
2018/03/05 HTML / CSS
俄罗斯护发和专业化妆品购物网站：Hihair
2019/09/28 全球购物
N:Philanthropy官网：美国洛杉矶基础款服装
2020/06/09 全球购物
青年创业培训欢迎词
2014/01/10 职场文书
幼儿园元旦亲子活动方案
2014/02/17 职场文书
2014年除四害工作总结
2014/12/06 职场文书
被告答辩状范文
2015/05/22 职场文书
小学运动会开幕词
2016/03/04 职场文书
导游词之临安白水涧
2019/11/05 职场文书
Django如何与Ajax交互
2021/04/29 Python
SpringBoot中获取profile的方法详解
2022/04/08 Java/Android