搭建自己的博客（二十五）：优化点赞功能，并添加模态登录框

{# 引用模板 #}
{% extends ‘base.html‘ %}
{% load staticfiles %}
{% load comment_tags %}
{% load likes_tags %}

{% block header_extends %}
    <link rel="stylesheet" href="{% static ‘blog/blog.css‘ %}">
    <link rel="stylesheet" href="{% static ‘fontawesome-free-5.5.0-web/css/all.min.css‘ %}">

    {#  处理公式  #}
    <script src=‘https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML‘
            async></script>
    <script type="text/javascript" src="{% static "ckeditor/ckeditor-init.js" %}"></script>
    <script type="text/javascript" src="{% static "ckeditor/ckeditor/ckeditor.js" %}"></script>

{% endblock %}


{# 标题 #}
{% block title %}
    {{ blog.title }}
{% endblock %}

{# 内容#}
{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-10 offset-1">
                <ul class="blog-info-description">
                    <h3>{{ blog.title }}</h3>
                    <li>作者：{{ blog.author }}</li>
                    {# 时间过滤器让时间按照自己需要的格式过滤 #}
                    <li>发布日期：{{ blog.created_time|date:"Y-m-d H:i:s" }}</li>
                    <li>分类：
                        <a href="{% url ‘blogs_with_type‘ blog.blog_type.pk %}">
                            {{ blog.blog_type }}
                        </a>
                    </li>
                    <li>阅读({{ blog.get_read_num }})</li>
                    <li>评论({% get_comment_count blog %})</li>
                </ul>
                <div class="blog-content">{{ blog.content|safe }}</div>

                <div class="like"
                     onclick="likeChange(this,‘{% get_content_type blog %}‘,{{ blog.pk }})">
                    <i class="far fa-thumbs-up {% get_like_status blog %}"></i>
                    <span class="liked-num">{% get_like_count blog %}</span>
                    <span>喜欢</span>
                </div>

                <p>上一篇：
                    {% if previous_blog %}
                        <a href="{% url ‘blog_detail‘ previous_blog.pk %}">{{ previous_blog.title }}</a>
                    {% else %}
                        <span>没有了</span>
                    {% endif %}
                </p>
                <p>下一篇：
                    {% if next_blog %}
                        <a href="{% url ‘blog_detail‘ next_blog.pk %}">{{ next_blog.title }}</a>
                    {% else %}
                        <span>没有了</span>
                    {% endif %}
                </p>
            </div>
        </div>
        <div class="row">
            <div class="col-10 offset-1">
                <div class="comment-area">
                    <h3 class="comment-area-title">提交评论</h3>
                    {% if user.is_authenticated %}
                        <form id="comment-form" action="{% url ‘update_comment‘ %}" method="post"
                              style="overflow: hidden">
                            {% csrf_token %}
                            <label for="form-control">{{ user.username }},欢迎评论～</label>
                            <div id="reply-content-container" style="display: none;">
                                <p id="reply_title">回复：</p>
                                <div id="reply-content">

                                </div>
                            </div>
                            {% get_comment_form blog as comment_form %}
                            {% for field in comment_form %}
                                {{ field }}
                            {% endfor %}
                            <span id="comment-error" class="text-danger float-left"></span>
                            <input type="submit" value="评论" class="btn btn-primary float-right">
                        </form>
                    {% else %}
                        您尚未登录，登录之后方可评论
                        {# 提交登录的时候带上从哪里访问的路径 #}
                        <a class="btn btn-primary" href="{% url ‘login‘ %}?from={{ request.get_full_path }}">登录</a>
                        <span> or </span>
                        <a class="btn-danger btn" href="{% url ‘register‘ %}?from={{ request.get_full_path }}">注册</a>
                    {% endif %}
                </div>
                <div class="-comment-area">
                    <h3 class="comment-area-title">评论列表</h3>
                    <div id="comment-list">
                        {% get_comment_list blog as comments %}
                        {% for comment in comments %}
                            <div id="root-{{ comment.pk }}" class="comment">
                                <span>{{ comment.user.username }}</span>
                                <span>{{ comment.comment_time|date:"Y-m-d H:i:s" }}</span>
                                <div id="comment-{{ comment.pk }}">{{ comment.text|safe }}</div>
                                {# 点赞 #}
                                <div class="like"
                                     onclick="likeChange(this,‘{% get_content_type comment %}‘,{{ comment.pk }})">
                                    <i class="far fa-thumbs-up {% get_like_status comment %}"></i>
                                    <span class="liked-num">{% get_like_count comment %}</span>
                                </div>

                                <a href="javascript:reply({{ comment.pk }})">回复</a>

                                {% for reply in comment.root_comment.all %}
                                    <div class="reply">
                                        <span>{{ reply.user.username }}</span>
                                        <span>{{ reply.comment_time|date:"Y-m-d H:i:s" }}</span>
                                        <span>回复：</span><span>{{ reply.reply_to.username }}</span>
                                        <div id="comment-{{ reply.pk }}">{{ reply.text|safe }}</div>
                                        {# 点赞 #}
                                        <div class="like"
                                             onclick="likeChange(this,‘{% get_content_type reply %}‘,{{ reply.pk }})">
                                            <i class="far fa-thumbs-up {% get_like_status reply %}"></i>
                                            <span class="liked-num">{% get_like_count reply %}</span>
                                        </div>

                                        <a href="javascript:reply({{ reply.pk }})">回复</a>
                                    </div>
                                {% endfor %}
                            </div>
                        {% empty %}
                            <span id="no-comment">暂无评论</span>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>


        <!-- Modal 登录模态框 -->
        <div class="modal fade" id="login_model" tabindex="-1" role="dialog"
             aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <form id="login_model_form" action="" method="post">
                        <div class="modal-header">
                            <h5 class="modal-title">登录</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            {% csrf_token %}
                            {% for field in login_form %}
                                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                {{ field }}
                            {% endfor %}
                            <span id="login_model_tip" class="text-danger"></span>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">登录</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script>
        // 处理点赞
        function likeChange(obj, content_type, object_id) {
            let is_like = obj.getElementsByClassName(‘active‘).length === 0;


            $.ajax({
                url: "{% url ‘like_change‘ %}",
                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‘) {
                        // 更新点赞状态
                        let element = $(obj.getElementsByClassName(‘fa-thumbs-up‘));
                        if (is_like) {
                            element.addClass(‘active‘);
                        } else {
                            element.removeClass(‘active‘);
                        }
                        // 更新点赞数量
                        let like_num = $(obj.getElementsByClassName(‘liked-num‘));
                        like_num.text(data[‘liked_num‘]);

                    } else {

                        if (data[‘code‘] === 400) {
                            $(‘#login_model‘).modal(‘show‘);
                        } else {
                            alert(data[‘msg‘]);
                        }
                    }
                },
                error: function (xhr) {
                    console.log(xhr);
                }
            });
        }

        // 处理回复
        function reply(reply_comment_id) {
            $(‘#reply_comment_id‘).val(reply_comment_id);
            let html = $(‘#comment-‘ + reply_comment_id).html();

            $(‘#reply-content‘).html(html);
            $(‘#reply-content-container‘).show();  // 显示内容


            // 滚动富文本编辑器
            $(‘html‘).animate({scrollTop: $(‘#comment-form‘).offset().top - 60}, 300, function () {
                // 动画执行完毕后执行的方法
                // 让富文本编辑器获得焦点
                CKEDITOR.instances[‘id_text‘].focus();
            });
        }

        function numFormat(num) {
            return (‘00‘ + num).substr(-2);
        }

        function timeFormat(timestamp) {
            let datetime = new Date(timestamp * 1000);
            let year = datetime.getFullYear();
            let month = numFormat(datetime.getMonth() + 1);
            let day = numFormat(datetime.getDate());
            let hour = numFormat(datetime.getHours());
            let minute = numFormat(datetime.getMinutes());
            let second = numFormat(datetime.getSeconds());
            return `${year}-${month}-${day} ${hour}:${minute}:${second}`
        }

        // 提交评论
        $(‘#comment-form‘).submit(function () {
            // 获取错误框
            let comment_error = $(‘#comment-error‘);
            comment_error.text(‘‘);

            // 更新数据到textarea
            CKEDITOR.instances[‘id_text‘].updateElement();
            let comment_text = CKEDITOR.instances[‘id_text‘].document.getBody().getText().trim();
            // 判断是否为空
            if (!(CKEDITOR.instances[‘id_text‘].document.getBody().find(‘img‘)[‘$‘].length !== 0 || comment_text !== ‘‘)) {
                // 显示错误信息
                comment_error.text(‘评论内容不能为空‘);
                return false;
            }
            //异步提交
            $.ajax({
                url: "{% url ‘update_comment‘ %}",
                type: ‘POST‘,
                data: $(this).serialize(),// 序列化表单值
                cache: false, // 关闭缓存
                success: function (data) {
                    let reply_comment = $(‘#reply_comment_id‘);
                    if (data[‘status‘] === ‘SUCCESS‘) {
                        console.log(data);
                        //  插入数据
                        //  es6写法
                        let like_html = `<div class="like"
                                     onclick="likeChange(this,‘${data[‘content_type‘]}‘,${data["pk"]})">
                                    <i class="far fa-thumbs-up"></i>
                                    <span class="liked-num">0</span>
                                </div>`;
                        if (reply_comment.val() === ‘0‘) {
                            // 插入评论
                            let comment_html = `<div id="root-${data["pk"]}" class="comment">
                                <span>${data["username"]}</span>
                                <span>${timeFormat(data["comment_time"])}</span>
                                <div id="comment-${data["pk"]}">${data["text"]}</div>
                                ${like_html}
                                <a href="javascript:reply(${data["pk"]})">回复</a>
                            </div>`;

                            $(‘#comment-list‘).prepend(comment_html);

                        } else {
                            // 插入回复

                            let reply_html = `<div class="reply">
                                        <span>${data["username"]}</span>
                                        <span>${timeFormat(data["comment_time"])}</span>
                                        <span>回复：</span><span>${data["reply_to"]}</span>
                                        <div id="comment-${data["pk"]}">${data["text"]}</div>
                                        ${like_html}
                                        <a href="javascript:reply(${data["pk"]})">回复</a>
                                    </div>`;
                            $(‘#root-‘ + data[‘root_pk‘]).append(reply_html);

                        }

                        //  清空编辑框的内容
                        CKEDITOR.instances[‘id_text‘].setData(‘‘);
                        $(‘#reply-content-container‘).hide(); // 回复完隐藏掉要回复的内容
                        reply_comment.val(‘0‘); // 将回复标志重置0
                        $(‘#no-comment‘).remove(); // 如果有没回复标志，清除掉5
                        comment_error.text(‘评论成功‘);
                    } else {
                        // 显示错误信息
                        comment_error.text(data[‘message‘])
                    }
                },
                error: function (xhr) {
                    console.log(xhr);
                }
            });
            return false;
        });

        $(‘#login_model_form‘).submit(function (event) {
            $(‘#login_model_tip‘).text(‘‘);
            event.preventDefault(); // 阻止原事件提交
            $.ajax({
                url: ‘{% url ‘login_for_model‘ %}‘,
                type: ‘POST‘,
                data: $(this).serialize(),
                cache: false,
                success: function (data) {
                    if (data[‘status‘] === ‘SUCCESS‘) {
                        window.location.reload();
                    } else {
                        $(‘#login_model_tip‘).text(‘用户名或密码不正确‘)
                    }
                }
            });
        })
    </script>

    <script>
        $(".nav-blog").addClass("active").siblings().removeClass("active");
    </script>
{% endblock %}

from django.shortcuts import render, get_object_or_404
from django.core.paginator import Paginator
from django.conf import settings
from django.db.models import Count
from read_statistics.utils import read_statistics_once_read
from .models import Blog, BlogType
from myblog.forms import LoginForm


# 分页部分公共代码
def blog_list_common_data(requests, blogs_all_list):
    paginator = Paginator(blogs_all_list, settings.EACH_PAGE_BLOGS_NUMBER)  # 第一个参数是全部内容，第二个是每页多少
    page_num = requests.GET.get(‘page‘, 1)  # 获取url的页面参数（get请求）
    page_of_blogs = paginator.get_page(page_num)  # 从分页器中获取指定页码的内容

    current_page_num = page_of_blogs.number  # 获取当前页
    all_pages = paginator.num_pages
    if all_pages < 5:
        page_range = list(
            range(max(current_page_num - 2, 1),
                  min(all_pages + 1, current_page_num + 3)))  # 获取需要显示的页码 并且剔除不符合条件的页码
    else:
        if current_page_num <= 2:
            page_range = range(1, 5 + 1)
        elif current_page_num >= all_pages - 2:
            page_range = range(all_pages - 4, paginator.num_pages + 1)
        else:
            page_range = list(
                range(max(current_page_num - 2, 1),
                      min(all_pages + 1, current_page_num + 3)))  # 获取需要显示的页码 并且剔除不符合条件的页码

    blog_dates = Blog.objects.dates(‘created_time‘, ‘month‘, order=‘DESC‘)
    blog_dates_dict = {}
    for blog_date in blog_dates:
        blog_count = Blog.objects.filter(created_time__year=blog_date.year, created_time__month=blog_date.month).count()
        blog_dates_dict = {
            blog_date: blog_count
        }

    return {
        ‘blogs‘: page_of_blogs.object_list,
        ‘page_of_blogs‘: page_of_blogs,
        ‘blog_types‘: BlogType.objects.annotate(blog_count=Count(‘blog‘)),  # 添加查询并添加字段
        ‘page_range‘: page_range,
        ‘blog_dates‘: blog_dates_dict
    }


# 博客列表
def blog_list(requests):
    blogs_all_list = Blog.objects.all()  # 获取全部博客
    context = blog_list_common_data(requests, blogs_all_list)
    return render(requests, ‘blog/blog_list.html‘, context)


# 根据类型筛选
def blogs_with_type(requests, blog_type_pk):
    blog_type = get_object_or_404(BlogType, pk=blog_type_pk)
    blogs_all_list = Blog.objects.filter(blog_type=blog_type)  # 获取全部博客
    context = blog_list_common_data(requests, blogs_all_list)
    context[‘blog_type‘] = blog_type
    return render(requests, ‘blog/blog_with_type.html‘, context)


# 根据日期筛选
def blogs_with_date(requests, year, month):
    blogs_all_list = Blog.objects.filter(created_time__year=year, created_time__month=month)  # 获取全部博客
    context = blog_list_common_data(requests, blogs_all_list)
    context[‘blogs_with_date‘] = ‘{}年{}日‘.format(year, month)
    return render(requests, ‘blog/blog_with_date.html‘, context)


# 博客详情
def blog_detail(requests, blog_pk):
    blog = get_object_or_404(Blog, pk=blog_pk)
    obj_key = read_statistics_once_read(requests, blog)

    context = {
        ‘blog‘: blog,
        ‘previous_blog‘: Blog.objects.filter(created_time__gt=blog.created_time).last(),
        ‘next_blog‘: Blog.objects.filter(created_time__lt=blog.created_time).first(),
        ‘login_form‘: LoginForm(),
    }
    response = render(requests, ‘blog/blog_detail.html‘, context)
    response.set_cookie(obj_key, ‘true‘)

    return response

from django.http import JsonResponse
from django.contrib.contenttypes.models import ContentType
from .models import Comment
from .forms import CommentForm


def update_commit(requests):
    comment_form = CommentForm(requests.POST, user=requests.user)
    if comment_form.is_valid():
        comment = Comment()
        comment.user = comment_form.cleaned_data[‘user‘]
        comment.text = comment_form.cleaned_data[‘text‘]
        comment.content_object = comment_form.cleaned_data[‘content_object‘]

        parent = comment_form.cleaned_data[‘parent‘]
        if parent is not None:
            comment.root = parent.root if parent.root is not None else parent
            comment.parent = parent
            comment.reply_to = parent.user
        comment.save()
        # 返回数据
        data = {
            ‘status‘: ‘SUCCESS‘,
            ‘username‘: comment.user.username,
            ‘comment_time‘: comment.comment_time.timestamp(),  # 返回时间戳
            ‘text‘: comment.text.strip(),
            ‘reply_to‘: comment.reply_to.username if parent is not None else ‘‘,
            ‘pk‘: comment.pk,
            ‘root_pk‘: comment.root.pk if comment.root is not None else ‘‘,
            ‘content_type‘: ContentType.objects.get_for_model(comment).model,
        }

    else:
        data = {
            ‘status‘: ‘ERROR‘,
            ‘message‘: list(comment_form.errors.values())[0][0],
        }
    return JsonResponse(data)

"""myblog URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/2.1/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path(‘‘, views.home, name=‘home‘)
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path(‘‘, Home.as_view(), name=‘home‘)
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path(‘blog/‘, include(‘blog.urls‘))
"""
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
from . import views

urlpatterns = [
    path(‘‘, views.home, name=‘home‘),  # 主页路径
    path(‘admin/‘, admin.site.urls),
    path(‘ckeditor‘, include(‘ckeditor_uploader.urls‘)),  # 配置上传url
    path(‘blog/‘, include(‘blog.urls‘)),  # 博客app路径
    path(‘comment/‘, include(‘comment.urls‘)),  # 博客app路径
    path(‘likes/‘, include(‘likes.urls‘)),  # 博客app路径
    path(‘login/‘, views.login, name=‘login‘),  # 登录
    path(‘login_for_model/‘, views.login_for_model, name=‘login_for_model‘),  # 登录
    path(‘register/‘, views.register, name=‘register‘),  # 登录
]

# 设置ckeditor的上传
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

# -*- coding: utf-8 -*-
# @Time    : 18-11-7 下午4:12
# @Author  : Felix Wang

from django.shortcuts import render, redirect
from django.http import JsonResponse
from django.contrib.contenttypes.models import ContentType
from django.contrib import auth
from django.contrib.auth.models import User
from django.urls import reverse
from read_statistics.utils import get_seven_days_read_data, get_x_days_hot_data
from blog.models import Blog
from .forms import LoginForm, RegisterForm


def home(requests):
    blog_content_type = ContentType.objects.get_for_model(Blog)
    dates, read_nums = get_seven_days_read_data(blog_content_type)

    context = {
        ‘read_nums‘: read_nums,
        ‘dates‘: dates,
        ‘today_hot_data‘: get_x_days_hot_data(0),  # 获取今日热门
        ‘yesterday_hot_data‘: get_x_days_hot_data(1),  # 获取昨日热门
        ‘seven_days_hot_data‘: get_x_days_hot_data(7),  # 获取周热门
        ‘one_month_hot_data‘: get_x_days_hot_data(30),  # 获取月热门
    }
    return render(requests, ‘home.html‘, context)


def login(requests):
    # 如果是form表单提交验证登录
    if requests.method == ‘POST‘:
        login_form = LoginForm(requests.POST)
        if login_form.is_valid():  # 验证是否通过
            # 因为在form表单验证过了，所以不用自己再验证
            user = login_form.cleaned_data.get(‘user‘)
            auth.login(requests, user)
            return redirect(requests.GET.get(‘from‘, reverse(‘home‘)))
        else:
            login_form.add_error(None, ‘用户名或密码不正确‘)
    else:
        login_form = LoginForm()
    context = {
        ‘login_form‘: login_form,
    }
    return render(requests, ‘login.html‘, context)


def login_for_model(requests):
    login_form = LoginForm(requests.POST)

    # 如果是form表单提交验证登录
    if login_form.is_valid():  # 验证是否通过
        # 因为在form表单验证过了，所以不用自己再验证
        user = login_form.cleaned_data.get(‘user‘)
        auth.login(requests, user)

        data = {
            ‘status‘: ‘SUCCESS‘,
        }
    else:
        data = {
            ‘status‘: ‘ERROR‘,
        }
    return JsonResponse(data)


def register(requests):
    if requests.method == ‘POST‘:
        reg_form = RegisterForm(requests.POST)
        if reg_form.is_valid():
            username = reg_form.cleaned_data[‘username‘]
            email = reg_form.cleaned_data[‘email‘]
            password = reg_form.cleaned_data[‘password‘]

            # 创建用户
            user = User.objects.create_user(username=username, email=email, password=password)
            user.save()

            # 登录用户
            user = auth.authenticate(username=username, password=password)
            auth.login(requests, user)
            # 登录之后跳转
            return redirect(requests.GET.get(‘from‘, reverse(‘home‘)))
    else:
        reg_form = RegisterForm()

    context = {
        ‘reg_form‘: reg_form,
    }
    return render(requests, ‘register.html‘, context)