vue点赞实现思路

数据库里面存了一个点赞表

<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))
            },

写的比较乱！