bbs项目实现点赞和评论的功能

Posted 2021-01-17 bainianminguo

一、点赞功能

 先看下前端的代码，如下这段代码是我直接从博客园上爬下来的

        <div class="poll clearfix">
            <div id="div_digg">
                <div class="diggit action">
                    <span class="diggnum" id="digg_count">{{ article_obj.up_count }}</span>
                </div>
                <div class="buryit action">
                    <span class="burynum" id="bury_count">{{ article_obj.down_count }}</span>
                </div>
                <div class="clear"></div>
                <div class="diggword" id="digg-tips" style="color: red"></div>
            </div>
        </div>

　　

这里需要注意，同时也要把css文件也扒下来，然后放在的我们的css的block块中

{% block css %}
    <link rel="stylesheet" href="/static/css/article.css">
{% endblock %}

　　

然后我们看下js的代码，我们这里是用ajax的方式实现点赞和踩的功能，这里我们把点赞和踩的js代码单独放在了一个js文件中，然后在script标签中引入

<script src="/static/js/for_artic_desc.js"></script>

　　

下面我们重点看下js的代码

 $("#div_digg .action").click(function () {
            if ($(".info").attr("username")){
                 var is_up = $(this).hasClass("diggit");
            // {#            如果有diggit这个class，则为true，如果没有diggit，则为false，如果为true，则为赞，如果为false则为踩#}
            //
            // {#            var article_id = {{ article_obj.nid }};#}
            // {##}
            // {#            var article_title = {{ article_obj.title }};#}
            // {#            如果在js中使用模板渲染的话，如果直接按照上面的方式渲染#}
            // {#            #}
            // {#            则如果渲染出来的值是字符串，则js会把他当做变量，会报错#}
            // {#            则如果渲染出来的值是数字，则js会把他当做一个数字，不会报错#}
            // {#            #}
            // {#            #}
            // {#            为了解决这个问题，如果我们在js要使用模板语言，则对大括号外面加一个引号就可以了#}

            // var article_id = "{{ article_obj.nid }}";
            var article_id = $(".info").attr("artic_id");


            var article_title = "{{ article_obj.title }}";

            $.ajax(
                {
                    url: "/app1/up_down/",
                    type: "post",
                    data: {
                        "article_id": article_id,
                        "article_title": article_title,
                        "is_up": is_up,
                        "csrfmiddlewaretoken": $("[name=‘csrfmiddlewaretoken‘]").val(),

                    },
                    success: function (data) {
                        data = JSON.parse(data);
                        if (data.state) {
                            if (is_up) {
                                var val = $("#digg_count").text();
                                val = parseInt(val) + 1;
                                $("#digg_count").text(val)
                            } else {
                                var val = $("#bury_count").text();
                                val = parseInt(val) + 1;
                                $("#bury_count").text(val);
                            }
                        } else {
                            $("#digg-tips").text(data.error_code);
                            setTimeout(function () {
                                $("#digg_tips").text("aaaaaaaa");
                                console.log("123")
                            },1000)
                        }
                    }
                }
            )

        }else {
                location.href = "/app1/login/"
            }
 })

　　

 

 

上面的代码比较简单，就是获取需要的值，然后通过ajax通过post方式发送给后端

首先判断有没有登陆

　　如果没有登陆则跳转到登陆页面

　　如果有登陆，则首先拿到is_up这个变量的值，这里我们通过判断我们点击的标签是否有某个class属性来判断，如果有则is_up为true，如果没有，则is_up为false

　　这里还需要注意，在js代码也可以拿到大括号里的值，但是必须要用引号括起来，不然js会把大括号中的值当做一个变量来处理

 

这里还有一个小技巧，我们可以写一个标签，然后这个为这个标签加上自定义的属性，而这些属性的值就是我们要发给后端的值，我们就可以直接找到这个标签，然后通过attr方法获取到相应的属性，然后就可以发送给后端就可以了

比如我们这里就用这个标签通过自定义的方式存储我们要往后端发送的数据

<div class="info" artic_id="{{ article_obj.nid }}" username="{{ request.user.username }}"></div>

　　

这里还要注意，ajax发送数据，需要在data中添加下面的代码，才可以解决crsf问题

"csrfmiddlewaretoken": $("[name=‘csrfmiddlewaretoken‘]").val(),

　　

success中的函数就很简单了

success: function (data) {
                        data = JSON.parse(data);
                        if (data.state) {
                            if (is_up) {
                                var val = $("#digg_count").text();
                                val = parseInt(val) + 1;
                                $("#digg_count").text(val)
                            } else {
                                var val = $("#bury_count").text();
                                val = parseInt(val) + 1;
                                $("#bury_count").text(val);
                            }
                        } else {
                            $("#digg-tips").text(data.error_code);
                            setTimeout(function () {
                                $("#digg_tips").text("aaaaaaaa");
                                console.log("123")
                            },1000)
                        }
                    }

　　

 

最后我们看下后端的代码

from django.views.decorators.csrf import csrf_exempt
from django.db.models import F
# @csrf_exempt
import json
def up_down(request):
    ret = {"state":True,"error_code":""}
    print(request.POST.get("article_id"))
    print(request.POST.get("article_title"))
    is_up = request.POST.get("is_up")

    user_obj = models.Userinfo.objects.get(username=request.user)
    try:
        models.ArticleUpDown.objects.create(
            user = user_obj,
            article = models.Article.objects.get(nid=request.POST.get("article_id")),
            is_up = json.loads(is_up)
        )
    except Exception as e:
        flag = models.ArticleUpDown.objects.filter(user=user_obj,article=models.Article.objects.get(nid=request.POST.get("article_id")))[0].is_up
        if flag:
            if json.loads(is_up):
                ret = {"state": False, "error_code": "你已经顶过该博客，不能在顶了"}
            else:
                ret = {"state": False, "error_code": "你已经顶过该博客，不能在踩了"}
        else:
            if json.loads(is_up):
                ret = {"state": False, "error_code": "你已经踩过该博客，不能在顶了"}
            else:
                ret = {"state": False, "error_code": "你已经踩过该博客，不能在踩了"}
    else:
        if json.loads(is_up):
            models.Article.objects.filter(nid=request.POST.get("article_id")).update(
                up_count = F("up_count") + 1
            )
        else:
            models.Article.objects.filter(nid=request.POST.get("article_id")).update(
                down_count = F("down_count") + 1
            )
    return HttpResponse(json.dumps(ret))

　　

后端的python代码就非常熟悉了，这里就不做讲解了

 

二、评论功能