Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >利用 leanCloud 实现点赞功能

利用 leanCloud 实现点赞功能

作者头像
2Broear
发布于 2024-03-12 02:18:01
发布于 2024-03-12 02:18:01
19300
代码可运行
举报
文章被收录于专栏:2B博客2B博客
运行总次数:0
代码可运行

点赞功能

社交平台的必备良药,谁谁谁什么时候给你点了个赞,点赞什么的貌似已经深入人心了。之前在 @火喵酱 的博客页面有看到说想用 leancloud 实现 do you like me 的点赞功能,之前没接触 leancloud 的 SDK 不知道咋搞,后来就不了了之,然后因为最近做了 valine 的最新评论排行,所以借这个风顺便来做个点赞功能~

点赞按钮

实践操作

和 valine 最新评论一样,首先需要引入 sdk 并初始化完成化后接入具体实现的代码即可(这个就不说了,上篇笔记里有写的)

实现思路

因为我要做的是页面点赞功能,所以可能会比 do you like me 那个稍稍多个步骤。这里再聊下思路,一般做点赞功能都是在本地点击计数之后再把数据上传到云端服务器,访问页面的时候直接根据页面拉取对应的数据填充即可。不过这里面有个读取和储存数据的操作,在 leancloud 文档里明确说到:

由于赞和转发的操作可能由多个客户端同时进行,直接在本地更新数字并保存到云端的做法极有可能导致差错。

所以 leancloud 官方提供了一个 increment 函数来实现“原子操作”跳过读取储存操作直接计数统计(已经试过了传统方法也是可行的,不过使用该函数会更简便)

具体实现

