首页
所有分类
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 相关文章推荐
JS模拟多线程
Feb 07 Javascript
动态修改DOM 里面的 id 属性的弊端分析
Sep 03 Javascript
jQuery Div中加载其他页面的实现代码
Feb 27 Javascript
JavaScript instanceof 的使用方法示例介绍
Oct 23 Javascript
JavaScript实现点击文字切换登录窗口的方法
May 11 Javascript
开启Javascript中apply、call、bind的用法之旅模式
Oct 28 Javascript
使用JavaScript实现ajax的实例代码
May 11 Javascript
详解JavaScript中Hash Map映射结构的实现
May 21 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
Sep 14 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
Sep 21 Javascript
jQuery实现多张图片上传预览（不经过后端处理）
Apr 29 jQuery
JS实现按钮颜色切换效果
Sep 05 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
ctypes(1) DBLink(1) 复读(1) 幻读(5) 经纬度(1) MVCC(4) 间隙锁(2) innoDB(3) C/C++(1) 事务并发(1)
You might like
php IP转换整形(ip2long)的详解
2013/06/06 PHP
深入PHP empty(),isset(),is_null()的实例测试详解
2013/06/06 PHP
基于php中使用excel的简单介绍
2013/08/02 PHP
PHP如何实现Unicode和Utf-8编码相互转换
2015/07/29 PHP
php生成二维码
2015/08/10 PHP
php获取文件名称和扩展名的方法
2017/02/07 PHP
php5与php7的区别点总结
2019/10/11 PHP
记Laravel调用Gin接口调用formData上传文件的实现方法
2019/12/12 PHP
经验几则 推荐
2006/09/05 Javascript
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
2011/10/13 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
2014/01/02 Javascript
jQuery实现的淡入淡出二级菜单效果代码
2015/09/15 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
2017/11/02 Javascript
vue+express 构建后台管理系统的示例代码
2018/07/19 Javascript
浅析vue中的MVVM实现原理
2019/03/04 Javascript
Vue-cli3简单使用(图文步骤)
2019/04/30 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
JS JQuery获取data-*属性值方法解析
2020/09/01 jQuery
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄：天赋异禀》
2015/09/22 DOTA
Python中splitlines()方法的使用简介
2015/05/20 Python
Python双精度浮点数运算并分行显示操作示例
2017/07/21 Python
Python中进程和线程的区别详解
2017/10/29 Python
python flask安装和命令详解
2019/04/02 Python
Python实战之制作天气查询软件
2019/05/14 Python
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
泰国汽车、火车和轮渡票预订网站：Bus Online Ticket
2017/09/09 全球购物
如果重写了对象的equals()方法，需要考虑什么
2014/11/02 面试题
大学毕业生自荐书怎么写？
2014/01/06 职场文书
中国入世承诺
2014/04/01 职场文书
揭牌仪式策划方案
2014/05/28 职场文书
教师见习报告范文
2014/11/03 职场文书
南极大冒险观后感
2015/06/05 职场文书
干货：如何写好观后感 ！
2019/05/21 职场文书
一篇文章弄懂MySQL查询语句的执行过程
2021/05/07 MySQL