BBS_02day

目录

• BBS_02day:
  • 展示个人所有文章：
  • 点赞，点彩功能：
  • 评论功能:

BBS_02day:

展示个人所有文章：

def article_detail(request,username,article_id):
    # 将文章查询出来
    article_obj = models.Article.objects.filter(pk=article_id).first()
    blog = article_obj.blog
    # 还应该获取当前文章所有的评论信息
    comment_list = models.Comment.objects.filter(article=article_obj)
    if not article_obj: #没有则404
        return render(request,'error.html')
    return render(request,'article_detail.html',locals())

点赞，点彩功能：

import json
from django.db.models import F
from django.utils.safestring import mark_safe
def updown(request):
    if request.is_ajax():
        if request.method == 'POST':
            back_dic = {'code':1000,'msg':''}
            is_up = request.POST.get('is_up')  # 是一个字符串格式的json数据
            article_id = request.POST.get('article_id')
            is_up = json.loads(is_up)  # 将json格式的字符串数据转成python对应的数据类型
            # print(is_up,type(is_up))
            """
            点赞点踩业务逻辑
                1.判断当前用户是否登录
                2.当前这篇文章是否是当前用户自己写的
                3.当前这篇文章用户是否已经点过
                4.操作数据库 完成数据修改
                    1.点赞点踩添加数据的时候
                    2.文章表里面对应的普通字段也得修改
            """
            # 1.判断当前用户是否登录
            if request.user.is_authenticated():
                # 2.当前这篇文章是否是当前用户自己写的
                article_obj = models.Article.objects.filter(pk=article_id).first()
                if not article_obj.blog.userinfo == request.user:
                    # 3.当前这篇文章用户是否已经点过
                    is_click = models.UpAndDown.objects.filter(user=request.user,article=article_obj).exists()
                    if not is_click:
                        # 操作数据库 完成数据修改
                        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'] = 2000
                        back_dic['msg'] = '你已经点过了不能在点了'
                else:
                    back_dic['code'] = 3000
                    back_dic['msg'] = '你个臭不要脸的 不能给自己点'

            else:
                back_dic['code'] = 4000
                back_dic['msg'] = mark_safe('请先<a href="/login/">登录</a>')  #后端直接与前端交互
            return JsonResponse(back_dic)

评论功能:

from django.db import transaction

def comment(request):
    if request.is_ajax():
        if request.method == 'POST':
            back_dic = {'code':1000,'msg':''}
            article_id = request.POST.get('article_id')
            content = request.POST.get('content')
            # parent_id如果有值那么正常存储 如果没有值也无所谓就存空 也符合要求
            parent_id = request.POST.get('parent_id')
            with transaction.atomic():
                models.Comment.objects.create(user=request.user,article_id=article_id,content=content,parent_id=parent_id)
                models.Article.objects.filter(pk=article_id).update(comment_num = F('comment_num') + 1)  #F（）： 变量动态值的运算
                back_dic['msg'] = '评论成功'
            return JsonResponse(back_dic)

页面展示：

#article_detail.html

{% extends 'base.html' %}

