dgango-博客项目之点赞与评论

Posted 2020-11-09

一、点赞和踩灭

1、事务

事务：要么同时发生，要么同时不发生，文章点赞表增加一条数据的时候，对应的文章的点赞或者踩灭数加1，如果后面的if语句不能执行，则根据事务，点赞表也不会增加数据

from django.db import transaction                                                         #引入transaction事务

with transaction.atomic():
    obj = ArticleUpDown.objects.create(user_id=user_pk, article_id=article_id, is_up=is_up)    #文章点赞表里面添加一条数据
    if is_up:
        Article.objects.filter(pk=article_id).update(up_count=F("up_count") + 1)            #文章表相应的文章的点赞数加1
    else:
        Article.objects.filter(pk=article_id).update(down_count=F("down_count") + 1)       #文章表相应的文章的踩灭数加1

2、render方法

浏览器给服务器发送一个请求，视图函数从模板中取到html页面，如果页面里面有模板语法，如{{ }}、{% %}，render方法会先对其进行渲染，将模板语法替换为相应的html标签，

最后将标签返回给浏览器，所以如果js在html页面，那么就可以使用模板语法，而如果将js单独做成一个静态文件，则不能使用模板语法。

3、点赞的视图函数和页面

views.py文件增加点赞视图：

import json
from django.http import JsonResponse
from django.db.models import F
from django.db import transaction
def digg(request):
    res={"state":True}                     #状态为true代表点赞，false为踩灭
    user_pk=request.user.pk                 # 当前登录用户，即点赞用户，request.user是全局变量
    article_id=request.POST.get("article_id")
    is_up=request.POST.get("is_up")             #因为js默认post是urlencode，发送的是字符串，所以这里接收到的就是字符串
    is_up=json.loads(is_up)                #将收到的字符串通过json序列化为我们需要的布尔值
    try:
        with transaction.atomic():          #事务
            obj=ArticleUpDown.objects.create(user_id=user_pk,article_id=article_id,is_up=is_up)
            if is_up:
                 Article.objects.filter(pk=article_id).update(up_count=F("up_count")+1)
            else:
                 Article.objects.filter(pk=article_id).update(down_count=F("down_count") + 1)
    except Exception as e:
        res["state"]=False                #变成踩灭状态
        res["first_action"]=ArticleUpDown.objects.filter(user_id=user_pk,article_id=article_id).first().is_up  #返回给ajax的数据多了first_action属性
    return JsonResponse(res)                   #返回给ajax的时候，ajax不用反序列化，接收到的是一个字典格式

article_detail.html页面：

{% extends "base.html" %}

{% block content %}
    <h3 class="text-center">{{ article_obj.title }}</h3>
    <div class="article_content">
        {{ article_obj.articledetail.content|safe }}
    </div>
    <div class="poll clearfix">
        <div id="div_digg" class="clearfix">
            <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>
    </div>
    <div class="diggword" id="digg_tips" style="color: red;"></div>
    <div class="info" article_id="{{ article_obj.pk }}" username="{{ request.user.username }}"></div>     {#为了在静态文件article_detail.js中取到html页面的变量#}
    {% csrf_token %}
    <script src="/static/js/article_detail.js"></script>
{% endblock %}


因为我们的html是继承的base.html页面，所有要在base.html页面引入
<link rel="stylesheet" href="/static/css/article_detail.css">

article_detail.css样式代码：

#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;
}

article_detail.js代码：

