数据库里面存了一个点赞表
<span v-show="showIcon"><i @click="praise(id)" style="padding-right:.1rem;" class="iconfont icon-dianzan_huaban"></i>赞{{action.praise_num}}</span>
<span v-show="!showIcon"><i @click="delpraise(id)" style="padding-right:.1rem;color:red" class="iconfont icon-dianzan_huaban"></i>赞{{action.praise_num}}</span>
点赞图标 v-show 分别绑定两个事件
praise(id){
this.$axios.post('/api/action/addPraise.html',{id:id})
.then(res => {
this.showIcon=!this.showIcon //点击切换
this.init()
})
.catch(err => console.log(err))
},
//点赞 存一条数据到点赞表 设置状态state为1
delpraise(id){
this.$axios.post('/api/action/delPraise.html',{id:id})
.then(res => {
this.showIcon=!this.showIcon
this.init()
})
.catch(err => console.log(err))
//取消点赞 删除这条数据
}
created钩子函数中 页面初始化 以及赞的状态初始化
created(){
this.init()//页面初始化
this.getState1()//赞的状态初始化 根据路由id和session存的name从点赞表里面查询是否有state
}
动态详情页实现点赞
获取路由id
this.id=this.$route.params.id
赞的状态state关联v-show的showIcon
init(){
this.id=this.$route.params.id
this.$axios.post('/api/Action/getactionById.html',{id:this.id})
.then(res=>{
this.action=res.data.data
})
.catch(err=>console.log(err))
},
getState1(){
this.id=this.$route.params.id
this.$axios.post('/api/Action/getState1.html',{id:this.id})
.then(res=>{
this.showIcon=!res.data.data.state1 })
.catch(err=>console.log(err))
},
写的比较乱!