vue+php实现的微博留言功能示例
本文实例讲述了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程序设计有所帮助。
赞 (0)
相关推荐
-
Vue中的数据监听和数据交互案例解析
现在我们来看一下vue中的数据监听事件$watch, js代码: new Vue({ el:"#div", data:{ arr:[1,2,3] } }).$watch("arr",function () { alert("数据改变了") }) html代码: <div id="div"> <input type="button" value="改变" @click=&
-
Vue 项目中遇到的跨域问题及解决方法(后台php)
问题描述 前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The valu
-
详解vue-Resource（与后端数据交互）
单来说,vue-resource就像jQuery里的$.ajax,用来和后端交互数据的.可以放在created或者ready里面运行来获取或者更新数据... vue-resource文档:https://github.com/vuejs/vue-resource/blob/master/docs/http.md 结合vue-router data(){ return{ toplist:[], alllist:[] } }, //vue-router route:{ data({to}){ //并
-
详解vue前后台数据交互vue-resource文档
这两天学习了vue-resource插件个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. Vue可以构建一个完全不依赖后端服务的应用,同时也可以与服务端进行数据交互来同步界面的动态更新. Vue通过插件的形式实现了基于AJAX,JSPNP等技术的服务端通信. vue-resource是一个通过XMLHttpRequrest或JSONP技术实现异步加载服务端数据的Vue插件 提供了一般的 HTTP请求接口和RESTful架构请求接口,并且提供了全局方法和VUe组件实例方法. 使用的版本是
-
vue实现留言板todolist功能
通过前面两篇文章的的学习,我们掌握了vue的基本用法. 本文,就利用这些基础知识来实现一个留言板, 老外把他称之为todolist. 第一步.使用bootstrap做好布局 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet&quo
-
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
本文实例讲述了vue.js过滤器+ajax实现事件监听及后台php数据交互.分享给大家供大家参考,具体如下: 在vue.js开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. index.html: <!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title> v
-
vue.js与后台数据交互的实例讲解
第一步:引入js库: <script src="../js/common/vue.min.js"></script> <script src="../js/common/vue-resource.js"></script> 前端代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti
-
PHP结合Vue实现滚动底部加载效果
前言 最近的一个项目手机端分页跳转不理想,自己做了一个滚动加载的一个Demo,下面话不多说了,来一起看看详细的介绍吧. 实现思路 1.获得滚动条到底部的距离 getScrollBottomHeight() 2.绑定滚动事件handleScroll() ,handleScroll()判断滚动条到底部距离是否小于设置的bottomHight,并且增加一个loading属性,防止加载时滑动时多次触发,造成多次加载 3.Ajax请求load.php,通过Page去查询获得当前页数(page+1)的内容
-
详解vue与后端数据交互(ajax)：vue-resource
本人对vue与后端数据交互不是很懂,搜索了很多关于vue与后端数据交互介绍,下面我来记录一下,有需要了解的朋友可参考.希望此文章对各位有所帮助. 必须引入一个库:vue-resource 1.获取普通文本数据 比如:a.txt: welcomet to vue!!! <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <sc
-
vuejs前后端数据交互之从后端请求数据的实例
本文将向大家介绍一种用vue-resource从后端请求数据的方法. 比如说从后端请求一张表过来, (1)首先,在data中return一个msg:[]数组来接收表的数据: (2)在方法中定义一个请求函数,比如我们这里函数名定义为showDetails: methods:{ showDetails:function(){ this.$http.get(baseURL+"api/条件").then(function(res){ this.msg = res.body; }); } } 这