vue03案例-weibo
weibo.html
<link href="style/weibo.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="axios.js"></script>
<body>
<div class="znsArea">
<!--留言-->
<div class="takeComment">
<textarea name="textarea" class="takeTextField" v-model="ipt"></textarea>
<div class="takeSbmComment">
<input type="button" class="inputs" value="" @click="add" />
<span>(可按 Enter 回复)</span>
</div>
</div>
<!--已留-->
<div class="commentOn">
<div class="noContent" v-show="list.length == 0">暂无留言</div>
<div class="messList">
<div
class="reply"
v-for="(item,index) of list"
:key="item.id"
>
<p class="replyContent">{{item.content}}</p>
<p class="operation">
<span class="replyTime">{{item.time | date}}</span>
<span class="handle">
<a href="javascript:;" class="top" @click="acc(index,item.id)">{{item.acc}}</a>
<a href="javascript:;" class="down_icon" @click="ref(index,item.id)">{{item.ref}}</a>
<a href="javascript:;" class="cut" @click="del(index,item.id)">删除</a>
</span>
</p>
</div>
</div>
<div class="page">
<!-- <a href="javascript:;" class="active">1</a> -->
<a
v-for="n of pageCount"
href="javascript:;"
:class=" n===now ? 'active' : '' "
@click="get(n)"
>{{n}}</a>
</div>
</div>
</div>
<script>
let vm=new Vue({
el:'.znsArea',
data:{
ipt:'',
list:[
// {id: 1, content: "内容", time: '时间戳', acc: 1, ref: '踩次数'}
],
now: 1,
pageCount: 0
},
filters:{//时间过滤
date(data){
var d = new Date();
var year = d.getFullYear();
var month = d.getMonth()+1;
var date = d.getDate();
var hour = d.getHours();
var min = d.getMinutes();
var sec = d.getSeconds();
var fillzero = (n) => n < 10 ? '0' + n : '' + n;
return `${year}年${fillzero(month)}月${fillzero(date)}日 ${fillzero(hour)}:${fillzero(min)}:${fillzero(sec)}`
}
},
methods:{
add(){
//weibo.php?act=add&content=xxx 添加一条
//{error:0, id: 新添加内容的ID, time: 添加时间}
axios({
url:'http://localhost/2019-6-19/weibo5.php',
// url:'./weibo.php',
params:{act:'add',content:this.ipt}
}).then((res)=>{
this.get(1)
this.getPage()
this.ipt='';
// console.log(1,res)
// this.list.push({
// id:res.data.id,
// time:res.data.time,
// acc:0,ref:0
// })
})
},
acc(index,id){
//weibo.php?act=acc&id=12 顶某一条数据
//返回：{error:0}
axios({
url:'http://localhost/2019-6-19/weibo5.php',
params:{act:'acc',id:id}
}).then((res)=>{
if(res.data.error===0){
this.list[index].acc++
// this.getPage()
}else{
alert('acc失败')
}
})
},
ref(index,id){
axios({
url:'http://localhost/2019-6-19/weibo5.php',
params:{act:'ref',id:id}
}).then((res)=>{
if(res.data.error===0){
this.list[index].ref++
// this.getPage()
}else{
alert('ref')
}
})
},
del(index,id){
axios({
url:'http://localhost/2019-6-19/weibo5.php',
params:{act:'del',id:id}
}).then((res)=>{
if(res.data.error===0){
this.list.splice(index,1)
// this.getPage()
}else{
alert('del')
}
})
},
get(n){
this.now = n,
axios({
// weibo.php?act=get&page=1 获取一页数据
// 返回：[{id: ID, content: "内容", time: 时间戳, acc: 顶次数, ref: 踩次数}, {...}, ...]
url:'http://localhost/2019-6-19/weibo5.php',
params:{act:'get',page:n}
}).then((res)=>{
this.list=res.data
console.log(res.data)
})
},
getPage(){
//weibo.php?act=get_page_count 获取页数
//返回：{count:页数}
axios({
url:'http://localhost/2019-6-19/weibo5.php',
params:{act:'get_page_count'}
}).then((res)=>{
// console.log(res.data.count)
this.pageCount = res.data.count;
})
}
}
})
vm.get(1);//获取数据
vm.getPage();//获取页数
</script>
</body>
axios代码和html所需照片全部放在印象笔记内，此时需要读取数据库的数据来初始化页面，所以PHP文件内的接口信息需要改（很重要）
