Django搭建个人博客:基于 LocalStorage 的点赞功能

本文介绍如何在Django个人博客中实现基于LocalStorage的点赞功能,无需用户登录,不允许重复点赞。点赞数存储在服务器,校验数据保存在浏览器的LocalStorage中,通过Ajax实现前后端交互。详细讲解了代码实现、调试和测试过程。
摘要由CSDN通过智能技术生成

假设你的博客已经顺利部署到了线上。你写了很多好文章,和粉丝们互动并感受成就感。

现在你想更进一步,努力提高文章质量,使其更受读者欢迎,打造圈内一流博客。问题是该如何判断一篇文章是“受欢迎的”?靠浏览量是个方法,但是并不能区分出内容花拳绣腿的标题党。靠评论数也是个好方法,但个人博客通常读者不多,好文章零评论是很正常的。

这时候**“点赞”**功能就显得重要了。如果大部分读者都给了一个赞,那就表明文章确实还不错。

动手之前的思考

点赞功能可不简单,实现途径非常的多。别急着动手,耐心思考:我们的博客到底需要什么样的点赞?

**首先,点赞是否要求用户必须登录?**要求登录的好处是可以精确的记录是哪些用户、对哪些文章点过赞(多对多关系),以便进行细致的数据分析。坏处是登录这个要求很笨重,会屏蔽掉大部分的游客用户。博主倾向于不要求用户登录,毕竟小站通常用户就不多,提高参与度才是点赞最核心的任务。

如果某天你的小站火了,就把要求用户登录的交互功能让给“收藏”吧!

**其次,用户是否可以重复点赞?**很多视频平台的用户可以对某个喜欢的女主播疯狂点赞,以表达自己非常非常的喜欢。这对用户较多的平台是没问题的,因为用户数量多了之后,你点几百个赞也只是九牛一毛。但博客网站这样做很容易造成某些文章点赞为零,某些文章点赞数又出奇的高。显然这不代表文章质量的差异。

好了,目前我们的策略是不要求用户登录,也不允许用户重复点赞。**下一个问题是,在哪里记录用户的点赞相关的数据呢?**点赞数量毫无疑问要保存在数据库里,以便随时取出数据并呈现出来。

但问题是**校验用户是否已点赞的记录保存在哪?**在数据库中记录用户的IP地址是个方法,但你得处理好记录IP和记录登录用户的关系,稍微有点麻烦。另外每次用户的点赞都需要向后端发送校验请求,增加了服务器的负担。

既然数据保存在后端数据库里不好,**那能不能保存在浏览器端呢?**答案是可以的,并且有 CookieLocalStorage 都可以让你保存数据。它两的主要区别如下:

特性 Cookie LocalStorage
生命周期 可设置失效时间,默认是关闭浏览器后失效 除非被清除,否则永久保存
存储空间 4K左右 一般为5MB
与服务器通信 每次都会携带在HTTP头中 不参与服务器的通信
易用性 源生接口不友好 源生接口可以接受

比较下来会发现 LocalStorage 可以永久保存数据,存储空间大,也不参与服务器通信,很适合点赞的需求。由于数据保存在浏览器中,所以也不需要区分用户有没有登录了:实际上每次请求点赞时,校验的是当前这个浏览器是否已经点过赞了,而不是用户!

可能你会反驳说,那要是用户换一个浏览器不就可以重复点赞了吗,更何况浏览器端的数据是非常容易篡改的。但这又有什么关系呢?点赞数据并不需要非常精确,随他去吧。

所有的现代浏览器都支持 LocalStorage 功能。如果你还在用 IE6 ,赶紧考虑升级浏览器吧。

总结一下,我们的点赞功能如下:

  • 不要求用户登录
  • 不允许重复点赞
  • 点赞数保存在服务器数据库中
  • 点赞校验数据保存在浏览器的 LocalStorage 中

当用户点赞时,前端脚本会在 LocalStorage 里校验是否已经点过赞了;如未点过赞,才会向服务器发送点赞请求,并记录数据。

想清楚需求,难题就迎刃而解了。接下来就是代码实现。

需要说明的是,以上分析并不代表其他方法不好,仅仅是在博客小站的环境下,博主觉得合适的技术路径而已。如果你心中住着另一个哈姆雷特,请想办法去实现它。

代码实现

准备工作

本章的重点工作在前端,因此先把简单的后端代码写了,权当热身。

有的读者听到前端就觉得头疼。你的痛苦我明白,但也是必不可少的。光写 Python 是做不出漂亮网站的。

由于点赞数需要保存在数据库中,因此修改文章模型是必须的了:

article/models.py

...
# 文章模型
class ArticlePost(models.Model):
    ...
    # 新增点赞数统计
    likes = models.PositiveIntegerField(default=0)
    ...

迁移数据:

(env) > python manage.py makemigrations
(env) > python manage.py migrate

继续用类视图:

article/views.py

...
# 点赞数 +1
class IncreaseLikesView(View):
    def post(self, request, *args, **kwargs):
        article = ArticlePost.objects.get(id=kwargs.get('id'))
        article.likes += 1
        article.save()
        return HttpResponse('success')

功能是让点赞数增加1个,并且返回 success 。至于为什么是 success 后面再讲。

最后就是路由了:

article/urls.py

...
urlpatterns = [
    ...
    # 点赞 +1
    path(
        'increase-likes/<int:id>/', 
        views.IncreaseLikesView.as_view(), 
        name='increase_likes'
    ),
]

很简单吧。剩下的就是专心写前端代码了。

JS与Ajax

由于校验数据保存在浏览器中,因此前端的工作较多。

先把完整代码贴出来(讲解在后面):

templates/article/detail.html

...

<!-- 已有代码,文章正文 -->
<div class="col-12">
    <p>{
  { article.body|safe }}</p>
</div>

<!-- 新增点赞按钮 -->
<div 
  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值