草庐IT

文章的点赞点踩制作

suncolor 2023-04-17 原文

文章的添加

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

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

点赞点踩制作

前端样式:

不会写,直接拷贝博客园的点赞点踩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)

有关文章的点赞点踩制作的更多相关文章

  1. Unity 3D 制作开关门动画,旋转门制作,推拉门制作,门把手动画制作 - 2

    Unity自动旋转动画1.开门需要门把手先动,门再动2.关门需要门先动,门把手再动3.中途播放过程中不可以再次进行操作觉得太复杂?查看我的文章开关门简易进阶版效果:如果这个门可以直接打开的话,就不需要放置"门把手"如果门把手还有钥匙需要旋转,那就可以把钥匙放在门把手的"门把手",理论上是可以无限套娃的可调整参数有:角度,反向,轴向,速度运行时点击Test进行测试自己写的代码比较垃圾,命名与结构比较拉,高手轻点喷,新手有类似的需求可以拿去做参考上代码usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;u

  2. 动漫制作技巧如何制作动漫视频 - 2

    动漫制作技巧是很多新人想了解的问题,今天小编就来解答与大家分享一下动漫制作流程,为了帮助有兴趣的同学理解,大多数人会选择动漫培训机构,那么今天小编就带大家来看看动漫制作要掌握哪些技巧?一、动漫作品首先完成草图设计和原型制作。设计草图要有目的、有对象、有步骤、要形象、要简单、符合实际。设计图要一致性,以保证制作的顺利进行。二、原型制作是根据设计图纸和制作材料,可以是手绘也可以是3d软件创建。在此步骤中,要注意的问题是色彩和平面布局。三、动漫制作制作完成后,加工成型。完成不同的表现形式后,就要对设计稿进行加工处理,使加工的难易度降低,并得到一些基本准确的概念,以便于后续的大样、准确的尺寸制定。四、

  3. ruby - 如何在ruby中制作动态多维数组? - 2

    我有一个关于多维数组的初学者ruby​​问题。我想按年份和月份对条目进行排序。所以我想创建一个包含年->月->月条目的多维数组所以数组应该是这样的:2009->08->Entry1->Entry209->Entry32007->10->Entry5现在我有:@years=[]@entries.eachdo|entry|timeobj=Time.parse(entry.created_at.to_s)year=timeobj.strftime("%Y").to_imonth=timeobj.strftime("%m").to_itmparr=[]tmparrentry}@years.pu

  4. ruby - 如何在不使用 HERE-DOCUMENT 语法的情况下在 Ruby 中制作多行字符串文字? - 2

    问题总结我想尝试使用Ruby来完成我在Python中所做的事情。在Python中它有r"""syntaxtosupportrawstrings,这很好,因为它允许将原始字符串与代码内联,并以更自然的方式连接它们,而无需特殊缩进。在Ruby中,当使用原始字符串时,必须使用其次是EOT在单独的行中,这会破坏代码布局。你可能会问,为什么不使用Ruby的%q{}?嗯,因为%q{}与Python的r"""相比有局限性因为它不会转义多个\\\并且只处理单个\.我正在动态生成Latex代码并写入一个文件,该文件稍后用pdflatex编译。Latex代码包含类似\\\的内容在许多地方。如果我使用Rub

  5. ruby - 如何制作 Ruby 1.8 小写非拉丁字符? - 2

    我正在使用Ruby1.8。似乎downcase不会改变非拉丁字符。例如:"Δ".downcase返回“Δ”我知道在Ruby1.9.1及更高版本中,我可以使用UnicodeUtils(fromhere)。我试过了,它工作正常。返回上一个示例的"δ"。是否有适用于1.8Ruby的等效(或任何)解决方案? 最佳答案 nash@nash:~$ruby-vruby1.8.7(2011-02-18patchlevel334)[i686-linux]gem安装unicode(https://rubygems.org/gems/unicode)re

  6. ruby-on-rails - rails delete_if 使用哈希忽略当前文章(中间人) - 2

    我为你们准备了一个简单的。我想要一个特色内容部分,其中排除了当前文章所以这可以通过delete_if使用MiddlemanBlog:但是我使用的是中间人代理,所以我无法访问current_article方法...我有一个YAML结构,其中包含以下模拟数据(以及其他数据),文件夹设置如下:data>site>caseStudy>RANDOM-ID423536.yaml(由CMS生成)在每个yaml文件中,您会发现如下内容::id:2k1YccJrQsKE2siSO6o6ac:title:Heyplace我的config.rb看起来像这样data.site.caseStudy.eachdo

  7. ruby - 如何使用 pager 制作 ruby​​ 命令行应用程序? - 2

    我正在使用Ruby制作一个命令行工具。它将在屏幕上打印大量文本。目前,我正在使用shell管道(may_app|more)来执行此操作。但我认为最好有一个默认的寻呼机。就像你在执行gitlog时看到的一样。可以使用git--nopagerlog禁用寻呼机。我已经完成了大量的谷歌工作并找到了一颗gem:hirb,但似乎有点矫枉过正。经过多次尝试,我目前正在使用shellwrapper来这样做:#!/bin/bash#xray.rbisthecorescript#doingthemainlogicandwill#outputmanyrowsoftexton#screenXRAY=$HOME

  8. ruby - 制作命令行程序 "full screen" - 2

    我想知道如何在shell中创建“全屏”窗口的外观,如在vim、emacs等中。是否可以在Ruby中以编程方式执行此操作?这对平台的依赖程度如何?编辑:我不是在寻找如何让我的shell进入全屏模式。我正在寻找一种方法来隐藏以前输入的命令并用应用程序“填充”shell屏幕。它适用于安装程序。 最佳答案 您可能正在寻找的是ncurses或S-Lang支持提供你的全TUI经验。Ruby的gem环境提供了几个可能值得探索的gem:$gemlist--remote|grep-icursescursesx(003)ffi-ncurses(0.4.

  9. ruby - 如何制作同时针对 MRI 和 JRuby 的 gem? - 2

    我想制作一个gem,当其他人尝试将它与MRI一起使用时,它将使用C代码,而当他们从JRuby中使用它时,它将使用Java代码。nokogiri和pumagems就是这样做的,我看过他们的代码,但没有看到他们是如何实现的。 最佳答案 这是通过使用rvm(或其他类似工具在rubies之间切换)和rake-compiler为您针对的不同平台交叉编译gem来完成的。.gemspec文件必须指定每个平台所需的文件;这是通过检查gem正在编译的平台来完成的:Gem::Specification.newdo|gem|#...ifRUBY_PLAT

  10. ruby - 在 Middleman 中移动博客文章位置 - 2

    我正在为我的网站使用MiddlemanBloggem,但默认情况下,博客文章似乎需要位于/source中,这在查看vim中的树时并不是特别好并尝试在其中找到其他文件之一(例如模板)。通过查看文档,我看不出是否有任何方法可以移动博客文章,以便将它们存储在其他地方,例如blog_articles文件夹或类似文件夹。这可能吗? 最佳答案 将以下内容放入您的config.rb文件中。activate:blogdo|blog|blog.permalink=":year-:month-:day-:title.html"blog.sources=

随机推荐