Django开发个人博客网站——16、给博客添加上评论功能
博客中的评论系统其实是个很复杂的东西,但是网上已经有现成的轮子了,比如django-contrib-comments,可以直接拿过来用。但是我这里博客主要是给自己看的,并不想有太复杂的互动内容,因此,就自己写了个非常简答的仅能提供一级评论,且不需要注册的评论功能。
1、添加评论模型
评论也是需要记录在数据库中的,因此我们需要在models.py中为它创建一个模型,由于我们不提供注册服务,因此,只需要用户输入用户名跟内容就可以了,模型如下所示:
models.py
class Comment(models.Model):name = models.CharField(verbose_name='姓名', max_length=20, default='佚名')content = models.CharField(verbose_name='内容', max_length=300)create_time = models.DateTimeField(verbose_name='创建时间', auto_now_add=True)blog = models.ForeignKey(Blog, verbose_name='博客')class Meta:verbose_name = '博客评论'verbose_name_plural = verbose_namedef __str__(self):return self.content[:10]
当然,不要忘了添加到admin.py中,和之前的博客、分类、标签一样。
2、创建表单
django的表单,是django很重要的一样内容,具体内容我们就不再介绍了,可以查看官方文档,我们这里采用ModelForm获取表单内容,在myblog app下新建一个forms.py的文件:
forms.py
from django import forms
from myblog.models import Commentclass CommentForm(forms.ModelForm):class Meta:model = Commentfields = ['name', 'content', 'blog']
3、编写视图函数
在视图函数中,我们通过json来向前端传递参数,并通过ajax异步的方式进行评论:
view.py
from django.http import HttpResponse
from myblog.models import Blog, Category, Tag, Comment
from myblog.forms import CommentFormclass AddCommentView(View):def post(self, request):comment_form = CommentForm(request.POST)if comment_form.is_valid():comment_form.save()return HttpResponse('{"status": "success"}', content_type='application/json')else:return HttpResponse('{"status": "fail"}', content_type='application/json')
添加完评论的视图函数后,还记得要在博客详情视图函数中将该博客的评论内容传递到前端。
4、创建评论的url
from myblog.views import AddCommentViewurl(r'^add_comment/$', AddCommentView.as_view(), name='add_comment'),
5、在博客详情页面添加上评论
由于我们采用的是ajax异步方式对网页进行评论操作,因此需要添加相应的script函数,相关代码可以从我的GitHub获得,链接在该系类的第一节。这里针对如下form表单进行相关讲解:
<form class="comment-form" id="jsStayForm"><div class="form-group"><label class="name">名字: </label><input name="name" type="text" class="form-name" id="js-name" placeholder="不超过20个字"></div><div class="form-group"><label class="comment">评论:</label><textarea name="content" class="form-control" id="js-content" rows="5" placeholder="不超过300个字"></textarea></div><input name="blog" type="hidden" id="js-name" value="{{ blog.id }}"><p class="error company-tips" id="jsCompanyTips"></p><button class="btn" type="button" id="jsStayBtn" value="发表">发表</button></form>
由于我们不是直接将表单内容提交到后端,而是通过ajax提交,因此提交按钮要改为button,而不是submit。CommentForm中要获取blog内容,我们这里其实并不包括blog字段,为此我们需要在创建一个类型为‘hidden’的input框,通过这种方式将blog传递过去。
最后就是ajax的相关代码,如下所示:
{% block content_js %}
<script>$(function(){$('#jsStayBtn').on('click', function(){$.ajax({cache: false,type: "POST",url:"/add_comment/",data:$('#jsStayForm').serialize(),dateType:"json",async: true,beforeSend:function(xhr, settings){xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");},success: function(data) {if(data.status == 'success'){alert("提交成功");window.location.reload();//刷新当前页面.}else if(data.status == 'fail'){alert("评论错误,请重新评论");}},});});})</script>
{% endblock %}
表单的csrf验证我们放在这里了,也就是在传递数据的地方进行验证,验证内容可以通过前端查看源码的方式看到。
评论的展示通过for循环很容易实现:
{% for comment in all_comment %}<li class="comment-item"><hr class="the-line" /><span class="nickname">{{ comment.name }} - </span><time class="submit-date"datetime="{{ comment.create_time }}">{{ comment.create_time|date:"Y/m/d h:m" }}</time><p class="floor">{{ forloop.counter }} # </p><div style="word-wrap: break-word">{{ comment.content }}</div></li>{% empty %}暂无评论{% endfor %}
当然,这个自己创建的评论系统并没有太多样式,也没有二级回复功能,可以说是非常简陋了,日后有机会会再对它进行完善的。
但是,个人觉得还是不太喜欢需要各种注册,界面丑陋的评论系统。如果能实现不需要注册且简洁大方还可以通过回复与读者交流,那就最好了。
——————————————————————————————————————————
项目的完整代码:django_blog
觉得有用的欢迎给个star。
Django开发个人博客网站——16、给博客添加上评论功能相关推荐
- 用开源博客系统OneBlog来搭建自己的个人技术博客网站(java版博客系统)
java版博客系统 一直想搭建一个个人的博客,方便记录和分享一些技术点,在网上也找了一圈,最终在开源中国中发现了一款很不错的java版的博客系统 https://gitee.com/yadong.zh ...
- HTML5+CSS期末大作业:个人博客网站设计——个人博客(7页) 学生DW网页设计作业成品 web课程设计网页规划与设计 简单的静态网页制作
HTML5+CSS期末大作业:个人主页/个人介绍网站设计--个人博客(7页) 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题材有 个人. 美食. 公 ...
- Hexo博客进阶:为Next主题添加Valine评论系统
文章目录 前言 根据读者反馈,Valine 评论系统在 Next 主题高版本 (7.+) 以上没有内置,且 Valine 已经很久没有更新维护了.如果想要配置体验 Valine 的,建议使用 Next ...
- Django开发个人博客网站——8、博客首页的开发
现在我们进入博客的首页127.0.0.1:8000, 发现还是欢迎页面,因为我们还没有给博客添加任何模板,也就是前端html页面. 博客前端模板托管在GitHub:django_blog_templa ...
- 【Django | 开发】面试招聘网站(增加csv,excel导出企业域账号集成日志管理功能)
- django开发: 富文本编辑器TinyMCE的默认字体大小及一键排版功能
设置TinyMCE的默认字体大小及一键排版 ckeditor没有一键排版插件,tinymce有现成的,二者基本差不多,所以选择tinymce. tinymce的默认字体太小,现有的一键排版都不涉及字体 ...
- iOS开发常用代码片段:总有你用得上的功能
使用方法:查看文章目录,查找需要的功能. 代码片段目录 1.禁止手机睡眠 2. 隐藏某行cell 3.禁用button高亮 4..切换window的根控制器 5.去除数组中重复的对象 6.给一个vie ...
- 沈阳大学博客网站的设计与实现
沈阳大学博客系统的设计与实现 目 录 引 言 3 1 系统概述 5 1.1 设计背景 5 1.2 设计意义 5 1.3研究现状 5 1.4 研究本设计的影响 6 1.4.1 对经济的影响 6 1.4. ...
- (附源码)Node.js自我展示博客网站 毕业设计 231547
自我展示博客网站的设计与实现 摘 要 个人博客网站是当今网络的热点,个人博客技术的出现使得每个人可以零成本.零维护地创建自己的网络媒体,Blog站点所形成的网状结构促成了不同于以往社区的Blog文化, ...
最新文章
- 如何自学python基础-零基础如何学习python
- Scala多线程:使用Executors提交Callable任务代码示例
- 由于 Web 服务器上的“ISAPI 和 CGI 限制”列表设置,无法提供您请求的页面。
- man命令手册打开以后的使用方法
- 数字电路技术可能出现的简答题_数字电子技术复习题(本科)
- YII2 rule exist unique
- #189 stat(动态规划)
- java.util.concurrent.Future基础
- [react] React.createClass和extends Component的区别有哪些?
- python实现两张图片横向和纵向拼接
- hibernate一对一关系实现
- 别轻易接受父母的建议
- 软件缺陷分析—软件测试之犯罪心理学
- Android 好看的登录界面
- 微信小程序开发案例2---省市区信息选择
- java生成二维码,中间插入图片,以及二维码解析
- 什么是Transformer
- 【Python】语法基本结构
- SAP CTRL加逗号,句号后注释和取消注释不起作用的解决方法
- Debug_C++:关于逻辑或在合法性检测中的问题