BBS- Comments
Front-end structures
1, the reference picture, editorial area has the following elements:
nickname:
<p>昵称:<input type="text" id="tbCommentAuthor" class="author" disabled="disabled" size="50" value="{{ request.user.username }}"></p>
comments:
<textarea name="" id="id_comment" cols="60" rows="10"></textarea>
Submit button:
<button class="btn btn-primary" id="id_submit">提交评论</button>
{# 前端品评论区搭建 #}
{% if request.user.is_authenticated %}
<div>
<p><span class="glyphicon glyphicon-comment"></span>发布评论</p>
<p>昵称:<input type="text" id="tbCommentAuthor" class="author" disabled="disabled" size="50"
value="{{ request.user.username }}"></p>
<p>评论内容:</p>
<p>
<textarea name="" id="id_comment" cols="60" rows="10"></textarea>
</p>
<p>
<button class="btn btn-primary" id="id_submit">提交评论</button>
</p>
</div>
{% endif %}
2 comments pages floor building
- All comments transmitted to the rear end of the list: comment_list
When prompted example:
Use a for loop to build the page, right
The content of each layer is fixed
- Number of Levels:
<span>#{{ forloop.counter }}楼</span>
- release time:
<span>{{ comment.create_time|date:'Y-m-d' }}</span>
- Publishing user
<span><a href="/{{ comment.user.username }}/">{{ comment.user.username }}</a></span>
- Reply button (it comes to child comment content)
<span class="pull-right reply" comment_id="{{ comment.pk }}" username="{{ comment.user.username }}"><a>回复</a></span>
comments
If a child needs to review the case in Review plus: @ username +
<div> {% if comment.parent %} <p>@ {{ comment.parent.user.username }}</p> {% endif %} {{ comment.content }} </div>
The complete code
<ul class="list-group"> {% for comment in comment_list %} <li class="list-group-item"> <div> <span>#{{ forloop.counter }}楼</span> <span>{{ comment.create_time|date:'Y-m-d' }}</span> <span><a href="/{{ comment.user.username }}/">{{ comment.user.username }}</a></span> <span class="pull-right reply" comment_id="{{ comment.pk }}" username="{{ comment.user.username }}"><a>回复</a></span> <div> {% if comment.parent %} <p>@ {{ comment.parent.user.username }}</p> {% endif %} {{ comment.content }} </div> </div> </li> {% endfor %} </ul>
3, the front end js code
Submit button function
Submit button to get all of the data content, user id, id comments sent to the backend via ajax
parentId define a global variable
Note that when the child is required to review the content of the comments were sliced
if (parentId){ let indexVal = $content.indexOf('\n') + 1; $content = $content.slice(indexVal); console.log($content) }
Write ajax function
// 评论逻辑代码 // 定义一个全局的parentId变量名 let parentId = ''; $('#id_submit').click(function () { // 获取textarea内容 let $content = $('#id_comment').val(); // 判断parentId是否有值才能确定是否切内容 if (parentId){ let indexVal = $content.indexOf('\n') + 1; $content = $content.slice(indexVal); console.log($content) } $.ajax({ url: '/comment/', type: 'post', data: { 'article_id': '{{ article_obj.pk }}', 'content': $content, 'csrfmiddlewaretoken': '{{ csrf_token }}', 'parent_id': parentId, }, success: function (data) { if(data.code == 100){ let userName = '{{ request.user.username }}'; let content = $content; let tempStr = ` <li class="list-group-item"> <div> <span><a href="/${userName}/">${userName}:</a></span> <p> ${content} </p> </div> </li> `; // 查找url标签 添加子元素 $(".list-group").append(tempStr); // 将textarea框中的内容清空 $('#id_comment').val(''); // 将全局的parentId清空 parentId = '' } } }) });
Reply function buttons
Comments child needs to be added to the user name textarea, how to get names
let pUserName = $(this).attr('username'); let pCommentId = $(this).attr('comment_id');
Wrap
$('#id_comment').val('@'+pUserName+'\n');
auto focus
$('#id_comment').focus();
The global assignment parent_id
parentId = pCommentId;
rear end:
Obtain data sent by the distal end
article_id = request.POST.get("article_id") content = request.POST.get('content') parent_id = request.POST.get('parent_id')
Check whether the user is logged
if request.user.is_authenticated(): with transaction.atomic(): # 在文章表中将普通的评论字段加1 models.Article.objects.filter(pk=article_id).update(comment_num = F('comment_num')+1) # 在去评论表存储真正的数据 models.Comment.objects.create(user=request.user,article_id=article_id,content=content,parent_id=parent_id) back_dic['msg'] = '评论成功' else: back_dic['code'] = 110 back_dic['msg'] = '请先登录' return JsonResponse(back_dic)