zoukankan      html  css  js  c++  java
  • Django 项目试炼blog(7) -- 文章详情页2 -- 前端样式的继承与楼评论显示

    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('
    ');
                        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')+'
    ');  //利用标签自定义属性
                    {#点击回复即给当前评论赋值parent_comment_id#}
                    parent_id = $(this).attr('comment_pk')
                })
    
            });

     重点

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

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

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

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

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

  • 相关阅读:
    对javascript匿名函数的理解(透彻版)
    使用Emmet(前身Zen Coding)加速Web前端开发
    实现IE6-Ie8媒体查询
    css3常用伪类选择器
    ScriptManager,updatepanel中按钮事件不兼容IE10以后版本
    UpdatePanel中弹出不能弹出消息
    页面缓冲显示正在加载图片
    练习JsonJquery查找数据
    Ajax练习:使用jQuery验证用户名是否存在
    使用Android SDK中的WebView
  • 原文地址:https://www.cnblogs.com/zhuzhiwei-2019/p/10777289.html
Copyright © 2011-2022 走看看