首页
所有分类
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 应用代码 方便的排序功能
Feb 06 Javascript
js禁止document element对象选中文本实现代码
Mar 21 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
javascript中parseInt()函数的定义和用法分析
Dec 20 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
Oct 23 Javascript
实例讲解jquery与json的结合
Jan 07 Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 Javascript
微信小程序开发(一) 微信登录流程详解
Jan 11 Javascript
Redux 和 Mobx的选择问题：让你不再困惑！
Sep 18 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
Aug 25 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 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
三子棋(2) name_scope (1) data(4) 字符集(1) variable_scope(1) 信号库(1) turtle(1) blinker(1) 神经网络(7) Keras(3)
You might like
php分页函数完整实例代码
2014/09/22 PHP
php找出指定范围内回文数且平方根也是回文数的方法
2015/03/23 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
Prototype使用指南之enumerable.js
2007/01/10 Javascript
javascript实现多级联动下拉菜单的方法
2015/02/06 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
原生JS和jQuery版实现文件上传功能
2016/04/18 Javascript
最全的Javascript编码规范(推荐)
2016/06/22 Javascript
JavaScript学习笔记整理_setTimeout的应用
2016/09/19 Javascript
JS图片压缩（pc端和移动端都适用）
2017/01/12 Javascript
ES6中Proxy代理用法实例浅析
2017/04/06 Javascript
js每隔两秒输出数组中的一项(实例)
2017/05/28 Javascript
vue初尝试--项目结构(推荐)
2018/01/30 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
2018/11/28 Javascript
基于Vue实现微前端的示例代码
2020/04/24 Javascript
React中Ref 的使用方法详解
2020/04/28 Javascript
[43:57]Liquid vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
简单上手Python中装饰器的使用
2015/07/12 Python
Python 对输入的数字进行排序的方法
2018/06/23 Python
对Python生成汉字字库文字,以及转换为文字图片的实例详解
2019/01/29 Python
Python中三元表达式的几种写法介绍
2019/03/04 Python
18个Python脚本可加速你的编码速度(提示和技巧)
2019/10/17 Python
Python-openCV开运算实例
2020/07/05 Python
Django限制API访问频率常用方法解析
2020/10/12 Python
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
公司同意接收函
2014/01/13 职场文书
财务科科长岗位职责
2014/03/10 职场文书
公司应聘自荐书
2014/06/14 职场文书
幼儿园感谢信
2015/01/21 职场文书
故宫的导游词
2015/01/31 职场文书
蓬莱阁导游词
2015/02/04 职场文书
2015年大学组织委员个人工作总结
2015/10/23 职场文书
Django展示可视化图表的多种方式
2021/04/08 Python
Python初识逻辑与if语句及用法大全
2021/08/07 Python
基于Python实现射击小游戏的制作
2022/04/06 Python