基于Django框架利用Ajax实现点赞功能实例代码


Posted in Python onAugust 19, 2018

概要:

要实现点赞功能,需要实现的有:谁进行的点赞、什么时候进行点赞、点赞的对象是谁、每一个对象的点赞数量是多少、点赞过后还需要能够取消点赞,为了是点赞后的信息能够及时的显示在前端页面,就需要使用Ajax来异步请求数据,实现实时显示。

下面话不多说了,来随着小编一起看看详细的介绍吧

模型分析:

创建的模型需要记录的数据有:点赞者、点赞对象、点赞时间、点赞的数量,由于前面三个属性主要用于记录点赞的状态,而点赞数量主要用于记录某篇文章的点赞数量,所以这里最好把点赞数量单独放在一个模型中。这里就创建了两个模型,LikeRecord和LIkeCount,LikeRecord用于记录点赞状态,LIkeCount用于记录点赞的数量。大致的思路图:

基于Django框架利用Ajax实现点赞功能实例代码

代码:

from django.db import models
from django.contrib.contenttypes.fields import GenericForeignKey
from django.contrib.contenttypes.models import ContentType
from django.contrib.auth.models import User

# Create your models here.


# 用于记录点赞数量的模型
class LikeCount(models.Model):
 content_type = models.ForeignKey(ContentType, on_delete=models.DO_NOTHING)
 object_id = models.PositiveIntegerField()
 content_object = GenericForeignKey('content_type', 'object_id')
 # 用于记录点赞数量的字段
 like_num = models.IntegerField(default=0)


# 用于记录点赞状态的模型
class LikeRecord(models.Model):
 content_type=models.ForeignKey(ContentType, on_delete=models.DO_NOTHING)
 object_id=models.PositiveIntegerField()
 content_object=GenericForeignKey('content_type', 'object_id')
 # 记录点赞的用户
 like_user = models.ForeignKey(User, on_delete=models.DO_NOTHING)
 # 记录点赞的时间
 like_time = models.DateTimeField(auto_now_add=True)

视图函数:

视图函数主要的作用就是接受前端通过Ajax发送回来的数据,并且对数据进行判断处理,然后对前面的两个模型进行实例化操作已经数据变更操作,当数据成功过后返回处理后的结果,当数据存在错误时,返回相应的提示信息。

代码:

from django.shortcuts import render, HttpResponseRedirect
from django.contrib.contenttypes.models import ContentType
from django.http import JsonResponse
from .models import LikeCount, LikeRecord

# Create your views here.


# 数据操作成功返回数据方法
def success_response(like_num):
 data = {}
 data['status'] = 'SUCCESS'
 data['like_num'] = like_num
 return JsonResponse(data)


# 数据操作失败返回信息的方法
def error_response(message):
 data = {}
 data['status'] = 'ERROR'
 data['message'] = message
 return JsonResponse(data)


def like_up(request):
 # 得到GET中的数据以及当前用户
 user = request.user
 # 判断用户是否登录
 if not user.is_authenticated:
  return error_response('未登录,不能进行点赞操作')
 content_type = request.GET.get('content_type')
 content_type = ContentType.objects.get(model=content_type)
 object_id = request.GET.get('object_id')
 is_like = request.GET.get('is_like')

 # 创建一个点赞记录
 if is_like == 'true':
  # 进行点赞,即实例化一个点赞记录
  like_record, created = LikeRecord.objects.get_or_create(content_type=content_type, object_id=object_id, like_user=user)
  # 通过created来判断点赞记录是否存在,如果存在则不进行点赞,如果不存在则进行点赞数量加一
  if created:
   # 不存在点赞记录并且已经创建点赞记录,需要将点赞数量加一
   like_count, created = LikeCount.objects.get_or_create(content_type=content_type, object_id=object_id)
   like_count.like_num += 1
   like_count.save()
   return success_response(like_count.like_num)
  else:
   # 已经进行过点赞
   return error_response('已经点赞过')
 else:
  # 取消点赞
  # 先查询数据是否存在,存在则进行取消点赞
  if LikeRecord.objects.filter(content_type=content_type, object_id=object_id, like_user=user).exists():
   # 数据存在,取消点赞
   # 删除点赞记录
   LikeRecord.objects.get(content_type=content_type, object_id=object_id, like_user=user).delete()
   # 判断对应的点赞数量数据是否存在,如果存在则对点赞数量进行减一
   like_count, create = LikeCount.objects.get_or_create(content_type=content_type, object_id=object_id)
   if create:
    # 数据不存在,返回错误信息
    return error_response('数据不存在,不能取消点赞')
   else:
    # 数据存在,对数量进行减一
    like_count.like_num -= 1
    like_count.save()
    return success_response(like_count.like_num)
  else:
   # 数据不存在,不能取消点赞
   return error_response('数据不存在,不能取消点赞')

