【上海校区】Vue2.0+PHP 留言墙 - 黑马程序员技术交流社区

黑马程序员技术交流社区

标题:

作者:

时间:

标题:

一、简介

前台使用vue2.0进行渲染，使用vue-resource.js与php进行数据交互，布局采用bootstrap进行美化（^_^），先看下效果图：
可以进行发表留言，点赞、踩一下、删除留言消息

留言墙.gif

数据接口

php代码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}

html代码<div class="nomess text-muted" v-show="msgData.length==0"><h5>暂无留言</h5></div> <div class="messlist"> <div class="reply" v-for="(item,index) in msgData" v-cloak> <p class="replyContent">{{item.content}}</p> <p class="operation"> <span class="time">{{item.time}}</span> <span class="handle"> <a href="javascript:;" class="fa fa-thumbs-o-up" @click="top(item.id,index)">{{item.acc}}</a> <a href="javascript:;" class="text-danger fa fa-thumbs-o-down" @click="down(item.id,index)">{{item.ref}}</a> <a href="javascript:;" class="fa fa-trash" @click="nowIndex=index" data-toggle="modal" data-target="#modal"></a> </span> </p> </div> </div>二、方法实现

发送留言
add:function () {          this.$http({                url:URL,                data:{//给后台发送的数据                   act:'add',                   content:this.content                }          }).then(function (res) {                //console.log(res.data)                var json=res.data;                console.log(json);                //msgData添加数据                this.msgData.unshift({                   content:this.content,                   time:json.time,                   acc:0,                   ref:0,                   id:json.id                });                this.content='';          });       }使用$http发送数据，然后返回发送的留言和留言时间，添加到msgData渲染前台数据
2.使用声明周期的钩子函数调用该函数： getPageData（n），自动加载数据
getPageData:function (n) {          this.$http({                url:URL,                data:{                   act:'get',                   page:n                }          }).then(function (res) {                console.log(res.data);                var arr=res.data;                for(var i=0;i<arr.length;i++){                   this.msgData.push({                      content:arr.content,                      time:arr.time,                      acc:arr.acc,                      ref:arr.ref,                      id:arr.id                   });                }          });       }3.顶一下留言点击按钮，acc自增加1
top:function (id,index) {          this.$http({                url:URL,                data:{                   act:'acc',                   id:id                }          }).then(function () {                this.msgData[index].acc=this.msgData[index].acc+1;          });       }4.踩一下留言，点击按钮，ref自增加1
down:function (id,index) {          this.$http({             url:URL,                data:{                   act:'ref',                   id:id                }          }).then(function () {                this.msgData[index].ref=this.msgData[index].ref+1;          });       }5.删除当前nowIndex索引下的留言内容
del:function (nowIndex) {          //alert(this.msgData[nowIndex].id);          this.$http({                url:URL,                data:{                   act:'del',                   id:this.msgData[nowIndex].id                }          }).then(function () {                this.msgData.splice(nowIndex,1);          });       }

创建vue实例之后，调用getPageData(1),相当于window.onload
created:function () { this.getPageData(1); }三、总结留言墙的分页功能还没实现，还需要完善，下面是这个项目github的连接
GitHub地址，欢迎大家star一下。从来没有被star过。 (ᵒ̴̶̷̥́ ·̫ ᵒ̴̶̷̣̥̀ )

作者: 不二晨 时间: 2018-11-21 17:15

作者: 魔都黑马少年梦 时间: 2018-11-22 16:56

作者: 小影姐姐 时间: 2018-11-22 17:19

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2