首先我们在 leancloud 控制台创建一个自定义名称的 class 数据(比如: likeCount ,然后构建对象

需要手动创建 class 类!

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   var URL = location.pathname,  //获取纯 url 防止重复筛选
        el = document.getElementById("counter"),  //写入元素
        el_ = document.getElementById("like");  //点击元素

    const likeCount = AV.Object.extend("likeCount"),  //为 AV.Object 创建子类
          likeDemo = new likeCount(),  //为该类创建一个新实例
          getCounter = new AV.Query("likeCount"),  //使用 AV.Object 的构造器
          getCount = getCounter.equalTo("url",URL);  //用于筛选指定 url 的 like 计数

完成后进行初始化获取计数判断是否有数据存在

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
getCount.find().then(results => {
    getCount.find().then(results => {
        //成功返回数据=>获取云端计数=>写入到元素 || 返回空数据=>写入到元素
        results.length>=1 ? el.innerHTML = results[0].attributes.num : el.innerHTML = 0;
    });
});

初始化获取后创建模拟点击函数

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   el_.onclick=function(){  //元素点击函数
        getCount.find().then(results => {
            if(results.length>=1){  //成功返回数据(已创建对象,更新 num 数据)
                let countNUM = results[0].attributes.num,  //获取云端计数
                    objId = results[0].id;  //获取当前页面 id
                countNUM++;  //本地计数++
                el.innerHTML = countNUM;  //写入本地计数到元素
                const increase = AV.Object.createWithoutData('likeCount', objId);  //获取当前页面 id 的云端对象
                increase.increment('num', 1);  //使用 increment 函数更新云端对象的 num 属性
                //储存(更新)对象到云端
                increase.save().then(increase => {
                    console.log("Update Successfully.");
                }, error => {
                    console.log("Update Error.")
                })
            }else{  //返回空数据(未创建对象,第一次创建num+url)
                let countNUM = 0,  //初始化本地计数
                    countURL = URL;  //获取当前 url
                countNUM++;  //本地计数++
                el.innerHTML = countNUM;  //写入本地计数到元素
                //储存 num(本地计数) 和 url(当前url) 对象到云端
                likeDemo.save({
                    'num': countNUM,
                    'url': countURL
                }).then(result => {
                    console.log("Save Successfully.");
                }, error => {
                    console.log("Save Error.")
                })
            }
        })
    }

最后在执行代码前不要忘了判断一下 el_ 元素是否存在,如果不存在表示当前页面不需要获取 likeCount 数量则不发送请求

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
   if(el_!=null && el_!=undefined){
        //..
    }

其他

以上代码写入 SDK 初始化后运行就可以正常获取不同页面的点赞次数了,数据创建后会在 leancloud 控制台显示,如下

其实拿到信息还可以通过点赞数量创建热门文章(还可以加个 pageview 实现页面访问量)具体实现方式和最新评论差不多,喜欢就做(页尾会拓展一个集成统计页面访问)

一个 num 一个 url

问题修复

期间遇到不少问题,在文档里又没说明白,让人属实脑壳疼,400/400各种报错,在这也做个简单的记录以免再踩坑。

获取不到 class 404

出现这个问题的根本在构造对象完成后,没有进行数据储存操作,导致 SDK 没有自动创建我们指定的 class。解决方案很简单,在控制台手动创建一个同名称的 class 或在完成构造对象后发起一个储存请求,该请求会自动创建 class

推荐第一种方案,因为我现在也还没解决这个问题/笑哭

获取不到 class

错误的数据写入类型 400

这个问题困扰了我好久,因为正常写入 String 类型都是可以的,当我把 num 以 Number 类型写入就会报错写入失败,找半天没找到原因最后发现原来是创建 class 之后第一次储存的类型会一直保留(比如查询到空数据,然后第一次写入 num 为 String 类型,第二次写入 Number 类型就不行了..)

解决方案也很简单,第二次写入类型要和第一次写入类型相同(当时找半天没找到原因我是直接把 num 转成 string 类型储存了233)

第二次写入 undefined 了

相关链接

LeanCloud 官方文档

拓展

分享功能已经完善的差不多了(目前点赞和海报生成暂未开放仅限测试页面目前已全站开放,欢迎测试报bug~)下次聊下如何设置博主显示和置顶评论以及利用 html2canvas+qrcodejs 生成文章分享海报~

上面有写到利用该方法统计页面访问量的情况,简单列一下

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var URI = location,
    URL = URI.pathname,
    el = document.getElementById("counter"),
    el_ = document.getElementById("like"),
    els = document.getElementById("viewer"),
    COUNTER = AV.Object.extend("COUNTER"),
    countDemo = new COUNTER(),
    getCounter = new AV.Query("COUNTER"),
    urlCheck = getCounter.equalTo("url",URL);
//定义数据储存函数
const saveAttr=(like,view)=>{
    let countURL = URL;
    countDemo.save({
        'like': like,
        'view': view,
        'url': countURL
    }).then(result => {
        console.log("Save Successfully.")
    }, error => {
        console.log("Save Error.")
    })
},
//定义数据更新函数
updateAttr=(id,attr,num)=>{
    let increase = AV.Object.createWithoutData('COUNTER', id);
    increase.increment(attr, num);
    increase.save().then(increase => {
        console.log("Update Successfully.")
    }, error => {
        console.log("Update Error.")
    })
};
// 首次(刷新)访问页面执行 query.view+like autoCheck
urlCheck.find().then(results => {
    if(results.length>=1){
        //返回有数据时
        let upAttr = 'view',  //需要获取的数据属性名
            objId = results[0].id,  //云端id
            viewNum = results[0].attributes.view,  //获取云端 view 数据
            likeNum = results[0].attributes.like;  //获取云端 like 数据
        viewNum++;  //更新 view 数据
        el!=null&&likeNum!=undefined ? el.innerHTML=likeNum : el.innerHTML=0;   //满足条件写入元素
        updateAttr(objId,upAttr,1);  //调用数据更新函数发送到云端
        els!=null ? els.innerHTML = viewNum : false;  //update之后执行(即使没有找到可用计数器也能记录并发送数据)
    }else{
        //返回空数据时
        var likeNum = viewNum = 0;  //第一次访问(刷新)页面初始化 view/like
        el.innerHTML = likeNum;  //写入空数据到元素
        viewNum++;  //更新 view 数据
        els!=null ? els.innerHTML = viewNum : false;  //满足条件写入元素
        saveAttr(likeNum,viewNum)  //调用数据储存函数发送到云端
    }
});
//点击按钮执行 query.like Click
var timer;
el_.onclick=function(){
    clearTimeout(timer);
    timer = setTimeout(function(){
        urlCheck.find().then(results => {
            if(results.length>=1){
                //返回有数据时
                let upAttr = 'like',  //需要获取的数据属性名
                    objId = results[0].id,  //云端id
                    likeNum = results[0].attributes.like;  //获取云端 like 数据
                //likeNum==undefined ? likeNum=0 : likeNum;  //判断 like 数据是否未定义再执行(已废除,第一次访问页面会初始化点击次数)
                likeNum++;  //更新 like 数据
                el.innerHTML=likeNum;  //写入数据到元素
                updateAttr(objId,upAttr,1) //调用数据更新函数发送到云端
            }else{
                console.log("data init error!")
                /*/返回空数据时(已废除,首次访问页面即可完成数据初始化)
                var likeNum = 0,
                    viewNum;
                likeNum++;
                el.innerHTML = likeNum;
                saveAttr(likeNum,viewNum)  //调用数据储存函数发送到云端*/
            }
        })
    }, 1000);
}

以上代码正确配置后无报错应该如下图所示。

view数据实时更新 / like数据点击更新

以上,有问题评论区留言。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022/06/15 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
SQL 窗口函数的优化和执行
窗口函数(Window Function)是 SQL2003 标准中定义的一项新特性,并在 SQL2011、SQL2016 中又加以完善,添加了若干处拓展。窗口函数不同于我们熟悉的普通函数和聚合函数,它为每行数据进行一次计算:输入多行(一个窗口)、返回一个值。在报表等分析型查询中,窗口函数能优雅地表达某些需求,发挥不可替代的作用。
SQL数据库开发
2024/04/24
2270
SQL 窗口函数的优化和执行
SQL 窗口函数的优化和执行
窗口函数(Window Function)是 SQL2003 标准中定义的一项新特性,并在 SQL2011、SQL2016 中又加以完善,添加了若干处拓展。窗口函数不同于我们熟悉的普通函数和聚合函数,它为每行数据进行一次计算:输入多行(一个窗口)、返回一个值。在报表等分析型查询中,窗口函数能优雅地表达某些需求,发挥不可替代的作用。
大数据老哥
2021/03/08
1.9K0
SQL 窗口函数的优化和执行
MySQL8新特性窗口函数详解
本文博主给大家详细讲解一波 MySQL8 的新特性:「窗口函数」,相信大伙看完一定能有所收获。
wayn
2023/06/14
4790
MySQL8新特性窗口函数详解
大数据快速入门(10):Hive窗口函数
首先,需要认识到,窗口函数并不是只有 hive 才有的,SQL 语法标准中,就有窗口函数。
kk大数据
2020/11/11
2.6K0
MySQL 窗口函数详解:分析性查询的强大工具
MySQL 窗口函数提供了一种灵活的方式来处理 SQL 查询中的数据,它们允许你在不需要对数据进行分组的情况下对行集进行分析。窗口函数最常用于分析性操作,比如计算排名、累计和、移动平均值等。MySQL 从版本 8.0 开始支持窗口函数。以下是窗口函数的几个关键概念和常见用法:
科技新语
2024/12/17
1650
MySQL 窗口函数详解:分析性查询的强大工具
Hive SQL 大厂必考常用窗口函数及相关面试题
二、窗口函数的基本用法 1.基本语法 2.设置窗口的方法 1)window_name 2)partition by 子句 3) order by子句 4)rows 指定窗口大小 3.开窗函数中加order by 和 不加 order by的区别
王知无-import_bigdata
2022/11/11
3.8K0
Hive SQL 大厂必考常用窗口函数及相关面试题
Hive补充之窗口函数
窗口函数 1、hive窗口函数语法 hive中的窗口函数over() ,over()窗口函数的语法结构
Maynor
2021/04/09
1.1K0
不要到处翻了 | Hive开窗函数总结与实践
平常我们使用 hive或者 mysql时,一般聚合函数用的比较多。但对于某些偏分析的需求,group by可能很费力,子查询很多,这个时候就需要使用窗口分析函数了~ 注:hive、oracle提供开窗函数,mysql8之前版本不提供,但Oracle发布的 MySQL 8.0版本支持窗口函数(over)和公用表表达式(with)这两个重要的功能!
大数据真好玩
2021/01/26
6.3K0
spark、hive中窗口函数实现原理复盘
这篇文章从一次业务中遇到的问题出发,深入聊了聊hsql中窗口函数的数据流转原理,在文章最后针对这个问题给出解决方案。
数据仓库践行者
2020/04/20
3.2K0
mysql中分组排序_oracle先分组后排序
​ 窗口函数(window functions),也被称为 “开窗函数”,也叫OLAP函数(Online Anallytical Processing,联机分析处理),可对数据库数据进行实时分析处理。它是数据库的标准功能之一,主流的数据库比如Oracle,PostgreSQL都支持窗口函数功能,MySQL 直到 8.0 版本才开始支持窗口函数。
全栈程序员站长
2022/11/10
8K0
SQL窗口函数概述
在应用WHERE、GROUP by和HAVING子句之后,窗口函数对SELECT查询选择的行进行操作。
用户7741497
2022/03/27
2.5K1
Hive 窗口函数最全讲解和实战
在深入研究Over字句之前,一定要注意:在SQL处理中,窗口函数都是最后一步执行,而且仅位于Order by子句之前 可以想象成sql的输出结果,就是窗口函数输入的结果。
kk大数据
2019/12/18
2.1K0
大数据学习之数据仓库代码题总结上
请编写 SQL 查询,计算从注册当天开始的每个用户在注册后第1天、第3天、第7天的学习留存率。留存率的计算方式是在注册后的特定天数内继续学习的用户数除以当天注册的用户总数。结果应包含日期、留存天数和留存率。
bxia的厨房_公众号
2024/03/05
2551
大数据学习之数据仓库代码题总结上
SparkSql窗口函数源码分析(第一部分)
WindowExpression :描述该expression是一个windowExpression,继承BinaryLike,是一个二元树。
数据仓库践行者
2022/11/25
1.2K0
SparkSql窗口函数源码分析(第一部分)
深入MySQL窗口函数:原理和应用
窗口函数(Window Functions)是SQL标准中的一个高级特性,它允许用户在不改变查询结果集行数的情况下,对每一行执行聚合计算或其他复杂的计算。这些计算是基于当前行与结果集中其他行之间的关系进行的。窗口函数特别适用于需要执行跨多行的计算,同时又想保持原始查询结果集的行数不变的场景。
公众号:码到三十五
2024/03/19
2.9K0
深入MySQL窗口函数:原理和应用
MySQL窗口函数,你最熟悉的陌生人~
  这三个点虽然平时用得少,但在面试中却常被问到。值得一提的是,很多面试官对问题竟然也是一知半解。。
