在现如今大部分的网站与社交app中我们都能看到有点赞的功能,比如常见的微博、B站、网易云音乐,点赞是对创作者的一种可量化的肯定,是一种激励创作者源源不断产出内容的动力。设计点赞功能有非常多种方式,对于数据库存在用户表的网站,可以通过多对多关系设计一个点赞表,或者在用户表或内容表中添加一个字段用于储存点赞过的内容或点赞过的用户,而对于数据库无用户表的网站,也是可以通过在表中字段添加点赞过的ip来记录点赞人数并保证唯一性,不过对于无用户的网站还有一种更方便的方式就是使用cookies来实现。

思路一览

一个用户进入到内容页面点击点赞按钮的过程中程序需要做什么事情?

点赞=>

访问带内容id的点赞路由=>

获取用户cookies中点赞id合集值=>

若用户cookies点赞id合集值中无当前id则根据id在内容表中获取对应数据并在点赞数字段加一=>

在获取的原cookies后面添加当前内容id=>

返回给客户端当前内容的点赞数与新cookies=>

前端通过ajax更新页面数据

而如果当前内容id已存在于用户cookies的点赞id合集值中则不更新cookies并返回当前内容的点赞数,看文字描述可能有点难理解,我们直接来看一下如何实现吧!

实现过程

在实现之前先假定一个简单的内容表post表,有如下字段,其中thumbsup字段值为整数

id title content timestamp views thumbsup

在客户端cookies中储存点赞id合集值是这种形式的1,15,21,35,用字符串形式表现,多个id用英文逗号分隔,键名为thumbs_up

前端内容模板中点赞部分代码

<button type='button' id='thumbupbtn' class='btn btn-danger'>
    <i class="fa fa-thumbs-o-up" style='font-size:3rem;'></i>
    (<span id='thumbsupnum'>{{ post.thumbsup }}</span>)
</button>

模板中js部分

function thumbup(){
    $.get("/thumbup/{{ post.id }}",function (data){
        $('#thumbsupnum').text(data);
    });
};

$('#thumbupbtn').click(function(){
    thumbup();
});

flask后端部分代码

@route('/thumbup/<int:id>',methods=['GET'])
def thumbup(id):
    post=Post.query.get_or_404(id)
    thumbs_up_str=request.cookies.get('thumbs_up')
    thumbs_up=thumbs_up_str.split(',') if thumbs_up_str else []

    if post and not str(id) in thumbs_up:
        post.thumbsup=post.thumbsup+1
        db.session.add(post)
        db.session.commit()
        response=make_response(str(post.thumbsup))
        thumbs_up.append(str(id))
        response.set_cookie('thumbs_up',','.join(thumbs_up))
        return response
    return str(post.thumbsup)

在模板中双大括号中的内容在返回客户端之前已经渲染完,包括js中的内容。

测试一下

打开内容页面显示点赞按钮与点赞数

flask使用cookies实现网站简单的点赞功能

在点击一次后返回新的点赞数与新cookies,因为当前内容id存在于新cookies中所以再次点击将不会改变点赞数字

flask使用cookies实现网站简单的点赞功能

其他

以上就是关于flask通过cookies实现简单的点赞功能的教程了,不过对于用cookies实现的点赞功能有一个问题,就是当客户端的cookies被清除之后,用户又可以重新点赞,如用户打开无痕模式重载页面就可以无限的点赞,所以是否选择用cookies来实现点赞功能还是需要看自身的需求与网站的规划,实现的方法有许多种,这只是其中一种。如果您有什么问题或者建议欢迎在下面留言,我看到了会及时回复的。

评论

Felix 管理员

小伙伴们也可以在js上套一层检查cookies的代码,当发现当前页id包含在cookies中就不发起请求,减轻服务器压力。

回复

  • 最新随笔

  • 对我来说,写东西很好的一点是,自己写的东西,后面基本都会再看,一遍或者很多遍。这样就可以很好地发现自己之前的漏洞,并看看现在有什么变化。
  • 前段时间应该是百度更新了页面结构,那个黑帽泛目录网站我也没有去更新代码,就导致了文章页没有相关推荐,没想到这时候谷歌开始收录了,而且效果还不错。其实之前在谷歌一直不收录的时候就有怀疑过没有尽头的相关推荐很可能是导致不收录的原因,不过也一直没有去管它,而这次误打误撞的收录也恰恰证实了这个想法。(btw,其实这个网站从出现固定链接开始叫泛目录应该不太准确)
  • 最近吉他谱网站iloveguitar上线了,这几天在填充一些内容花了一些时间,这个网站也是使用flask作为后端框架的,前端UI框架使用的是bootstrap4,喜欢吉他的小伙伴欢迎来这里逛一逛哟,有什么建议欢迎在留言板提一下哟。
  • 那个泛目录网站发布了几个星期了,百度没怎么来爬,收了一个首页,谷歌直接就不收了,倒是一个查外链的网站天天来爬(笑哭),还有建议一点就是泛目录还是用在有建站历史的域名比较好(因为已经过了审核期),新域名就尽量不要用了。
  • 刚刚又发了一篇,最近文章百度都不太收录,orz,哈哈
  • 之前那个用python做的静态资源服务器,我又发现了一大用处,现在我都用来在局域网里的不同电脑之间传输文件,真的好用哈哈
  • 今天交换到了博客有史以来第一条友情链接
  • 刚刚更新了一下博客,修复了一些bug,添加了一个项目页