码迷,mamicode.com
首页 > 其他好文 > 详细

Django 项目试炼blog(7) -- 文章详情页2 -- 前端样式的继承与楼评论显示

时间:2019-04-27 00:24:15      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:values   type   str   pen   item   __user   log   dex   col   

views

from django.db import transaction
def comment(request):
    article_id = request.POST.get(article_id)
    content = request.POST.get(content)
    pid = request.POST.get(parent_id)

    #事务操作 生成评论,文章数据中评论总数自动+1(同时执行)
    with transaction.atomic():
        comm_obj = Comment.objects.create(user_id=request.user.pk,content=content,article_id=article_id,parent_comment_id=pid)
        Article.objects.filter(pk=article_id).update(comment_count=F(comment_count)+1)

    send_info = {}
    # create_time:<class ‘datetime.datetime‘>   json序列化无法对对象进行序列换
    send_info[create_time] = comm_obj.create_time.strftime("%Y-%m-%d %X")
    send_info[username] =request.user.username
    send_info[content] = comm_obj.content
    if pid:
        # 如果有父评论
        parent_obj_name =Comment.objects.filter(pk=pid).values(user__username).first()
        send_info[parent_name] = parent_obj_name[user__username]
        parent_obj = Comment.objects.filter(pk=pid).first()
        send_info[parent_content] = parent_obj.content

    return JsonResponse(send_info)

 

 


HTML

HTML中的母版样式
.....
{% block name %}  

{% endblock %}

 

继承模板
{% extends ‘base.html‘ %}
{% block name %}

新填的内容(html,css,jquery)

{% endblock %}

 

<div class="comment_box">
            <ul class="list-group" id="comm_list"><span>评论区</span>
            {% for comment in comment_list %}
                <li class="list-group-item">
                    <p><span>#{{ forloop.counter }}楼</span> &nbsp; &nbsp; &nbsp;
                        <span>{{ comment.create_time|date:‘Y-m-d H:m‘ }}</span>&nbsp; &nbsp; &nbsp;
                        <a href="">{{ comment.user.username }}</a>
                        <span class="pull-right re_comm" username="{{ comment.user.username }}" comment_pk="{{ comment.pk }}">
                        {#自定义属性 username用于点击回复时,自动@评论人#}
                        {#自定义属性 comment_pk标识此为父评论#}
                            <a>回复</a></span>
                    </p>
                    {% if comment.parent_comment_id %}
                            {#判断是否有父评论#}
                    <div class="well">
                    <p>
                        {{ comment.parent_comment.user.username }}:{{ comment.parent_comment.content }}
                    </p>
                    </div>
                    {% endif %}

                    <p>&nbsp; &nbsp; &nbsp;{{ comment.content }}</p>
                </li>
            {% endfor %}
            </ul>
        </div>

 

 


 

 Jquery

            //评论提交
            var parent_id = ‘‘;
            $(‘#btn‘).click(function () {
                var content = $(‘#tbCommentBody‘).val();
                if(parent_id){    //即为子评论
                    var index = content.indexOf(‘\n‘);
                    content = content.slice(index+1)
                } // 回复评论判断后,切片后存入数据库

                $.ajax({
                    url:"/comment/",
                    type: ‘post‘,
                    async:false,
                    data:{
                        ‘csrfmiddlewaretoken‘:$("[name=‘csrfmiddlewaretoken‘]").val(),
                        ‘article_id‘:"{{ art_obj.pk }}",
                        ‘content‘:content,
                        ‘parent_id‘: parent_id,
                    },
                    success:function (data) {
                        var create_time= data[‘create_time‘];
                        var username = data[‘username‘];
                        var content = data[‘content‘];

                        if(!parent_id){
                            //字符串拼接标签样式
                            var com =‘<li class="list-group-item"><span>‘+create_time+
                                ‘</span>&nbsp; &nbsp; &nbsp;<a href="">‘+username+
                                ‘</a><span class="pull-right"><a>回复</a></span> <p>&nbsp; &nbsp; &nbsp;‘+content+
                                ‘</p> </li>‘;
                        $(‘#comm_list‘).append(com);
                        }else{
                            var parent_name = data[‘parent_name‘];
                            var parent_content = data[‘parent_content‘];

                            //ES6用法,连标签模块一起插入
                            com = `<li class="list-group-item">
                                    <span>${create_time}</span>&nbsp; &nbsp; &nbsp;
                                    <a href="">${username}</a>
                                    <span class="pull-right re_comm">
                                    <a>回复</a></span>
                                    <div class="well">
                                    <p>
                                        ${ parent_name }:${parent_content}
                                    </p>
                                    </div>
                                    <p>&nbsp; &nbsp; &nbsp;${content}</p></li>`;
                        $(‘#comm_list‘).append(com);
                        }
                        //清空评论框 与parent_comment_id
                        parent_id = ‘‘;
                        $(‘#tbCommentBody‘).val(‘‘)
            }
            })
        });

            //回复事件
            $(‘.re_comm‘).click(function () {
                $(‘#tbCommentBody‘).focus();
                $(‘#tbCommentBody‘).val(‘@‘+$(this).attr(‘username‘)+‘\n‘);  //利用标签自定义属性
                {#点击回复即给当前评论赋值parent_comment_id#}
                parent_id = $(this).attr(‘comment_pk‘)
            })

        });

 

 


 重点

1、给前端ajax 时间数据时,后端存储的是datetime.datetime对象。需要转换成格式化的字符串

2、回复内容切片后存储发送

3、运用字符串拼接、ES6,动态添加标签

4、HTML中标签自定义属性的运用,点击回复按钮(产生子评论),自动添加@+名字,给parent_id赋值传给后端。ajax处理完后进行数据清空

5、评论两种显示:render显示,ajax动态显示

 

Django 项目试炼blog(7) -- 文章详情页2 -- 前端样式的继承与楼评论显示

标签:values   type   str   pen   item   __user   log   dex   col   

原文地址:https://www.cnblogs.com/zhuzhiwei-2019/p/10777289.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!