博客评论(80)

显示根评论

1.render方法:

article_detail.html

{% extends 'base.html' %}

{% block page_main %}
    <div class="article-detail">
        <h1>{{ article.title }}</h1>
        <p>{{ article.articledetail.content|safe }}</p>
    </div>
{#    点赞和踩灭 区域#}
    <div class="poll clearfix">
        <div id="div_digg">
        <div class="diggit action">
            <span class="diggnum" id="digg_count">{{ article.up_count }}</span>
        </div>
        <div class="buryit action">
            <span class="burynum" id="bury_count">{{ article.down_count }}</span>
        </div>
        <div class="clear" style="clear: both"></div>
        <div class="diggword" id="digg_tips" style="color: red;"></div>
    </div>
    </div>
{#    评论 区域#}
{#    不管有没有登录都可以看到所有评论#}
    <p>评论列表</p>
    <ul class="comment_list list-group">
        {% for comment in comment_list %}
            <li class="list-group-item">
                <div>
                    <a href="">#{{ forloop.counter }}楼</a> &nbsp;
                    <span style="color: gray;">{{ comment.create_time|date:"Y-m-d H-i" }}</span>
                    <a href=""><span>{{ comment.user.username }}</span></a>
                    <a href="" class="pull-right"><span>回复</span></a>
                </div>
                <div class="con">
                    {{ comment.content }}
                </div>

            </li>
        {% endfor %}

    </ul>

{#    线判断是否登录，要是没登录就不用显示评论了#}
    {% if request.user.username %}
        <div class="div_comment">
            <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 id="comment_btn">提交评论</button>
            </p>
        </div>
    {% else %}
        <a href="/login/">请先登录</a>
    {% endif %}

    <script>
        //提交评论
        $("#comment_btn").on("click",function () {

            var article_id=$(".keep_article_id").attr("article_id");
            var content = $("#comment_content").val();
            var pid = "";

            $.ajax({
                url:"/blog/comment/",
                type:"post",
                data:{
                    article_id:article_id,
                    content:content,
                    pid:pid
                },
                success:function (arg) {
                    console.log(arg);


                    //清空文本框
                    $("#comment_content").val("");
                }
            })
        })
    </script>

    <div class="keep_article_id" article_id="{{ article.pk }}" username="{{ request.user.username }}"></div>

    <script src="/static/js/article_detail.js"></script>
{% endblock %}

使用render方法的话，评论完的就必须要刷新页面才会显示

2.Ajax方法

views.py

def comment(request):
    print(request.POST)

    pid = request.POST.get("pid")
    article_id = request.POST.get("article_id")
    content = request.POST.get("content")
    user_pk = request.user.pk
    
    response = {}

    #判断是根评论  还是  子评论
    if not pid: #这是根评论
        comment_obj = models.Comment.objects.create(article_id=article_id,content=content,user_id=user_pk)
        
    response["create_time"] = comment_obj.create_time
    response["content"] = comment_obj.content
    response["username"] = comment_obj.user.username
    
        

    return JsonResponse(response)

article_detail.html

{% extends 'base.html' %}

{% block page_main %}
    <div class="article-detail">
        <h1>{{ article.title }}</h1>
        <p>{{ article.articledetail.content|safe }}</p>
    </div>
{#    点赞和踩灭 区域#}
    <div class="poll clearfix">
        <div id="div_digg">
        <div class="diggit action">
            <span class="diggnum" id="digg_count">{{ article.up_count }}</span>
        </div>
        <div class="buryit action">
            <span class="burynum" id="bury_count">{{ article.down_count }}</span>
        </div>
        <div class="clear" style="clear: both"></div>
        <div class="diggword" id="digg_tips" style="color: red;"></div>
    </div>
    </div>
{#    评论 区域#}
{#    不管有没有登录都可以看到所有评论#}
    <p>评论列表</p>
    <ul class="comment_list list-group">
        {% for comment in comment_list %}
            <li class="list-group-item">
                <div>
                    <a href="">#{{ forloop.counter }}楼</a> &nbsp;
                    <span style="color: gray;">{{ comment.create_time|date:"Y-m-d H-i" }}</span>
                    <a href=""><span>{{ comment.user.username }}</span></a>
                    <a href="" class="pull-right"><span>回复</span></a>
                </div>
                <div class="con">
                    {{ comment.content }}
                </div>
            </li>
        {% endfor %}
    </ul>

{#    线判断是否登录，要是没登录就不用显示评论了#}
    {% if request.user.username %}
        <div class="div_comment">
            <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 id="comment_btn">提交评论</button>
            </p>
        </div>
    {% else %}
        <a href="/login/">请先登录</a>
    {% endif %}

    <script>
        //提交评论
        $("#comment_btn").on("click",function () {

            var article_id=$(".keep_article_id").attr("article_id");
            var content = $("#comment_content").val();
            var pid = "";

            $.ajax({
                url:"/blog/comment/",
                type:"post",
                data:{
                    article_id:article_id,
                    content:content,
                    pid:pid
                },
                success:function (arg) {
                    console.log(arg);
                    var create_time = arg.create_time;
                    var content = arg.content;
                    var username = arg.username;

                    var comment_li = '<li class="list-group-item"> <div> <span style="color: gray;">'+create_time+'</span> <a href=""><span>'+username+'</span></a></div> <div class="con">'+content+'</div> </li>';

                    $(".comment_list").append(comment_li);

                    //清空文本框
                    $("#comment_content").val("");
                }
            })
        })
    </script>

    <div class="keep_article_id" article_id="{{ article.pk }}" username="{{ request.user.username }}"></div>

{#    {% csrf_token %}#}
    <script src="/static/js/article_detail.js"></script>
{% endblock %}

这样使用ajax后，新的评论就不是靠刷新页面了，而是通过 document操作实现的

 JS小知识

在js里面：

　　　　var s = "hellow world";

　　　　console.log(s.charAt(6));　　　　通过索引找字符

　　　　console.log(s.indexOf("h"))　　    通过字符找索引