$(".action").click(function () {
    if ($(".info").attr("username")) {                                      //表示当前用户登录
        var is_up;
        is_up = $(this).hasClass("diggit");
        article_id = $(".info").attr("article_id");                            //根据属性查找取到article_detail.html页面article_id的值
        //
        $.ajax({
            url: "blog/digg/",
            type: "post",
            data: {
                is_up: is_up,
                article_id: article_id,
                csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val()     //防止出现404 forbidden错误
            },
            success: function (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 {                          //重复提交
                    console.log(data.first_action);
                    if (data.first_action) {
                        $("#digg_tips").html("您已经推荐过了");
                        setTimeout(function () {                        // 1秒后下面的消息不显示
                            $("#digg_tips").html("");
                        }, 1000)
                    }
                    else {
                        $("#digg_tips").html("您已经反对过了");
                        setTimeout(function () {
                            $("#digg_tips").html("");
                        }, 1000)
                    }
                }
            }
        })
    }
    else{                                                          //用户必须登录后才能进行点赞、踩灭
        # var s="<a href='/login/' class='pull-right'>请登陆！</a>";
        # $("#div_digg").after(s);                                 //返回给用户“请登陆”信息
        location.href = "/login/?next=" + location.pathname       //直接调转到用户登录页面
    }
});

二、评论

1、js取标签里的值

select标签                .val();
input标签                 .val();
textarea标签              .val();
div标签、span标签取里面值的时候用.html()或.text();

2、评论楼：

article_detail.html页面：

{% extends "base.html" %}

