一、简介

前台使用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过。 (ᵒ̴̶̷̥́ ·̫ ᵒ̴̶̷̣̥̀ )