博客系统|文章详情页、评论、评论树

1、简单的实现评论功能

article_detail.html,拿到数据由路--给视图函数--写入数据库

  <p>评论内容:</p>
        <textarea name="" id="comment_content" cols="60" rows="10"></textarea>
        <p>
            <button class="btn btn-default comment_btn">提交评论</button>
        </p>

url
path("comment/", views.comment),

 <script>
        $('.comment_btn').click(function () {
            {#根评论#}
            var pid='';
            var content=$('#comment_content').val();
            $.ajax({
                url:'/comment/',
                type:'post',
                data:{  "csrfmiddlewaretoken": $("[name='csrfmiddlewaretoken']").val(),
                'article_id':'{{ article_obj.pk }}','content':content ,'pid':pid},
                success:function (data) {
                    console.log(data)
                }

            })
        })

---

def comment(request):
    """
    提交评论视图函数
    功能:
    1 保存评论
    2 创建事务
    3 发送邮件
    :param request:
    :return:
    """
    print(request.POST)

    article_id = request.POST.get("article_id")
    pid = request.POST.get("pid")
    content = request.POST.get("content")
    user_id = request.user.pk
    comment_obj=models.Comment.objects.create(user_id=user_id,article_id=article_id,content=content,parent_comment_id=pid)

评论之后--清空评论框

显示根评论的两种方法

1、render显示根评论

---

class="list-group

article_detail.html

 <p>评论列表</p>
        <ul class="list-group comment_list">
            {% for comment in comment_list %}
                <li class="list-group-item">
                    <div>
                        <a href=""># {{ forloop.counter }}楼</a> &nbsp;&nbsp;
                        <span>{{ comment.create_time|date:"Y-m-d H:i" }}</span>&nbsp;&nbsp;
                        <a href=""><span>{{ comment.user.username }}</span></a>
                        <a class="pull-right reply_btn" username="{{ comment.user.username }}"
                           comment_pk="{{ comment.pk }}">回复</a>
                    </div><div class="comment_con">
                        <p>{{ comment.content }}</p>
                    </div>
                </li>
            {% endfor %}
        </ul>

2、ajax显示评论:es6 模板字符串

上一种方法评论后刷新才显示---用ajax评论就显示

success:function (data) {
                    console.log(data);

                    var create_time = data.create_time;
                    var username=data.username;
                    var content=data.content;

                    // 构建标签字符串 es6语法
                     var s = `
                           <li class="list-group-item">
                              <div>

                                  <span>${create_time}</span>&nbsp;&nbsp;
                                  <a href=""><span>${username}</span></a>

                              </div>
                              <div class="comment_con">
                                  <p>${content}</p>
                              </div>

                            </li>`;

                        $("ul.comment_list").append(s);

def comment():

 response={}
    response['create_time']=comment_obj.create_time.strftime("%Y-%m-%d %X")
    response['username']=request.user.username
    response['content']=content

　　return JsonResponse(response)

根评论

{#    评论#}
    <div class="comments list-group">
        <p class="tree_btn">评论树</p>
        <div class="comment_tree">
        </div>
        <p>评论列表</p>
        <ul class="list-group comment_list">
            {% for comment in comment_list %}
                <li class="list-group-item">
                    <div>
                        <a href=""># {{ forloop.counter }}楼</a>   
                        <span>{{ comment.create_time|date:"Y-m-d H:i" }}</span>  
                        <a href=""><span>{{ comment.user.username }}</span></a>
                        <a class="pull-right reply_btn" username="{{ comment.user.username }}"
                           comment_pk="{{ comment.pk }}">回复</a>
                    </div>

                    {% if comment.parent_comment_id %}
                        <div class="pid_info well">
                            <p>
                                {{ comment.parent_comment.user.username }}: {{ comment.parent_comment.content }}
                            </p>
                        </div>
                    {% endif %}
                    <div class="comment_con">
                        <p>{{ comment.content }}</p>
                    </div>
                </li>
            {% endfor %}
        </ul>
        <p>发表评论</p>
        <p>昵称：<input type="text" id="tbCommentAuthor" class="author" disabled="disabled" size="50"
                     value="{{ request.user.username }}">
        </p>
        <p>评论内容:</p>
        <textarea name="" id="comment_content" cols="60" rows="10"></textarea>
        <p>
            <button class="btn btn-default comment_btn">提交评论</button>
        </p>
    </div>

    <script>
        $('.comment_btn').click(function () {
            {#根评论#}
            var pid='';
            var content=$('#comment_content').val();
            $.ajax({
                url:'/comment/',
                type:'post',
                data:{  "csrfmiddlewaretoken": $("[name='csrfmiddlewaretoken']").val(),
                'article_id':'{{ article_obj.pk }}','content':content ,'pid':pid},
                success:function (data) {
                    console.log(data);

                    var create_time = data.create_time;
                    var username=data.username;
                    var content=data.content;

                    // 构建标签字符串 es6语法
                     var s = `
                           <li class="list-group-item">
                              <div>

                                  <span>${create_time}</span>  
                                  <a href=""><span>${username}</span></a>

                              </div>
                              <div class="comment_con">
                                  <p>${content}</p>
                              </div>

                            </li>`;

                        $("ul.comment_list").append(s);



                    // 传回数据后，清空评论框中的内容
                    $('#comment_content').val('');
                }

            })
        })
    </script>

3、子评论

  // 回复按钮事件
        $('.reply_btn').click(function () {
            $('#comment_content').focus();
            // 找父评论
            var val='@'+$(this).attr('username')+'\n';
            $('#comment_content').val(val)
        })

提交子评论

根评论和子评论看是否点击回复

对样式进行改进

子评论对内容进行处理

清空pid

# indexOf()
定义和用法
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
语法
stringObject.indexOf(searchvalue,fromindex)

# slice()
定义和用法
slice() 方法可从已有的数组中返回选定的元素。
语法
arrayObject.slice(start,end)

博客系统之render显示子评论

  {% if comment.parent_comment_id %}
                        <div class="pid_info well">
                            <p>
                                {{ comment.parent_comment.user.username }}: {{ comment.parent_comment.content }}
                            </p>
                        </div>
                    {% endif %}

博客系统之Ajax显示子评论的思路

4、评论树

1、评论树简介

1、方式1：递归完成

2、方式2：评论树展示数据

2、评论树的请求数据

{#    评论#}
    <div class="comments list-group">
        <p class="tree_btn">评论树</p>
        <div class="comment_tree">
        </div>
      {#-------评论树-------#}
        <script>

                 $.ajax({
                        url: "/get_comment_tree/",
                        type: "get",
                        data: {
                            article_id: "{{ article_obj.pk }}"
                        },
                        success: function (comment_list) {
                            console.log(comment_list);

                            $.each(comment_list, function (index, comment_object) {

                                var pk = comment_object.pk;
                                var content = comment_object.content;
                                var parent_comment_id = comment_object.parent_comment_id;
                                var s = '<div class="comment_item" comment_id=' + pk + '><span>' + content + '</span></div>';

                                if (!parent_comment_id) {

                                    $(".comment_tree").append(s);
                                } else {
                                    $("[comment_id=" + parent_comment_id + "]").append(s);
                                }
                            })
                        }
                    })
            </script>

视图函数

def get_comment_tree(request):
    article_id=request.GET.get('article_id')
    ret=list(models.Comment.objects.filter(article_id=article_id).values('pk','content','parent_comment_id'))
    return JsonResponse(ret,safe=False)

-----

function (index, comment_object)
函数中两个参数对应下图中的，一个索引，循环的元素对象

博客系统之评论事务操作

 # 事务 from django.db import transaction
    with transaction.atomic():
        comment_obj=models.Comment.objects.create(user_id=user_id,article_id=article_id,content=content,parent_comment_id=pid)
        # 数据同步 F比较两个字段
        models.Article.objects.filter(pk=article_id).update(comment_count=F('comment_count')+1)

博客系统之评论的邮件发送new

别人对你的博客评论或者对你的评论进行评论，博客发邮件给你

django中配置邮件

https://blog.csdn.net/xinxinnogiveup/article/details/78900811

https://code.ziqiangxuetang.com/django/django-send-email.html

1、settings配置

# 发送邮件
EMAIL_USE_SSL = True
# EMIAL_HOST = 'smtp.exmail.qq.com'       # 如果是163 改成smtp.163.com
EMAIL_HOST = 'smtp.qq.com'  # 如果是 163 改成 smtp.163.com
EMAIL_PORT = 465            # 163的端口号是25
EMAIL_HOST_USER = 'xxxxxxxx@qq.com'        # 账号
EMAIL_HOST_PASSWORD = 'oXXXXXxxxxx'    # qq邮箱的授权码而不是密码
DEFAULT_FROM_EMAIL = EMAIL_HOST_USER

 # 发邮件
    from  django.core.mail import send_mail
    from cnblog import settings
    send_mail('您的文章%s新增了一条内容' % article_obj.title,content,
                                                 settings.EMAIL_HOST_USER,
                                                 ["xxxxxxx@qq.com"])

加线程代码优化

# 发邮件
    from django.core.mail import send_mail
    from cnblog import settings
    import threading
    t=threading.Thread(target=send_mail,args=('您的文章%s新增了一条内容' % article_obj.title,content,
                                                 settings.EMAIL_HOST_USER,
                                                 ["836342406@qq.com"]))
    t.start()

整体代码

url

# 点赞
    path('digg/',views.digg),

    path("comment/", views.comment),
    # 获取评论树相关数据
    path("get_comment_tree/", views.get_comment_tree),



    # media
    re_path(r'media/(?P<path>.*)$',serve,{'document_root':settings.MEDIA_ROOT}),

    # 文章详情页
    # re_path('(?P<username>\w)/(?P<article_id>\d+)$',views.article_detail),
    re_path('^(?P<username>\w+)/articles/(?P<article_id>\d+)$', views.article_detail),

    # 关于个人站点的url
    re_path("^(?P<username>\w+)/$", views.home_site),  # home_site(reqeust,username="yuan")
    #个人站点下的跳转
    re_path('^(?P<username>\w+)/(?P<condition>tag|category|archive)/(?P<param>.*)/$', views.home_site),
    # home_site(reqeust,username="yuan",condition='tag',param='python')

settings

LANGUAGE_CODE = 'en-us'


# 时区选择
# TIME_ZONE = 'UTC'
TIME_ZONE = 'Asia/Shanghai'

USE_I18N = True

USE_L10N = True

# 转换时区
# USE_TZ = True
USE_TZ = False



# 发送邮件
EMAIL_USE_SSL = True
# EMIAL_HOST = 'smtp.exmail.qq.com'       # 如果是163 改成smtp.163.com
EMAIL_HOST = 'smtp.qq.com'  # 如果是 163 改成 smtp.163.com
EMAIL_PORT = 465
EMAIL_HOST_USER = '@qq.com'        # 账号
EMAIL_HOST_PASSWORD = 'xxxxxx'    # qq邮箱的授权码而不是密码
DEFAULT_FROM_EMAIL = EMAIL_HOST_USER

view视图

from django.shortcuts import render

# Create your views here.
from django.shortcuts import render, HttpResponse,redirect

# Create your views here.
# 用户认证模块
from django.contrib import auth
from django.http import JsonResponse
from blog.Myforms import UserForm
from blog.models import UserInfo
from blog import models
import json
from django.db.models import F
from django.db import transaction
from django.http import JsonResponse
from django.db.models import Avg, Max, Min, Sum, Count
from django.db import transaction
def login(request):
    if request.method == 'POST':
        response = {'user': None, 'msg': None}
        user = request.POST.get('user')
        pwd = request.POST.get('pwd')
        # 读取验证码
        valid_code = request.POST.get('valid_code')
        # 回话跟踪技术，保存验证码
        valid_code_str = request.session.get('valid_code_str')
        # 如果书写的验证码和生成的验证码一致
        # 不区分大小写---可以统一变成大写
        if valid_code.upper() == valid_code_str.upper():
            user = auth.authenticate(username=user, password=pwd)
            if user:
                auth.login(request, user)  # request.user==当前登录对象
                response['user'] = user.username
            else:
                response['msg'] = 'username or password error'
        else:
            response['msg'] = 'valid code error!'
        return JsonResponse(response)
    # ajax返回一个响应字符串
    return render(request, 'login.html')

# 随机验证码
def get_validCode_img(request):
    from blog.utils.validCode import get_valid_Code_img
    data = get_valid_Code_img(request)
    return HttpResponse(data)


def index(request):
    article_list=models.Article.objects.all()
    return render(request, 'index.html', locals())

def register(request):
    # 实例化 form 对象

    if request.is_ajax():
        print(request.POST)
        # 对传来的数据进行验证
        form = UserForm(request.POST)
        response = {'user': None, 'msg': None}
        if form.is_valid():
            response['user'] = form.cleaned_data.get('user')
            # 注册成功要把数据添加进数据库
            # 生成一条用户记录
            user = form.cleaned_data.get('user')
            pwd = form.cleaned_data.get('pwd')
            email = form.cleaned_data.get('email')
            avatar_obj = request.FILES.get('avatar')
            # if avatar_obj:
            #     user_obj = UserInfo.objects.create_user(username=user, password=pwd, email=email, avatar=avatar_obj)
            # else:
            #     user_obj = UserInfo.objects.create_user(username=user, password=pwd, email=email)
            extra = {}
            if avatar_obj:
                extra["avatar"] = avatar_obj

            UserInfo.objects.create_user(username=user, password=pwd, email=email, **extra)


        else:
            print(form.cleaned_data)
            print(form.errors)
            response['msg'] = form.errors
            # 返回给Ajax
        return JsonResponse(response)
    form = UserForm()
    return render(request, 'register.html', locals())

def logout(request):
    # request.session.flush()
    auth.logout(request)
    return redirect('/login/')



def get_classification_data(username):
    user_obj = models.UserInfo.objects.filter(username=username).first()
    blog = user_obj.blog
    cate_list = models.Category.objects.filter(blog=blog).values('pk').annotate(c=Count('article__title')).values_list(
        'title', 'c')
    tag_list = models.Tag.objects.filter(blog=blog).values('pk').annotate(count=Count('article')).values_list('title',
                                                                                                              'count')
    date_list = models.Article.objects.filter(user=user_obj).extra(
        select={'y_m_date': "date_format(create_time,'%%Y-%%m')"}).values('y_m_date').annotate(
        c=Count('nid')).values_list('y_m_date', 'c')
    return {"blog": blog, "cate_list": cate_list, "date_list": date_list, "tag_list": tag_list}

def home_site(request,username,**kwargs):
    '''
    个人站点视图函数
    :param request:
    :return:
    '''
    user_obj=models.UserInfo.objects.filter(username=username).first()

    # 判断用户是否存在
    if not user_obj:
        return render(request,'not_found.html')
    blog = user_obj.blog
    print(blog)

    # 当前用户或者当前站点所对应文章

    # 方式一基于对象查询
    # 作者和文章的关系---> 一对多(文章)
    # article_list=user_obj.article_set.all()
    # 方式二 基于双下划线 __ 跨表查询
    article_list=models.Article.objects.filter(user=user_obj)
    # 判断是否跳转到其他地方
    # re_path("^(?P<username>\w+)/(?P<condition>tag|category|archive)/(?P<param>.*)/$", views.home_site),
    if kwargs:
        condition = kwargs.get("condition")  # 标签\分类\归档
        param = kwargs.get("param")  # 具体的哪一个
        if condition == "category":
            article_list = article_list.filter(category__title=param)
        elif condition == "tag":
            article_list = article_list.filter(tags__title=param)
            print(article_list)
        else:
            year, month = param.split('-')
            print(year, month)
            article_list = article_list.filter(create_time__year=year,create_time__month=month)
            print(article_list)



    # 查询每一个分类名称以及对应的文章数
    # annotate(聚合函数(关联表__统计字段)).values("表模型的所有字段以及统计字段")
    # values('group by的字段')
    # ret=models.Category.objects.values('pk').annotate(c=Count('article__title')).values('title','c')
    # print(ret)

    # 查询当前站点的每一个分类名称以及对应的文章数
    cate_list=models.Category.objects.filter(blog=blog).values('pk').annotate(c=Count('article__title')).values_list('title','c')
    print(cate_list)

    # 每一个标签以及对应得文章数
    tag_list=models.Tag.objects.filter(blog=blog).values('pk').annotate(count=Count('article')).values_list('title','count')
    print('tag_list',tag_list)

    # 单表分组查询
    # 查询当前站点每一个年月的名称以及对应的文章数
    # 方式一
    date_list = models.Article.objects.filter(user=user_obj).extra(
        select={'y_m_date': "date_format(create_time,'%%Y-%%m')"}).values('y_m_date').annotate(
        c=Count('nid')).values_list('y_m_date', 'c')
    print(date_list)

    # 方式二
    from django.db.models.functions import TruncMonth
    #
    # date_list=models.Article.objects.filter(user=user_obj).annotate(month=TruncMonth('create_time')).values('month').annotate(c=Count('nid')).values_list('month','c')
    # print(date_list)

    return render(request, "home_site.html", locals())


def article_detail(request,username,article_id):
    user_obj = models.UserInfo.objects.filter(username=username).first()
    blog = user_obj.blog
    cate_list = models.Category.objects.filter(blog=blog).values('pk').annotate(c=Count('article__title')).values_list(
        'title', 'c')
    tag_list = models.Tag.objects.filter(blog=blog).values('pk').annotate(count=Count('article')).values_list('title',
                                                                                                              'count')
    date_list = models.Article.objects.filter(user=user_obj).extra(
        select={'y_m_date': "date_format(create_time,'%%Y-%%m')"}).values('y_m_date').annotate(
        c=Count('nid')).values_list('y_m_date', 'c')

    article_obj = models.Article.objects.filter(pk=article_id).first()
    comment_list = models.Comment.objects.filter(article_id=article_id)
    return render(request, "article_detail.html", locals())
#     {'context':context,'blog':blog,'article_obj':article_obj,'comment_list':comment_list}


def digg(request):
    print(request.POST)
    article_id=request.POST.get('article_id')
    # is_up=request.POST.get('is_up') # 字符串
    is_up=json.loads(request.POST.get('is_up')) # 字符串
    # 点赞人即当前登录人
    user_id=request.user.pk

    # 重复点赞和反对--都无效
    obj=models.ArticleUpDown.objects.filter(user_id=user_id,article_id=article_id).first()
    response={'state':True,'msg':None}
    if not obj:
        ard=models.ArticleUpDown.objects.create(user_id=user_id,article_id=article_id,is_up=is_up)
        queryset= models.Article.objects.filter(pk=article_id)
        if is_up:
            queryset.update(up_count=F('up_count')+1)
        else:
            queryset.update(down_count=F('up_count')+1)

    else:
        response['state']=False
        response['handled']=obj.is_up
    return JsonResponse(response)

def comment(request):
    """
    提交评论视图函数
    功能:
保存评论
创建事务
发送邮件
    :param request:
    :return:
    """
    print(request.POST)

    article_id = request.POST.get("article_id")
    pid = request.POST.get("pid")
    content = request.POST.get("content")
    user_id = request.user.pk

    article_obj=models.Article.objects.filter(pk=article_id).first()
    # 事务 from django.db import transaction
    with transaction.atomic():
        comment_obj=models.Comment.objects.create(user_id=user_id,article_id=article_id,content=content,parent_comment_id=pid)
        # 数据同步 F比较两个字段
        models.Article.objects.filter(pk=article_id).update(comment_count=F('comment_count')+1)

    response={}
    response['create_time']=comment_obj.create_time.strftime("%Y-%m-%d %X")
    response['username']=request.user.username
    response['content']=content

    # 发邮件
    from django.core.mail import send_mail
    from cnblog import settings
    import threading
    t=threading.Thread(target=send_mail,args=('您的文章%s新增了一条内容' % article_obj.title,content,
                                                 settings.EMAIL_HOST_USER,
                                                 ["836342406@qq.com"]))
    t.start()

    return JsonResponse(response)


def get_comment_tree(request):
    article_id=request.GET.get('article_id')
    ret=list(models.Comment.objects.filter(article_id=article_id).values('pk','content','parent_comment_id'))
    return JsonResponse(ret,safe=False)