基于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命令行交互提示符的方法
Jan 14 Python
在Python的struct模块中进行数据格式转换的方法
Jun 17 Python
Python字符串格式化输出方法分析
Apr 13 Python
Selenium chrome配置代理Python版的方法
Nov 29 Python
python实现kmp算法的实例代码
Apr 03 Python
对Python中class和instance以及self的用法详解
Jun 26 Python
python实现将json多行数据传入到mysql中使用
Dec 31 Python
在 Pycharm 安装使用black的方法详解
Apr 02 Python
浅谈numpy中函数resize与reshape,ravel与flatten的区别
Jun 18 Python
基于django2.2连oracle11g解决版本冲突的问题
Jul 02 Python
python 检测nginx服务邮件报警的脚本
Dec 31 Python
Python爬虫定时计划任务的几种常见方法(推荐)
Jan 15 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
英雄试炼之肉山谷—引领RPG新潮流
2020/04/20 DOTA
php 文件状态缓存带来的问题
2008/12/14 PHP
php设计模式 Command(命令模式)
2011/06/26 PHP
Thinkphp的volist标签嵌套循环使用教程
2014/07/08 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
Javascript 事件流和事件绑定
2009/07/16 Javascript
修改或扩展jQuery原生方法的代码实例
2015/01/13 Javascript
浅谈JavaScript中的字符编码转换问题
2015/07/07 Javascript
jQuery网页选项卡插件rTabs用法实例分析
2015/08/26 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
2016/05/05 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
2017/01/14 Javascript
javascript中的面向对象
2017/03/30 Javascript
vue.js 获取当前自定义属性值
2017/06/01 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
TypeScript类型声明书写详解
2019/08/28 Javascript
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
python后端接收前端回传的文件方法
2019/01/02 Python
Django 配置多站点多域名的实现步骤
2019/05/17 Python
Python 列表推导式需要注意的地方
2020/10/23 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
带有css3动画效果的兼容多浏览器简单导航条示例
2014/01/26 HTML / CSS
荷兰牛仔裤网上商店:Jeans Centre
2018/04/03 全球购物
Farnell德国:电子元器件供应商
2018/07/10 全球购物
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
个人简历自我评价八例
2013/10/31 职场文书
社会工作专业自荐信
2014/09/26 职场文书
群众路线教育实践活动实施方案
2014/10/31 职场文书
出差报告怎么写
2014/11/06 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
党员违纪检讨书
2015/05/05 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书
iPhone13将有八大升级
2021/04/15 数码科技
MongoDB balancer的使用详解
2021/04/30 MongoDB
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
2021/11/27 Vue.js