{% block css %}
    <style>
        #div_digg {
            float: right;
            margin-bottom: 10px;
            margin-right: 30px;
            font-size: 12px;
            width: 128px;
            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 %}
{% block content %}
    <div>
        <h2>{{ article_obj.title }}</h2>
        {{ article_obj.content|safe }}

        {#    点赞点踩样式开始 #}
        <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">
                    <span class="info" style="color: red"></span>
                </div>
            </div>
        </div>
        {#    点赞点踩样式结束 #}

        {#    评论楼渲染#}
        <div>
            <ul class="list-group">
                {% for comment in comment_list %}
                    {#                    #15楼 2019-11-08 20:03 蔡彦辉的博客#}
                    <li class="list-group-item">
                        <span><a href="#">#{{ forloop.counter }}楼</a></span>
                        <span>{{ comment.create_time|date:'Y-m-d' }}</span>
                        <span><a href="/{{ comment.user.username }}/">{{ comment.user.username }}</a></span>
                        <span><a class="reply pull-right" username="{{ comment.user.username }}" comment_id="{{ comment.pk }}">回复</a></span>
                        <div>
                            {% if comment.parent %}
                                <p>@{{ comment.parent.user.username }}</p>
                            {% endif %}
                            {{ comment.content }}
                        </div>
                    </li>
                {% endfor %}
            </ul>
        </div>

        {#    评论开始#}
        {% if request.user.is_authenticated %}
            <div>
                <p>发表评论</p>
                <p>
                    昵称：<input type="text" id="tbCommentAuthor" class="author" disabled="disabled" size="50"
                              value="{{ request.user.username }}">
                </p>
                <p>评论内容:</p>
                <p>
                    <textarea name="comment" id="id_comment" cols="60" rows="10"></textarea>
                </p>
                <button class="btn btn-primary" id="id_submit">提交评论</button>
            </div>
        {% else %}
            <p><a href="{% url 'login' %}">登录</a>&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="{% url 'register' %}">注册</a></p>

        {% endif %}

        {#    评论结束#}

    </div>

    <script>
        // 点赞点踩
        $('.action').click(function () {
            let isUp = $(this).hasClass('diggit');
            let $target = $(this);
            $.ajax({
                url: '/up_down/',
                type: 'post',
                data: {
                    'csrfmiddlewaretoken': '{{ csrf_token }}',
                    'is_up': isUp,
                    'article_id': "{{ article_obj.pk }}"
                },
                success: function (data) {
                    if (data.code == 1000) {
                        // 给span标签渲染信息
                        $('.info').text(data.msg);
                        // 点赞或点踩成功之后 应该将前端的数字也加一
                        let $span = $target.children();
                        let oldNum = $span.text();
                        $span.text(Number(oldNum) + 1)  // 转整型相加 不然就是字符串拼接了
                    } else {
                        $('.info').text(data.msg)
                    }
                }
            })
        });
        // 评论
        // 提前定义一个全局变量parentId
        let parentId = null;
        $('#id_submit').click(function () {
            // 判断全局的parentid是否有值 如果有 你应该将前面的@人名\n切除
            let content =  $('#id_comment').val();
            if (parentId){
                // 获取\n所在的索引值
                let nIndex = content.indexOf('\n') + 1;  // 索引顾头不顾尾 加一才能切到
                // 按照nIndex切换文本内容
                content = content.slice(nIndex)  // 将nIndex之前的内容直接去除  保留之后的内容

            }

            $.ajax({
                url: '/comment/',
                type: 'post',
                data: {
                    'csrfmiddlewaretoken': '{{ csrf_token }}',
                    'content':content,
                    'article_id': '{{ article_obj.pk }}',
                    'parent_id':parentId
                },
                success: function (data) {
                    if (data.code == 1000){
                        // 临时渲染
                        let userName = '{{ request.user.username }}';
                        let content =  $('#id_comment').val();
                        let tmp = `
                        <li class="list-group-item">
                        <span><span class="glyphicon glyphicon-comment"></span><a href="/${ userName}/">${userName}:</a></span>
                        <p>
                            ${content}
                        </p>
                    </li>

                        `;
                        // 将生成好的内容添加到ul标签内部
                        $('.list-group').append(tmp);
                        // 将评论框中的内容清空
                        $("#id_comment").val('');
                        // 将全局的parentid再制成空null
                        parentId = null;
                    }
                }
            })
        });
        // 点击回复按钮
        $('.reply').on('click',function () {
            // 如何获取想要评论的那条评论人的姓名
            let userName = $(this).attr('username');
            // 如何获取要评论的那条评论的主键值
            parentId = $(this).attr('comment_id');  // 赋值给全局的parentId
            // 回复按钮的三件事
            let headerMsg = '@' + userName + '\n';
            $('#id_comment').val(headerMsg);
            $('#id_comment').focus();  // 让评论框自动聚焦

        })
    </script>
{% endblock %}