Ajax代码:

该段代码的主要作用:通过前端按钮触动相应的处理函数,将当前的数据传递给后端,后端接受数据后进行处理,处理完后的数据再返回给前端,通过Ajax实时显示到前端。

代码:

<script type="text/javascript">
 function change_like(obj, content_type, object_id) {
  // 判断obj中是否包含active的元素,用于判断当前状态是否为激活状态
  var is_like = obj.getElementsByClassName('active').length == 0
  $.ajax({
   url: '/like_up/',
   // 为了避免加入csrf_token令牌,所以使用GET请求
   type: 'GET',
   // 返回的数据用于创建一个点赞记录
   data: {
    content_type: content_type,
    object_id: object_id,
    is_like: is_like,
   },
   cache: false,
   success: function (data) {
    console.log(data);
    if (data['status'] == 'SUCCESS'){
     // 更新点赞状态
     // 通过class找到对应的标签
     var record = $(obj.getElementsByClassName('glyphicon'))
     if (is_like){
      record.addClass('active')
     }
     else {
      record.removeClass('active')
     }
     // 更新点赞数量
     var like_num = $(obj.getElementsByClassName('like_num'))
     like_num.text('(' + data['like_num'] + ')')

    }
    else {
     // 以弹窗的形式显示错误信息
     alert(data['message'])
    }
   },
   error: function (xhr) {
    console.log(xhr)
   }
  });
  return false;
 };
</script>

最终效果图:

基于Django框架利用Ajax实现点赞功能实例代码

GitHub源码

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Python 相关文章推荐
Python实现将目录中TXT合并成一个大TXT文件的方法
Jul 15 Python
Python 制作糗事百科爬虫实例
Sep 22 Python
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
Aug 31 Python
浅谈Python NLP入门教程
Dec 25 Python
python print 按逗号或空格分隔的方法
May 02 Python
Django添加feeds功能的示例
Aug 07 Python
Django跨域请求CSRF的方法示例
Nov 11 Python
对Python3.x版本print函数左右对齐详解
Dec 22 Python
python实现抖音点赞功能
Apr 07 Python
简单了解python单例模式的几种写法
Jul 01 Python
django中嵌套的try-except实例
May 21 Python
关于Python中*args和**kwargs的深入理解
Aug 07 Python
分析python请求数据
Aug 19 #Python
浅谈django orm 优化
Aug 18 #Python
django连接mysql配置方法总结(推荐)
Aug 18 #Python
python画一个玫瑰和一个爱心
Aug 18 #Python
python爱心表白 每天都是浪漫七夕!
Aug 18 #Python
Python实现全排列的打印
Aug 18 #Python
python递归实现快速排序
Aug 18 #Python
You might like
php在线代理转向代码
2012/05/05 PHP
php提示Warning:mysql_fetch_array() expects的解决方法
2014/12/16 PHP
PHP使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
PHP递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
Yii2中hasOne、hasMany及多对多关联查询的用法详解
2017/02/15 PHP
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
jQuery获取字符串中出现最多的数
2016/02/22 Javascript
纯原生js实现table表格的增删
2017/01/05 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
vue router使用query和params传参的使用和区别
2017/11/13 Javascript
layui的table中显示图片方法
2018/08/17 Javascript
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
2020/06/24 jQuery
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
python 布尔操作实现代码
2013/03/23 Python
浅谈Python类里的__init__方法函数,Python类的构造函数
2016/12/10 Python
OpenCV实现人脸识别
2017/04/07 Python
Python实现读取并保存文件的类
2017/05/11 Python
Python实现的井字棋(Tic Tac Toe)游戏示例
2018/01/31 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
python中redis查看剩余过期时间及用正则通配符批量删除key的方法
2018/07/30 Python
Django Python 获取请求头信息Content-Range的方法
2019/08/06 Python
Python获取二维数组的行列数的2种方法
2020/02/11 Python
解决Python安装cryptography报错问题
2020/09/03 Python
Django Form常用功能及代码示例
2020/10/13 Python
顶级宝石首饰网络零售商:Angara
2016/10/25 全球购物
日本最大的购物网站:日本乐天市场(Rakuten Ichiba)
2020/11/04 全球购物
*p++ 自增p 还是p所指向的变量
2016/07/16 面试题
致跳远、跳高运动员广播稿
2014/01/09 职场文书
实习单位接收函模板
2014/01/10 职场文书
初三学生语文考试作弊检讨书
2014/12/14 职场文书
百善孝为先:关于孝道的经典语录
2019/10/18 职场文书
Python一些基本的图像操作和处理总结
2021/06/23 Python
Opencv实现二维直方图的计算及绘制
2021/07/21 Python
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python