django框架之BBS项目之评论功能
内容回顾
1. BBS项目 CMS
1. 登陆
1. form组件
2. auth模块
3. 验证码
2. 注册
1. form组件
1. 生成html代码
直接for循环form_obj,就可以遍历全部字段
2. 验证
1. 默认的那些验证
2. 正则的验证
3. 全局钩子作确认密码的验证
4. 判断用户名是否已经存在
1. input框失去焦点就发ajax到后端判断
2. form组件中使用局部钩子来判断
2. auth模块 --> 扩展auth_user表 --> create_user()
1. UserInfo这个类里面，avatar是一个FileField
avatar = models.FileField(upload_to="avatars/", default="avatars/default.png")
2. 注意事项：
1. FileField保存的是一个路径，而不是一个文件
2. upload_to：具体保存的文件路径就会在media目录下
3. 上传头像
1. ajax如何上传文件
2. Django中media的配置
1. settings.py中：
- MEDIA_URL:别名
- MEDIA_ROOT:给用户上传的全部文件指定一个存放目录
2. urls.py中：
from django.views.static import serve
from django.conf import settings
url(r'^media/(?P<path>.*)', serve, {"document_root": settings.MEDIA_ROOT})
3. 博客首页
1. 文章列表（排样式）
2. 分页
1. 封装的要完全
2. 封装后的结果要有普适性（url要写成配置项）
4. 我的博客主页
1. 分类
1. 文章分类
2. 文章标签
2. 日期归档
1. 日期格式化函数 --> MySQL内置的函数都有哪一些？ --> 《漫画数据库》
1. MySQL:DATE_FORMAT('字段', '格式')
2. sqlite:strftime('格式', '字段')
2. ORM中如何执行原生的SQL语句
1. 使用extra()在执行ORM查询的同时，嵌入一些SQL语句
2. 直接执行原生SQL语句
from django.db import connection
cursor = connection.cursor()
cursor.execute('select id from userinfo;')
cursor.fetchall()
3. 分组聚合
QuertySet.annotate() --> 分组，前面查的是什么字段就按什么字段分组
QuertySet.aggregate() --> 聚合，给QuerySet中的每一个对象多一个属性
4. 4合1路由
不一样的路由可使用同一个视图函数！！！ --> 视图函数中经过参数的不一样，实现不一样的功能
5. 文章详情页
1. 母板继承
2. inclusion_tag
1. 返回一段HTML代码，用数据填充的HTML代码
2. 具体的写法
1. 在app下面建立一个名为 templatetags 的 Python Package
2. 在上面的包中建立一个 py文件
3. 按照inclusion_tag的格式要求写功能函数
from django import template
register = template.Library()
@register.inclusion_tag(file='xx.html')
def show_menu(*arg):
...
return {"k1": "v1"}
(xx.html中使用k1这个变量)
3. 点赞
1. ajax发送点赞的请求
1. 点赞必须是登陆用户，没登陆跳转到登陆页面
2. 不能给本身的文章点赞
3. 一个用户只能给一篇文章点一次赞或踩一次
2. 后端建立点赞记录（事务操做）
1. 建立新的点赞记录
2. 去对应的文章表里把点赞数更新一个
3. ORM事务操做
from django.db import transaction
with transaction.atomic():
sql1；
sql2；
4. Django模板语言里面的JS代码
如何在js中引用模板语言的变量，注意加引号！！！
html
接下来就开始写评论区的功能了，首先就是在页面布局：jquery
咱们但愿吧页面布局成这个样式：ajax
在bootstrap找到样式以后，做相应的改动：咱们先想一下，在这个区域须要哪些数据，首先就是评论发表的时间，评论的做者，还有评论的内容。因此在文章详情页面的试图函数中应该传一些comment的参数。以后再页面中，经过for循环，逐个展现评论：sql
<!--评论展现区 开始-->
<h4>评论</h4>
<div class="list-group comment-list"> {% for comment in comment_list %} <div href="#" class="list-group-item">
<h4 class="list-group-item-heading comment-header">
<span>#{{ forloop.counter }}楼</span>
<span>{{ comment.create_time|date:'Y-m-d H:i' }}</span>
<span>{{ comment.user.username }}</span>
<span></span>
</h4>
<p class="list-group-item-text">{{ comment.content }}</p>
</div> {% endfor %} </div>
<!--评论展现区 结束-->
接下来就是发表评论的区域了：数据库
一样是先布局，而后html代码:django
<!--发表评论区 开始-->
<h4>发表评论</h4>
<div>昵称： <input type="text"value="{{ request.user.username }}" disabled>
</div>
<div>
<p>评论内容：</p>
<textarea cols="60" rows="10"></textarea>
</div>
<div>
<button class="btn btn-success">提交</button>
</div>
<!--发表评论区 结束-->
接下来就是发送ajax请求了。bootstrap
咱们可以很容易的写出来这步：后端
//给评论按钮绑定点击事件 $('#submit-comment').click(function () { var userid = '{{ request.user.id }}'; var articleid = '{{ article_obj.id }}'; var content = $('#new-comment').val(); var csrf_token = $('[name="csrfmiddlewaretoken"]').val(); $.ajax({ url:'/comment/', type:'post', data:{ user_id:userid, article_id:articleid, content:content, csrfmiddlewaretoken:csrf_token, }, success:function (res) { console.log(res) } }) })
试图函数也能够这样写;
def comment(request): if request.method == 'POST': res = {'code':0} user_id = request.POST.get('user_id') article_id = request.POST.get('article_id') content = request.POST.get('content')
with transaction.atomic():
# 1.先去建立新评论
comment_obj = models.Comment.objects.create(user_id=user_id, article_id=article_id, content=content)
# 2.再去更新该文章的评论数
models.Article.objects.update(comment_count=F('comment_count')+1)
return JsonResponse(res)
这样基本的评论功能已经写出来了，给文章评论以后，刷新以后在页面上就可以展现出评论内容，app
可是咱们实际的评论不是这样的，当咱们评论以后，评论内容就会立刻出如今展现区，不用经过刷新。这一步怎么实现呢？函数
这就要求咱们在发送请求成功以后的success函数中将它经过js操做展现出来，说白了就是在原来评论展现区的下面再添加一个展现区。因此试图函数要返回一些数据：
views.py代码：
def comment(request): if request.method == 'POST': res = {'code':0} user_id = request.POST.get('user_id') article_id = request.POST.get('article_id') content = request.POST.get('content')
with transaction.atomic():
# 1.先去建立新评论
comment_obj = models.Comment.objects.create(user_id=user_id, article_id=article_id, content=content)
# 2.再去更新该文章的评论数
models.Article.objects.update(comment_count=F('comment_count')+1)
res['data'] = {
'id':comment_obj.id,
'username':comment_obj.user.username,
'content':comment_obj.content,
'create_time':comment_obj.create_time.strftime("Y-m-d") # 这部若是看不懂的话就去复习一下那三种时间格式的相互转化 }
return JsonResponse(res)
在说js操做代码以前，咱们先来复习一个知识：就是js中的字符串格式化输出。
# 给评论按钮绑定点击事件
$('#submit-comment').click(function () { var userid = '{{ request.user.id }}'; var articleid = '{{ article_obj.id }}'; var content = $('#new-comment').val(); var csrf_token = $('[name="csrfmiddlewaretoken"]').val(); $.ajax({ url:'/comment/', type:'post', data:{ user_id:userid, article_id:articleid, content:content, csrfmiddlewaretoken:csrf_token, }, success:function (res) { console.log(res) if(res.code===0){ var data = res.data //先计算原来.comment-list的后代有几个div，即有几我的评论，而后再加一 var num = $('.comment-list>div').length + 1; //建立评论成功后，经过js在评论区列表在添加一条评论 var commenthtml = ` <div href="#" class="list-group-item"> <h4 class="list-group-item-heading comment-header"> <span>#${ num }楼</span> <span>${ data.create_time }</span> <span>${ data.username }</span> <span></span> </h4> <p class="list-group-item-text">${ data.content }</p> </div> ` //在原来的评论列表后面添加一条 $('.comment-list').append(commenthtml) //情空 textarea $('#new-comment').val('') } } }) })
上面写的是添加父评论。
接下来添加子评论，就是回复的部分了：
博客园中当咱们点击回复按钮时，评论区会显示这样：
分为两部：当咱们点击回复标签时，光标就会聚焦在评论区，而且出现了@xxx
这个如何实现呢？
$('.replay').click(function () { //光标聚焦在textarea //出现@xxx var replayname = $(this).prev().text() //取到当前标签的前一个标签的文本 $('#new-comment').focus().val('@'+replayname+'\n') })
comment表里有parent_comment字段，咱们应该怎么取到这个字段的id呢？
当咱们点击提交的时候，咱们无论有没有父评论都给后端传一个parent_id，咱们给评论的那个div加一个自定义的id
<div href="#" class="list-group-item" my_id="{{ comment.id }}">
<!--评论展现区 开始-->
<h4>评论</h4>
<div class="list-group comment-list"> {% for comment in comment_list %} <div href="#" class="list-group-item" my_id="{{ comment.id }}">
<h4 class="list-group-item-heading comment-header">
<span>#{{ forloop.counter }}楼</span>
<span>{{ comment.create_time|date:'Y-m-d H:i' }}</span>
<span>{{ comment.user.username }}</span>
<span></span>
</h4>
{% if comment.parent_comment %}
<span style="display: block">@{{ comment.parent_comment.user.username }}</span>
<p class="list-group-item-text well">
{{ comment.parent_comment.content }}
</p>
{% endif %}
<p class="list-group-item-text">{{ comment.content }}</p>
</div> {% endfor %} </div>
<!--评论展现区 结束-->
那么咱们如何区分谁是父评论谁是子评论呢？当咱们点击回复的时候，产生的评论就是子评论，直接点击提交就是父评论，那咱们应该怎么操做呢？
咱们把这个自定义的id添加到提交的按钮上，当咱们点击提交的按钮是进行判断，若是这个id存在，就说明是子评论，不然就是父评论。
//点击回复按钮时的绑定事件
$('.replay').click(function () { //光标聚焦在textarea //出现@xxx var replayname = $(this).prev().text() ;//取到当前标签的前一个标签的文本 $('#new-comment').focus().val('@'+replayname+'\n'); //把当前评论的id值，存到提交的按钮中 var pID = $(this).parent().parent().attr('my-id'); $('#submit-comment').data('pid',pID) })
//给评论按钮绑定点击事件 $('#submit-comment').click(function () { var userid = '{{ request.user.id }}'; var articleid = '{{ article_obj.id }}'; var content = $('#new-comment').val(); var csrf_token = $('[name="csrfmiddlewaretoken"]').val(); var parentId = $(this).data('pid') || ''; if(parentId){
//由于在添加自评论时，会出现@xxx的东西因此咱们按照索引把他去除 content = content.slice(content.indexOf('\n')+1,); } $.ajax({ url:'/comment/', type:'post', data:{ parent_id:parentId, user_id:userid, article_id:articleid, content:content, csrfmiddlewaretoken:csrf_token, }, success:function (res) { console.log(res) if(res.code===0){ var data = res.data //先计算原来.comment-list的后代有几个div，即有几我的评论，而后再加一 var num = $('.comment-list>div').length + 1; //建立评论成功后，经过js在评论区列表在添加一条评论 var commenthtml = ` <div href="#" class="list-group-item"> <h4 class="list-group-item-heading comment-header"> <span>#${ num }楼</span> <span>${ data.create_time }</span> <span>${ data.username }</span> <span></span> </h4> <p class="list-group-item-text">${ data.content }</p> </div> `; //在原来的评论列表后面添加一条 $('.comment-list').append(commenthtml); //情空 textarea $('#new-comment').val('');
//当咱们点击提交按钮时，应该把自定义的id去掉，否则下一次点击提交的时候，仍是有这个id值 $("#submit-comment").removeData("pid"); } } }) });
咱们后端也能拿到parent_id。
def comment(request): if request.method == 'POST': res = {'code':0} user_id = request.POST.get('user_id') article_id = request.POST.get('article_id') content = request.POST.get('content') parent_id = request.POST.get("parent_id") #建立评论 with transaction.atomic(): # 1.先去建立新评论 if parent_id: #添加自评论 comment_obj = models.Comment.objects.create(user_id=user_id, article_id=article_id, content=content,parent_comment_id=parent_id) else: #添加父评论 comment_obj = models.Comment.objects.create(user_id=user_id, article_id=article_id, content=content) # 2.再去更新该文章的评论数 models.Article.objects.update(comment_count=F('comment_count')+1) res['data'] = { 'parent_id':parent_id, 'id':comment_obj.id, 'username':comment_obj.user.username, 'content':comment_obj.content, 'create_time':comment_obj.create_time.strftime("Y-m-d") } return JsonResponse(res)
这样添加的评论还不够完美，就是添加的评论没有回复这个功能，
//给评论按钮绑定点击事件 $('#submit-comment').click(function () { var userid = '{{ request.user.id }}'; var articleid = '{{ article_obj.id }}'; var content = $('#new-comment').val(); var csrf_token = $('[name="csrfmiddlewaretoken"]').val(); var parentId = $(this).data('pid') || ''; if(parentId){ //由于在添加自评论时，会出现@xxx的东西因此咱们按照索引把他去除 content = content.slice(content.indexOf('\n')+1,); } $.ajax({ url:'/comment/', type:'post', data:{ parent_id:parentId, user_id:userid, article_id:articleid, content:content, csrfmiddlewaretoken:csrf_token, }, success:function (res) { console.log(res) if(res.code===0){ var data = res.data //先计算原来.comment-list的后代有几个div，即有几我的评论，而后再加一 var num = $('.comment-list>div').length + 1; //建立评论成功后，经过js在评论区列表在添加一条评论 var commenthtml = ` <div href="#" class="list-group-item"> <h4 class="list-group-item-heading comment-header"> <span>#${ num }楼</span> <span>${ data.create_time }</span> <span>${ data.username }</span> <span class="pull-right replay">回复</span> </h4> <p class="list-group-item-text">${ data.content }</p> </div> `; //在原来的评论列表后面添加一条 $('.comment-list').append(commenthtml); //情空 textarea $('#new-comment').val(''); //当咱们点击提交按钮时，应该把自定义的id去掉，否则下一次点击提交的时候，仍是有这个id值 $("#submit-comment").removeData("pid"); } } }) });
添加回复这个按钮后，不能实现点击，这就用到了事件委托，当一个事件不能完成时，咱们把它委托给他的父标签作未来的动做。
//给回复按钮绑定事件 //$('.replay').click(function () { //事件委托， $('.comment-list').on('click','.replay',function () { //光标聚焦在textarea //出现@xxx var replayname = $(this).prev().text() ;//取到当前标签的前一个标签的文本 $('#new-comment').focus().val('@'+replayname+'\n'); //把当前评论的id值，存到提交的按钮中 var pID = $(this).parent().parent().attr('my-id'); $('#submit-comment').data('pid',pID) })
这就是完整的代码了
不懂得地方看视频，（看视频day79. 004）
上面设计到的知识点，jquery中的data方法，就是咱们能够给任意一个jQuery对象添加一个值。
js中的三元运算：
还有就是事件委托
- 1. BBS-评论功能
- 2. Django:之BBS项目
- 3. Django项目 BBS论坛
- 4. BBS项目之登陆功能
- 5. MyCnCart之评论功能
- 6. Django小项目简单BBS论坛
- 7. day16-python项目Django框架之基础
- 8. Django框架之美多商城项目
- 9. 72-django-BBS项目开发
- 10. BBS论坛 登陆功能
- 更多相关文章...
- • Mozilla 项目 - 浏览器信息
- • Maven 项目模板 - Maven教程
- • 互联网组织的未来：剖析GitHub员工的任性之源
- • SpringBoot中properties文件不能自动提示解决方法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 字节跳动21届秋招运营两轮面试经验分享
- 2. Java 3 年，25K 多吗？
- 3. mysql安装部署
- 4. web前端开发中父链和子链方式实现通信
- 5. 3.1.6 spark体系之分布式计算-scala编程-scala中trait特性
- 6. dataframe2
- 7. ThinkFree在线
- 8. 在线画图
- 9. devtools热部署
- 10. 编译和链接
- 1. BBS-评论功能
- 2. Django:之BBS项目
- 3. Django项目 BBS论坛
- 4. BBS项目之登陆功能
- 5. MyCnCart之评论功能
- 6. Django小项目简单BBS论坛
- 7. day16-python项目Django框架之基础
- 8. Django框架之美多商城项目
- 9. 72-django-BBS项目开发
- 10. BBS论坛 登陆功能