django开发简易博客（五）

　　这一节将讲述如何添加comments库与ajax的支持。

　　一.添加comments库

　　comments库是是django框架内置的一个评论库，可以快速的搭建岀一个评论系统，不过再自定义方面有些麻烦，不想用的话也可以自己动手编写。激活comments的方法。

　　1.在setting.py INSTALLED_APP 添加

'django.contrib.sites',
django.contrib.comments',

　　2.更新数据库，执行

 python manage.py syncdb 

　　3.在web目录下urls.py添加以下内容

urlpatterns = patterns('',
    ...
    (r'^comments/', include('django.contrib.comments.urls')),
    ...
)

　　4.在.在setting.py中添加

SITE_ID = 1 #任意一个值

　　5.在templates 中使用  comment template tags

　　在blog_list.html、blog_filter.html中添加

{% load comments %}

　　在blog_list.html、blog_filter.html中添加以下内容

<div class="col-md-2 col-md-offset-7">
       <a href="{% url 'updateblog' blog.id %}" title="edit">
            <span  class="glyphicon glyphicon-edit"></span>
       </a>
       <a href="{% url 'delblog' blog.id %}" title="delete">
            <span  class="glyphicon glyphicon-trash"></span>
       </a>
       {% get_comment_count for blog as comment_count %}
       <a href="{% url 'detailblog' blog.id %}#cmt" title="comment">
            <span  class="glyphicon glyphicon-comment"></span>
            {{comment_count}}
       </a>
</div>

　　二.自定义评论表单

　　在blog_show.html中添加以下代码

自定义comments表单
{% block comments %}
<article id="cmt">
    {% get_comment_count for blog as comment_count %}
        <h4 class="muted comtop">{{ comment_count }} Comments</h4>
        <hr class="soften">
    {% get_comment_list for blog as blog_com %}
    {% for comment in blog_com %}
        <div class="container-fluid none-padding">
            <p class="muted"><small>{{ comment.user }}</small><small>{{ comment.submit_date|date:"F,j,Y" }}</small></p>
            {{ comment.comment }}
        </div>
        <hr class="soften">
    {% endfor %}
</article>

<article >
    {% get_comment_form for blog as blog_form %}
        <div id="comment_form">
            <h4 class="muted comtop">New Comments</h4>
            <form class="form-horizontal" action="{% comment_form_target %}" method="post">
                <fieldset>
                {% csrf_token %}
                {{ blog_form.object_pk }}
                {{ blog_form.content_type }}
                {{ blog_form.timestamp }}
                {{ blog_form.site }}
                {{ blog_form.submit_date }}
                {{ blog_form.security_hash }}
                <div class="control-group">
                    <label class="control-label" for="id_name">name: </label>
                    <div class="controls">
                        <input type="text" id="id_name" class="input-xlarge" name="name" placeholder="please enter name" required="required">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="id_email">email: </label>
                    <div class="controls">
                        <input class="input-xlarge" id="id_email" type="email" name="email" placeholder="please enter email" required="required">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="id_comment">comment: </label>
                    <div class="controls">
                        <textarea class="input-xlarge comment" id="id_comment" name="comment" placeholder="please enter comment" required="required"></textarea>
                    </div>
                </div>
                <p style="display:none;"><label for="id_honeypot">如果你在该字段中输入任何内容，那么你的评论就会被视为垃圾评论。</label> <input type="text" name="honeypot" id="id_honeypot"></p>
                <div class="form-actions">
                    <input class="btn btn-info" type="submit" name="submit" value="Post">
                    {# <input class="btn btn-info" type="submit" name="preview" value="Preview"> #}
                    <input type='hidden' name='next' value='{% url detailblog blog.id %}'/>
                </div>
                </fieldset>
            </form>
        </div>
</article>
{% endblock %}

　　修改views.py文件，将blog_show中的

return render_to_response("blog_show.html", {"blog": blog})
改为
return render_to_response("blog_show.html", {"blog": blog}, context_instance=RequestContext(request)) 

　　这样评论功能就完成了。

　　三.ajax支持

　　修改自定义表单中最后一行（这一行的作用是提交完表单后跳转的页面）

 <input type='hidden' name='next' value='{% url 'detailblog' blog.id %}'/>

　　为

<input type='hidden' name='next' value='{% url 'showcomment' blog.id %}'/>

　　在url中添加

 url(r'^blog/commentshow/(?P<id>\d+)/$', 'blog_show_comment', name='showcomment'),

　　在views.py中添加

def blog_show_comment(request, id=''):
    blog = Blog.objects.get(id=id)
    return render_to_response('blog_comments_show.html', {"blog": blog})

　　新建blog_comments_show.html

{% load comments %}
<article id="cmt">
    {% get_comment_count for blog as comment_count %}
        <h4 class="muted comtop">{{ comment_count }} Comments</h4>
        <hr class="soften">
    {% get_comment_list for blog as blog_com %}
    {% for comment in blog_com %}
        <div class="container-fluid none-padding">
            <p class="muted"><small>{{ comment.user }}</small><small>{{ comment.submit_date|date:"F,j,Y" }}</small></p>
            {{ comment.comment }}
        </div>
        <hr class="soften">
    {% endfor %}
</article>

　　在blog_show.html中添加：

{% block extra_head %}
    <script type="text/javascript" charset="utf-8">
function bindPostCommentHandler() {
    $('#comment_form form input.submit-preview').remove();
    $('#comment_form form').submit(function() {
        $.ajax({
            type: "POST",
            data: $('#comment_form form').serialize(),
            url: "{% comment_form_target %}",
            cache: false,
            dataType: "html",
            success: function(html, textStatus) {
                $('#cmt').replaceWith(html);
                $('#comment_form form')[0].reset();
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                $('#comment_form form').replaceWith('Your comment was unable to be posted at this time.  We apologise for the inconvenience.');
            }
        });
        return false;
    });
}

$(document).ready(function() {
    bindPostCommentHandler();
});
</script>
{% endblock %}

　　　　这样就添加了ajax的支持。