标签：comment content 详情页 let nbsp article BBS id 搭建

博客评论相关

博客文章详情页搭建

{% extends 'base.html' %}
{% block css %}
    <style>
        #div_digg {
            float: right;
            margin-bottom: 10px;
            margin-right: 30px;
            font-size: 12px;
            width: 125px;
            text-align: center;
            margin-top: 10px;
        }

        #div_digg .diggnum {
            line-height: 1.5em !important;
        }

        .diggit {
            float: left;
            width: 46px;
            height: 52px;
            background: url(/static/img/up.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/down.gif) no-repeat;
            text-align: center;
            cursor: pointer;
            margin-top: 2px;
            padding-top: 5px;
        }

        .clear {
            clear: both;
        }

        #div_digg .diggnum {
            line-height: 1.5em !important;
        }

        .diggword {
            margin-top: 5px;
            margin-left: 0;
            font-size: 12px;
            color: gray;
        }
    </style>
{% endblock %}


{% block right_content %}
    {#    文章及标题开始    #}
    <h3>{{ article_obj.title }}</h3>
    {{ 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">
            </div>
        </div>
    </div>
    {#    点赞点踩结束    #}
    {#    评论楼开始    #}
    <div><h4>评论</h4></div>
    {% for comment in comment_list %}
        <hr>
        <div>
            <span>#{{ forloop.counter }}楼&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span><span class="glyphicon glyphicon-time"></span>&nbsp;{{ comment.comment_time|date:'Y-m-d' }}&nbsp;&nbsp;&nbsp;&nbsp;</span>
            <span><span class="glyphicon glyphicon-user"></span>&nbsp;<a href="/{{ comment.user }}/">{{ comment.user }}</a></span>
            <span class="pull-right reply " id="id_reply"  username="{{ comment.user.username }}" comment_id="{{ comment.pk }}"><span class="glyphicon glyphicon-comment"></span>&nbsp;<a >回复</a></span>
        </div>
        <div>

        {% if comment.parent %}
            <div>@{{ comment.parent.user.username }}</div>
        {% endif %}
            <div>{{ comment.content }}</div>
        </div>
    {% endfor %}
    <div class="linshi_comment"></div>


    {#    评论楼结束    #}
    {#    评论输入 开始  #}
    <hr>
    <div><span class="glyphicon glyphicon-comment"></span>&nbsp;&nbsp;&nbsp;发表评论</div>

    <div style="margin-top: 20px">
        <span class="glyphicon glyphicon-user"></span>
        <span>&nbsp;&nbsp;&nbsp;昵称:&nbsp;&nbsp;&nbsp;{{ request.user.username }}</span>
    </div>
    <div style="margin-top: 20px">
        <span>评论内容:</span>
    </div>
    <div>
        <textarea name="comment" id="id_comment" cols="60" rows="10"></textarea>

    </div>
    <button class="btn btn-primary" id="id_submit_comment" style="margin-left: 400px; margin-top: 20px">提交</button>

    {#    评论输入结束   #}
{% endblock %}


{% block js %}
    <script>
        // 点赞点踩 点击事件绑定
        $('.action').click(function () {
            let isUp = $(this).hasClass('diggit');
            let $info = $('#digg_tips');
            let $span = $(this).children();
            $.ajax({
                url: "/up_or_down/",
                type: 'post',
                data: {
                    'article_id':{{ article_obj.pk }},
                    'is_up': isUp,
                    'csrfmiddlewaretoken': '{{ csrf_token }}',
                },
                success: function (data) {
                    if (data.code == 200) {
                        console.log(data);
                        $info.html(data.msg);
                        //将span标签内的文本加1
                        $span.text(Number($span.text() + 1))
                    }
                    else {
                        $info.html(data.msg)
                    }
                }
            })
        });
        //{#评论js开始#}
        // 先定义一个全局的 parent
        let parentId='';
        $('#id_submit_comment').click(function () {
            // 获取textarea 文本内容
            let $comment_content = $('#id_comment').val();
            //判断parentId 是否有值，有值则进行切分
            if (parentId){
                // 获取切分的索引（切分的时候 顾头不顾尾，所以需要加1）
                let indexVal = $comment_content.indexOf('\n')+1;
                $comment_content=$comment_content.slice(indexVal);
            }
            // 发送ajax请求
            $.ajax({
                url: '/comment/',
                type: 'post',
                data: {
                    'article_id': '{{ article_id }}',
                    'comment_content': $comment_content,
                    'csrfmiddlewaretoken': '{{ csrf_token }}',
                    'parent_id': parentId
                },
                success: function (data) {
                    // 将新的评论临时渲染到前端页面
                    if (data.code == 100) {
                        let userName = '{{ request.user.username }}';
                        let commentConent = $comment_content;
                        //此处用的是前端的模板语言的替换
                        let tempStr = `
                        <div>
                            <hr>
                            <span><span class="glyphicon glyphicon-user"></span>&nbsp;<a         href="/${userName}/">${userName}</a></span>
                            <p>${commentConent}</p>
                        </div>
                    `;
                        // 查找url标签，添加子元素
                        $('.linshi_comment').append(tempStr);
                        // 将textarea文本框清空
                        $('#id_comment').val('');
                    }
                }
            })

        });
        // 回复父评论信息
        $('.reply').click(function () {
            // 把你想评论的那条评论的任命自动添加到 textarea 文本中去
            let pUserName=$(this).attr('username');
            let pCommentId=$(this).attr('comment_id');
            // 自动换行
            $('#id_comment').val('@'+pUserName+'\n');
            // 聚焦到评论文本框
            $('#id_comment').focus();
            //给parent_id 赋值
            parentId=pCommentId;
        });
    </script>
{% endblock %}

博客详情页后端视图函数

# 将博客文章内容 以及评论的列表传导前端

# url.py 中的对应路由
url(r'^(?P<username>\w+)/article/(?P<article_id>\d+)',views.article_detail)

# views.py
def article_detail(request, username, article_id):
    # 从数据库中查找文章对象
    article_obj = models.Article.objects.filter(pk=article_id).first()
    # 查找当前用户对象  
    user_obj = models.UserInfo.objects.filter(username=username).first()
    # 查找评论的queryset对象
    comment_list= models.Comment.objects.filter(article_id=article_id)
    return render(request, 'article_detail.html', locals())

# 评论 视图函数 路由  
url('/comment/',views.comment)

# views.py
def comment(request):
    back_dic = {'code': 100, 'msg': ''}
    if request.is_ajax():
        article_id = request.POST.get('article_id')
        comment_content = request.POST.get('comment_content')
        parent_id = request.POST.get('parent_id')
        print('article_id', article_id)
        print('comment', comment_content)
        # 1.先校验当前用户是否已经登录
        if request.user.is_authenticated():
            # 开启事务操作   // from django.db import transaction
            with transaction.atomic():
                # 1.在文章表中将普通字段加1
                models.Article.objects.filter(pk=article_id).update(comment_num=F('comment_num') + 1)
                # 2.在评论表中将存储真正的数据
                models.Comment.objects.create(article_id=article_id, user=request.user, content=comment_content,parent_id=parent_id)
                back_dic['msg'] = '评论成功'
        else:
            back_dic['code'] = 101
            back_dic['msg'] = '请先登录'
    return JsonResponse(back_dic)

标签：comment,content,详情页,let,nbsp,article,BBS,id,搭建
来源： https://www.cnblogs.com/qianzhengkai/p/11079959.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。