基于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 urllib模块urlopen()与urlretrieve()详解
Nov 01 Python
Linux下使用python自动修改本机网关代码分享
May 21 Python
浅析Python中signal包的使用
Nov 13 Python
Python引用模块和查找模块路径
Mar 17 Python
Python爬虫获取图片并下载保存至本地的实例
Jun 01 Python
python+influxdb+shell编写区域网络状况表
Jul 27 Python
浅谈Python的list中的选取范围
Nov 12 Python
PySide和PyQt加载ui文件的两种方法
Feb 27 Python
Python中的引用知识点总结
May 20 Python
对Python中小整数对象池和大整数对象池的使用详解
Jul 09 Python
让你的Python代码实现类型提示功能
Nov 19 Python
Python之qq自动发消息的示例代码
Feb 18 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的ob_start();控制您的浏览器cache!
2006/11/25 PHP
php从文件夹随机读取文件的方法
2015/06/01 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
用js重建星际争霸
2006/12/22 Javascript
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
jquery和javascript的区别(常用方法比较)
2013/07/04 Javascript
jQuery 获取兄弟元素的几种不错方法
2014/05/23 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
基于jquery实现表格内容筛选功能实例解析
2016/05/09 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
2017/07/19 Javascript
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
[01:05:12]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS CIS-GAME
2014/05/21 DOTA
解读! Python在人工智能中的作用
2017/11/14 Python
Python提取支付宝和微信支付二维码的示例代码
2019/02/15 Python
Python日志无延迟实时写入的示例
2019/07/11 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
python实现梯度下降和逻辑回归
2020/03/24 Python
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
2014/07/21 HTML / CSS
SheIn俄罗斯:时尚女装网上商店
2017/02/28 全球购物
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
傲盾软件面试题
2015/08/17 面试题
医学类导师推荐信范文
2013/11/19 职场文书
公司部门司机岗位职责
2014/01/03 职场文书
廉政承诺书范文
2015/04/28 职场文书
开天辟地观后感
2015/06/09 职场文书
关于分班的感言
2015/08/04 职场文书
新教师教学工作总结
2015/08/14 职场文书
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers