Django评论库

评论的功能打算用Django的评论库，添加引用却报错。

查了一下，Django原本会自带一个评论库组件，而从1.6版本以后就没有自带了，需要自己安装。

运行 pip install django-contrib-comments

如下修改setting.py文件

1. INSTALLED_APP=(
2. #...,
3. 'django_comments',
4. 'django.contrib.sites',
5. )
6. SITE_ID = 1

在INSTALLED_APP添加django_comments和django.contrib.sites两个应用。

在外部添加 SITE_ID=1。

django的评论库是一个站点，所以需要添加sites的应用并设置当前django工程的站点id=1

记得在urls.py添加django_comments的路由设置，url中加入如下代码：

1. url(r'^comments/', include('django_comments.urls')),

执行 python ./manage.py syncdb 同步一下数据库即可。

接着，修改前端页面显示评论列表和评论提交表单。这些需要使用django_comments的模版标签，在使用标签之前导入加载：

1. {# 导入评论库模块的模版标签 #}
2. {% load comments %}

评论列表可以通过django_comments的get_comment_list模版标签获取，如下代码：

1. <div class="panel panel-default">
2. <div class="panel-heading">
3. <h4>评论列表</h4>
4. </div>
6. <div class="panel-body">
7. {% get_comment_list for blog as comments %}
8. {% for comment in comments %}
9. <div class="blog_comment" name="F{{comment.id}}">
10. <p class="comment_title">
11. #{{ comment.submit_date|date:"Y-m-d H:i"}} @ {{ comment.user_name }}：
12. </p>
13. <p class="comment_content">{{ comment.comment }}</p>
14. </div>
15. {% empty %}
16. <span>暂无评论</span>
17. {% endfor %}
18. </div>
19. </div>

get_comment_list模版标签的用法是for一个模版对象，as是重命名。变量得到的评论加载即可。

而评论提交表单，最主要的是提交的url和表单字段。同样也可以通过django_comments的模版标签处理，如下代码：

1. <h4>新的评论</h4>
2. {% get_comment_form for blog as blog_form %}
4. <form id="comment_form"
5. class="form-horizontal"
6. action="{% comment_form_target %}"
7. method="post"
8. >
9. {% csrf_token %}
11. {# 必须的字段 #}
12. {{ blog_form.object_pk }}
13. {{ blog_form.content_type }}
14. {{ blog_form.timestamp }}
15. {{ blog_form.site }}
16. {{ blog_form.submit_date }}
17. {{ blog_form.security_hash }}
19. {# 用户名字段，这个后面会修改为登录用户评论，无需填这个 #}
20. <div class="control-group">
21. <label class="control-label" for="id_name">名称： </label>
22. <div class="controls">
23. <input type="text"
24. id="id_name" class="input-xlarge" name="name"
25. placeholder="请输入您的用户名"
26. value="{{ user.username }}" />
27. </div>
28. </div>
30. {# 邮箱地址字段 #}
31. <div class="control-group">
32. <label class="control-label" for="id_email">邮箱： </label>
33. <div class="controls">
34. <input type="email"
35. id="id_email" class="input-xlarge" name="email"
36. placeholder="请输入您的邮箱地址"
37. value="{{ user.email }}" />
38. </div>
39. </div>
41. {# 评论内容 #}
42. <a name="newcomment" id="newcomment"></a>
43. <div class="control-group">
44. <label class="control-label" for="id_comment">评论： </label>
45. <div class="controls">
46. <textarea rows="6"
47. id="id_comment" class="input-xlarge comment" name="comment"
48. placeholder="请输入评论内容">
49. </textarea>
50. </div>
51. </div>
53. {# 防垃圾评论 #}
54. <p style="display:none;">
55. <label for="id_honeypot">如果你在该字段中输入任何内容，你的评论就会被视为垃圾评论。</label>
56. <input type="text" name="honeypot" id="id_honeypot">
57. </p>
59. {# 表单按钮 #}
60. <div class="controls">
61. <div class="form-actions">
62. <input class="btn btn-info" id="submit_btn" type="submit" name="submit" value="提交"/>
63. <input type="hidden" name="next" value="{%url 'detailblog' blog.id%}"/>
64. </div>
65. </div>
66. </form>

其中我使用了一些Bootstrap的样式，可忽略。虽然现在可以提交评论了，但提交评论之后会跳转到一个很简陋的页面。

接下来用ajax写评论提交事件避免避免跳转到独立的评论页面，修正时间戳等Bug。

Django的评论库如果填写不完整，或者提交出错，就会跑到自带的页面。

关键是自带的评论页面超级不好看。所以得想方法避开。

为Comments添加Ajax功能，免得提交出错跳到自带的评论页面。

具体可参考django 简易博客开发 4 comments库使用及ajax支持提交前，先在本地验证是否填写。

1. {% block extra_footer %}
2. {#设置提交评论#}
3. <script type="text/javascript">
4. $(document).ready(function() {
5. $('#comment_form').submit(function() {
6. if ($("#id_honeypot").val().length!=0) {
7. alert("Stop!垃圾评论");
8. return false;
9. };
10. if ($("#id_name").val().length==0) {
11. alert("Error:请输入您的用户名");
12. $("#id_name").focus();
13. return false;
14. };
15. if ($("#id_email").val().length==0) {
16. alert("Error:请输入您的邮箱地址");
17. $("#id_email").focus();
18. return false;
19. };
21. var email=$("#id_email").val();
22. if(!email.match(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/)){
23. alert("Error:邮箱不正确！请重新输入");
24. $("#id_email").focus();
25. return false;
26. }
28. if ($("#id_comment").val().length==0){
29. alert("Error:请输入您的评论");
30. $("#id_comment").focus();
31. return false;
32. };
34. $("#id_timestamp").value=event.timeStamp;
35. $.ajax({
36. type: "POST",
37. data: $('#comment_form').serialize(),
38. url: "{% comment_form_target %}",
39. cache: false,
40. dataType: "html",
41. success: function(html, textStatus) {
42. window.location.reload();
43. },
44. error: function (XMLHttpRequest, textStatus, errorThrown) {
45. alert("评论出错，" + errorThrown);
46. }
47. });
48. return false;
49. });
50. });
51. </script>
52. {% endblock %}

就这样实现了ajax提交。只有后台运行出错，才会返回error错误。