文章的点赞点踩制作

文章的添加

博客园打开需要拷贝的文章,右键检查--》选择cnblogs_post_body这一个div,然后复制outer HTML到admin后台文章表里面

最后需要在文章详情页的文章内容那一行添加一个|safe
image

点赞点踩制作

前端样式:

不会写,直接拷贝博客园的点赞点踩html和css样式

    {#    点赞点踩样式开始:复制博客园的点赞点踩样式,拷贝其对应的out HTML和css到下面就行#}
    <div class="clearfix">
        <div id="div_digg">
            <div class="diggit action">
                <span class="diggnum" id="digg_count">{{ article_obj.up_num }}</span>
            </div>
            <div class="buryit action">
                <span class="burynum" id="bury_count">{{ article_obj.down_num }}</span>
            </div>
            <div class="clear"></div>
            <div class="diggword" id="digg_tips" style="color: red">
            </div>
        </div>
    </div>


    {#    点赞点踩样式结束#}

{% block css %}
    <style>
        #div_digg {
            float: right;
            margin-bottom: 10px;
            margin-right: 30px;
            font-size: 12px;
            width: 125px;
            text-align: center;
            margin-top: 10px;
        }

        .diggit {
            float: left;
            width: 46px;
            height: 52px;
            background: url(/static/img/upup.gif) no-repeat;
            text-align: center;
            cursor: pointer;
            margin-top: 2px;
            padding-top: 5px;
        }

        .buryit {
            float: right;
            margin-left: 20px;
            width: 46px;
            height: 52px;
            background: url(/static/img/downdown.gif) no-repeat;
            text-align: center;
            cursor: pointer;
            margin-top: 2px;
            padding-top: 5px;
        }

        .clear {
            clear: both;
        }

        .diggword {
            margin-top: 5px;
            margin-left: 0;
            font-size: 12px;
            color: #808080;
        }
    </style>
{% endblock %}

向后端提交点赞点踩数据:

        // 思考然后判断用户是点了赞还是点了踩??
        // 法1:给点赞和点踩的div分别绑定一个事件,以此来判断用户点赞点踩;法2:给div绑定同一个类属性action,在内部判断是否有diggit或者buryit来判断点赞还是点踩、
        $('.action').click(function () {
            // 保存一下用户是否点赞还是点踩
            let isUp = $(this).hasClass('diggit');
            // 向后端发送ajajx提交用户是否点赞点踩数据
            let div = $(this);
            $.ajax({
                type: 'post',
                url: '/up_or_down/',
                // 提交数据:哪个用户为那篇文章点赞了还是点踩了,用户后端有了不用提交了
                data: {
                    'article_id': '{{ article_obj.pk }}',
                    'is_up': isUp,
                    'csrfmiddlewaretoken': '{{ csrf_token }}',
                },
                success: function (args) {
                    if (args.code == 1000) {
                        $('#digg_tips').text(args.msg)
                        let oldNum = div.children().text();
                        div.children().text(Number(oldNum) + 1)
                    } else {
                        $('#digg_tips').html(args.msg)
                    }
                }
            })
        })

后端逻辑代码:

# 八、点赞点踩视图函数
def up_or_down(request):
    """
    逻辑:
    1.判断是否登录(未登录需要先登录)
    2.判断用户点赞是否是自己的文章(自己不能给自己文章点赞)
    3.判断用户是否已经给该文章点过了(点过就不能点了)
    4.操作数据库存储数据
    :param request:
    :return:
    """
    # 1.判断是否为ajax请求
    if request.method == 'POST':
        # 2.定义一个回调字典
        back_dic = {'code':1000,'msg':''}
        # 3.获取提交的数据
        article_id = request.POST.get('article_id')
        is_up = request.POST.get('is_up') # 注意结束的是字符串形式需要转为布尔值形式
        is_up = json.loads(is_up)
        # 4.判断是否登录(未登录需要先登录)
        if request.user.is_authenticated:
            # 5.判断用户点赞是否是自己的文章(自己不能给自己文章点赞)根据当前文章主键查出该文章的用户与request.user比对
            article_obj = models.Article.objects.filter(pk=article_id).first()
            user_obj = article_obj.blog.userinfo
            if not request.user == user_obj:
                # 6.判断用户是否已经给该文章点过了(点过就不能点了)查点赞点踩表是否有对应数据
                is_click = models.UpAndDown.objects.filter(article=article_obj,user=request.user)
                if not is_click:
                    # 7.操作数据库存储数据,注意article表里的数据也要同步
                    # 8.判断是点赞了还是点踩了
                    if is_up:
                        models.Article.objects.filter(pk=article_id).update(up_num=F('up_num') + 1)
                        back_dic['msg'] = '点赞成功'
                    else:
                        models.Article.objects.filter(pk=article_id).update(down_num=F('down_num')+1)
                        back_dic['msg'] = '点踩成功'
                    models.UpAndDown.objects.create(user=request.user,article=article_obj,is_up=is_up)
                else:
                    back_dic['code'] = 1001
                    back_dic['msg'] = '您已经支持过了'
            else:
                back_dic['code'] = 1002
                back_dic['msg'] = '您不能给自己文章点赞点踩'
        else:
            back_dic['code'] = 1003
            back_dic['msg'] = '<a href="/login/">请先登录</a>'
        return JsonResponse(back_dic)

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:文章的点赞点踩制作 - Python技术站

(0)
上一篇 2023年4月2日 下午4:46
下一篇 2023年4月2日 下午4:46

相关文章

  • 操作系统启动流程和BIOS介绍

    1.BIOS介绍 我们刚刚买回来的电脑裸机是可以直接启动的,这是由于生产厂商在电脑出厂的时候就在电脑里编写了一个只可读的系统功能BIOS,该系统被写入了ROM(只读内存中) BIOS是一个过渡性的操作系统,当安装了window等其他操作系统时,该系统会被快速的代替 2.操作系统的启动流程 1.计算机通电2.BIOS开始运行,检测硬件:cpu、内存、硬盘等3.…

    2023年4月2日
    00
  • rest_framework认证源码分析

    认证源码分析 位置 : APIVIew—-》dispatch方法—》self.initial(request, *args, **kwargs)—->有认证,权限,频率三个版块 分析: 只读认证源码: self.perform_authentication(request)—》self.perform_authentication(re…

    2023年4月2日
    00
  • 实时展示用户上传的头像

    实时展示用户上传的头像 总体思路 “”” 1.首先需要给对应的上传头像input框绑定一个文本域变化事件 (当检测到用户对该文件框上传了头像就会触发一系列操作) 2.再生成一个文件阅读器对象 3.再获取用户上传的文件头像 4.把用户上传的文件头像交给文件阅读器对象FileReader读取 5.利用文件阅读器把读取的文件头像结果展示到前端页面 (修改img的s…

    Python开发 2023年4月2日
    00
  • 一切皆对象和深浅拷贝

    1.元类 元类的来源是:python中一切皆对象。 1.1 什么是元类 元类就是用来实例化产生类的类 关系:元类—实例化—类(自定义的类)—实例化—-对象(obj) 1.2如何查看内置的元类 1.type是内置的元类2.我们用class关键字定义出来的所有类以及内置的类都是由内置的元类type实例化产生的 例如:在python中int、dic…

    2023年4月2日
    00
  • 迭代器与生成器

    1.什么是迭代器 迭代器是用来迭代取值的工具,而迭代的意思是一个重复的过程,每一次的重复都是基于上一次的结果继续的,单纯的重复并不是迭代 2.为何要有迭代器 在python中涉及到需要把多个值循环取出来的类型有:字符串、列表、元组、字典、集合、打开文件等,我们可以考虑使用while循环的方式来循环取出多个值,例如: list=[‘egon’,’lin’,11…

    Python开发 2023年4月2日
    00
  • 关于编辑器和解释型编译型语言

    各种语言用到的编辑器 python开发:pycharm(收费),vscode(免费),sublintext, go开发:goland(收费),vscode,国产的 java:idea(收费),eclipse(免费),MyEclipse(收费) android:androidstudio(免费),eclipse+adt 前端:webstorm(收费) php:…

    Python开发 2023年4月2日
    00
  • django中有关ajax的部分

    Django_ajax 1 简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。 同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求; 异步交互:客户…

    Python开发 2023年4月2日
    00
  • git的介绍和使用

    git介绍 什么是git git是一种版本控制器 – 控制的对象是开发的项目代码 什么是版本控制器 完成 协同开发 项目,帮助程序员整合代码 i)帮助开发者合并开发的代码 ii)如果出现冲突代码的合并,会提示后提交合并代码的开发者,让其解决冲突 软件:SVN 、 GIT(都是同一个人的个人项目) github、gitee(两个采用git版本控制器管理代码的公…

    2023年4月2日
    00
合作推广
合作推广
分享本页
返回顶部