vue实现一个给直播点赞功能

最新推荐文章于 2023-07-02 21:41:25 发布

五花漏

最新推荐文章于 2023-07-02 21:41:25 发布

阅读量1.1k

点赞数 1

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/qq_37024887/article/details/106857564

版权

VUE 专栏收录该内容

19 篇文章 3 订阅

订阅专栏

实现直播观看中，观众的点赞功能。
功能描述：最后一次点赞三秒后，把观众点赞的数目提交到后台服务器。

话不多说，上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="dianzan">点赞</button>
        <div>点赞数：{{likeNum}}</div>
    </div>
</body>
<style>
  *{
      margin: 0;
      padding: 0;
      font-size: 30px;
  }    
  button{
      padding: 5px 10px;
  }
</style>

<script>
new Vue({
    el: '#app',
    data: function() {
        return { 
            liveId:'001',//直播间ID
            myLikeNum: 0,//记录当前观众每次点赞的数量
            likeNum: 0,//页面上显示的点赞数量
            TimeArr: [],//存放时间戳的数组
        }
    },
    methods: {
        dianzan(){//点赞  
            this.myLikeNum++;
            this.likeNum++; //点赞之后，页面要立刻有反馈
            this.TimeArr.push(new Date().valueOf());
            let that = this;
            setTimeout(function(){
                if(new Date().valueOf() - that.TimeArr[that.TimeArr.length-1] >= 3000){
                    console.log("3秒后，调用点赞服务");
                    console.log(that.myLikeNum);
                   // that.dianzanService();
                   //dianzanService方法中的路径、token都没填写，运行会出错，所以注释掉了。
                }else{
                    console.log("3秒内！不调用");
                }
            },3000);
        },
        dianzanService(){//点赞服务
            //点赞数目提交到服务器，
            //在成功的回调方法里把myLikeNum、TimeArr置空。
            //路径我用xxx代替了，
            putAction('/xxx/xxx/xxx?Id='+this.liveId+'&likeNum='+this.myLikeNum,'这里是token的值').then(res=>{        
                if(res.success && res.code == 0){
                    //调用方法更新token
                    this.myLikeNum = 0;//提交成功之后点赞数重置为0;
                    this.TimeArr = [];
                }else{//错误处理
                    this.$message({
                        message: res.message,
                        type: 'warning',
                        offset: 460
                    });
                }
            });                
        },
    }
})
</script>
</html>

页面最开始：

在这里插入图片描述

开始点赞：隔一秒，点一次，点五次：

在这里插入图片描述

控制台输出：

在这里插入图片描述

注意：

本例中调用点赞服务dianzanService成功后，并没有在页面中更新 likeNum的值。likeNum的值应该另写一个监听去获取服务器返回来的点赞数目。

五花漏

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
vue实现一个给直播点赞功能

实现直播观看中，观众的点赞功能。功能描述：最后一次点赞三秒后，把观众点赞的数目提交到后台服务器。话不多说，上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D..
复制链接

扫一扫