{% block content %}
    <h3 class="text-center">{{ article_obj.title }}</h3>
    <div class="article_content">
        {{ article_obj.articledetail.content|safe }}
    </div>
    <ul class="comment_list list-group">
        评论楼：
        {% for comment in comment_list %}
            <li class="comment_item list-group-item">
                <div>
                    <a href="">#{{ forloop.counter }}</a>楼 &nbsp;&nbsp;&nbsp;
                    <span>{{ comment.create_time|date:"Y-m-d H:i" }}</span>&nbsp;&nbsp;                    {#显示时间，格式为年-月-日 时:分#}
                    <span>{{ comment.user.username }}</span>                                               {#评论人，当前评论的评论名#}
                    <a class="pull-right reply_btn" username="{{ comment.user.username }}"
                       comment_id="{{ comment.pk }}"><span>回复</span></a>
                </div>
                {% if comment.parent_comment_id %}                                                           {#评论是子评论#}
                        <div class="parent_comment_infon well">
                             @{{ comment.parent_comment.user.username }}&nbsp;:&nbsp;{{ comment.parent_comment.content }}<br/>
                             {{ comment.content }}
                        </div>
                {% else %}                                                                                {#评论是根评论#}
                        <div class="comment_con">
                            <p>{{ comment.content }}</p>
                        </div>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
    <div class="comment">
        <div>
            昵称：
            <input type="text" id="tbCommentAuthor" class="author" disabled="disabled" size="50"
                   value="{{ request.user.username }}">
        </div>
        <div>
            <p>评论内容</p>
            <textarea name="" id="comment_content" cols="115" rows="10"></textarea>
        </div>
        <button class="btn  btn-default comment_btn">提交</button>
    </div>
    <div class="info" article_id="{{ article_obj.pk }}" username="{{ request.user.username }}"></div>
    {% csrf_token %}
    <script>
        var pid = "";
        $(".comment_btn").click(function () {                           // 提交评论事件
            article_id = $(".info").attr("article_id");                //在页面根据属性查找得到当前文章id号
            content = $("#comment_content").val();                    //textarea标签通过.val()得到里面的值
            // 处理文本框内容
            if (pid) {
                var index = content.indexOf("\n");                      //得到\n换行符的索引
                content = content.slice(index + 1)                       //换行符的索引加1的位置即我们所需要文本内容的开始位置
            }
            $.ajax({
                url: "/blog/comment/",
                type: "post",
                data: {
                    article_id: article_id,
                    content: content,
                    pid: pid,                                        //pid为空，则提交根评论
                    csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val()
                },
                success: function (data) {                          //视图函数comment返回的数据
                    console.log(data);
                    ctime = data.ctime;
                    content = data.content;
                    username = $(".info").attr("username");       //从页面取到评论人的名字
                    s = '<li class="comment_item list-group-item temp"> <div> <span>' + ctime + '</span>&nbsp;&nbsp;<span>' + username + '</span> </div> <div class="comment_con"><p>' + content + '</p></div> </li>'
                    $(".comment_list").append(s);
                    $("#comment_content").val("");                //提交成功后，清空评论框里面的评论内容
                    pid = "";                                         //pid重新置空，这样接着在评论框里评论就变成了根评论，否则提交一直是子评论
                }
            })
        });
        $(".reply_btn").click(function () {                    // 回复按钮事件
            $("#comment_content").focus();                     // 获取输入框的焦点
            var val = "@" + $(this).attr("username") + "\n";
            $("#comment_content").val(val);
            pid = $(this).attr("comment_id")
        })
    </script>
    <script src="/static/js/article_detail.js"></script>
{% endblock %}

article_detail.css代码：

input.author {
    background-image: url("/static/img/icon_form.gif");
    background-repeat: no-repeat;
    border: 1px solid #ccc;
    padding: 4px 4px 4px 30px;
    width: 300px;
    font-size: 13px;
}
.comment_item .comment_con{
    margin-top: 10px;
    margin-left: 20px;
}
.conmment_item{
    margin-left: 20px;
}
.comment {
    width: 820px;
}
.parent_comment_infon{
    position: relative;
    margin: 0 40px 0 40px;
    border: #ccc 1px dashed;
    padding: 1px;
    color: grey;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: normal;
    text-decoration: none;
}
.comment_con{
    position: relative;
    margin: 0 10px 0 10px;
    border: #ccc 1px dashed;
    padding: 5px;
    color: black;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 15px;
    font-weight: normal;
    text-decoration: none;
}
.temp {
    background-color: gainsboro;
}

views.py文件增加评论楼视图：

# 评论
def comment(request):
    user_pk=request.user.pk
    article_id=request.POST.get("article_id")
    content=request.POST.get("content")
    pid=request.POST.get("pid")
    response={}
    with transaction.atomic():                   #事件
        if not pid:                              # pid为空表示根评论
            comment_obj=Comment.objects.create(user_id=user_pk,article_id=article_id,content=content)                          # 提交根评论
        else:                                     # 子评论
            comment_obj = Comment.objects.create(user_id=user_pk, article_id=article_id, content=content,parent_comment_id=pid)  # 提交子评论
        Article.objects.filter(pk=article_id).update(comment_count=F("comment_count")+1)
    response["ctime"]=comment_obj.create_time.strftime("%Y-%m-%d %H:%M")           #返回给ajax的创建时间，时间格式为%Y-%m-%d %H:%M
    response["content"]=comment_obj.content                                          #返回给ajax的评论内容
    return JsonResponse(response)
def article_detail(request,username,article_id):
    user = UserInfo.objects.filter(username=username).first()      # 查当前站点的用户对象
    blog = user.blog
    article_obj=Article.objects.filter(pk=article_id).first()
    comment_list=Comment.objects.filter(article_id=article_id)
    return render(request,"article_detail.html",locals())

3、评论树：

article_detail.html页面添加评论树代码：

    <div class="comment_tree">
        <p>评论树</p>
    </div>
    <script>
        // 获取评论信息，以评论树形式展示
        $.ajax({
            url: "/blog/comment_tree/" + $(".info").attr("article_id"),
            success: function (comment_list) {
                console.log(comment_list);
                html = "";
                $.each(comment_list, function (index, comment_dict) {
                    var comment_pk=comment_dict["pk"]
                    var comment_content=comment_dict["content"]
                    temp= '<div comment_tree_id='+comment_pk+' class="conmment_item"> <span class="content">'+comment_content+'</span></div>'
                    if (!comment_dict.parent_comment_id) {                           // 没有父评论，即根评论
                         $(".comment_tree").append(temp)}
                    else {                                                                                   // 子评论处理
                        var pid=comment_dict.parent_comment_id;
                        $("[comment_tree_id="+pid+"]").append(temp)
                    }
                });
            }
        });
    </script>

views.py文件增加评论树视图函数：

def comment_tree(request,article_id):
    comment_list=list(Comment.objects.filter(article_id=article_id).values("content","pk","parent_comment_id"))
    print(comment_list)
    return JsonResponse(comment_list,safe=False)                #JsonResponse返回的是列表，需要参数safe=False处理