陈哈哈
2021/12/31
1.1K0
MySQL窗口函数,你最熟悉的陌生人~
MySQL8新特性窗口函数详解
MySQL8 窗口函数是一种特殊的函数,它可以在一组查询行上执行类似于聚合的操作,但是不会将查询行折叠为单个输出行,而是为每个查询行生成一个结果。窗口函数可以用来处理复杂的报表统计分析场景,例如计算移动平均值、累计和、排名等。其中博主认为它展现的主要威力在于「它能够让我们在不修改原有语句输出结果的基础上,直接添加新的聚合字段」。
wayn
2023/08/28
3040
MySQL8新特性窗口函数详解
Hive常用窗口函数实战
本文介绍了Hive常见的序列函数,排名函数和窗口函数。结合业务场景展示了Hive分析函数的使用
Eights
2020/07/13
2.8K0
MySQL窗口函数怎么用
在 MySQL 8.x 版本中,MySQL 提供了窗口函数,窗口函数是一种在查询结果的特定窗口范围内进行计算的函数。
科技新语
2024/05/17
3050
SQL干货 | 窗口函数的使用
Mysql从8.0版本开始,也和Sql Server、Oracle一样支持在查询中使用窗口函数,本文将根据官方文档,通过实例介绍窗口函数并举例分组排序函数的使用。
Python数据科学
2019/12/31
1.5K0
SQL干货 | 窗口函数的使用
相关推荐
SQL 窗口函数的优化和执行
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验