基于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刷投票的脚本实现代码
Nov 08 Python
详细探究Python中的字典容器
Apr 14 Python
Python学习之Anaconda的使用与配置方法
Jan 04 Python
django框架基于模板 生成 excel(xls) 文件操作示例
Jun 19 Python
对django views中 request, response的常用操作详解
Jul 17 Python
Python3批量移动指定文件到指定文件夹方法示例
Sep 02 Python
pytorch方法测试详解——归一化(BatchNorm2d)
Jan 15 Python
Python格式化输出--%s,%d,%f的代码解析
Apr 29 Python
python判断是空的实例分享
Jul 06 Python
pytorch随机采样操作SubsetRandomSampler()
Jul 07 Python
使用Python+Appuim 清理微信的方法
Jan 26 Python
asyncio异步编程之Task对象详解
Mar 13 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获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
PHP获取链表中倒数第K个节点的方法
2018/01/18 PHP
PHP实现计算器小功能
2020/08/28 PHP
jquery 检测元素是否存在的实例代码
2013/11/19 Javascript
javascript常用方法总结
2015/05/14 Javascript
js实现字符串转日期格式的方法
2015/05/20 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
JavaScript在控件上添加倒计时功能的实现代码
2017/07/04 Javascript
vue实现登陆登出的实现示例
2017/09/15 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
使用layui实现树形结构的方法
2019/09/20 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
2020/10/29 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
[01:10]DOTA2次级职业联赛 - Fly战队宣传片
2014/12/01 DOTA
[02:14]完美“圣”典2016风云人物:xiao8专访
2016/12/01 DOTA
Python自动化运维和部署项目工具Fabric使用实例
2016/09/18 Python
Python爬取qq music中的音乐url及批量下载
2017/03/23 Python
Python爬虫:将headers请求头字符串转为字典的方法
2019/08/21 Python
Python字典生成式、集合生成式、生成器用法实例分析
2020/01/07 Python
Python栈的实现方法示例【列表、单链表】
2020/02/22 Python
解决pycharm中opencv-python导入cv2后无法自动补全的问题(不用作任何文件上的修改)
2020/03/05 Python
详解pycharm配置python解释器的问题
2020/10/15 Python
超酷炫 CSS3垂直手风琴菜单
2016/06/28 HTML / CSS
详解CSS3开启硬件加速的使用和坑
2017/08/21 HTML / CSS
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
乔丹诺(Giordano)酒庄德国官网:找到最好的意大利葡萄酒
2017/12/28 全球购物
Farah官方网站:男士服装及配件
2019/11/01 全球购物
普通党员对照检查材料
2014/08/28 职场文书
群众路线教育实践活动思想汇报(2014特荐篇)
2014/09/16 职场文书
小学校园广播稿集锦
2014/10/04 职场文书
离婚财产分割协议书
2015/08/11 职场文书
springboot+WebMagic+MyBatis爬虫框架的使用
2021/08/07 Java/Android
mysql sql常用语句大全
2022/06/21 MySQL