views
from django.db import transaction def comment(request): article_id = request.POST.get('article_id') content = request.POST.get('content') pid = request.POST.get('parent_id') #事务操作 生成评论,文章数据中评论总数自动+1(同时执行) with transaction.atomic(): comm_obj = Comment.objects.create(user_id=request.user.pk,content=content,article_id=article_id,parent_comment_id=pid) Article.objects.filter(pk=article_id).update(comment_count=F('comment_count')+1) send_info = {} # create_time:<class 'datetime.datetime'> json序列化无法对对象进行序列换 send_info['create_time'] = comm_obj.create_time.strftime("%Y-%m-%d %X") send_info['username'] =request.user.username send_info['content'] = comm_obj.content if pid: # 如果有父评论 parent_obj_name =Comment.objects.filter(pk=pid).values('user__username').first() send_info['parent_name'] = parent_obj_name['user__username'] parent_obj = Comment.objects.filter(pk=pid).first() send_info['parent_content'] = parent_obj.content return JsonResponse(send_info)
HTML
HTML中的母版样式
.....
{% block name %}
{% endblock %}
继承模板
{% extends 'base.html' %}
{% block name %}
新填的内容(html,css,jquery)
{% endblock %}
<div class="comment_box"> <ul class="list-group" id="comm_list"><span>评论区</span> {% for comment in comment_list %} <li class="list-group-item"> <p><span>#{{ forloop.counter }}楼</span> <span>{{ comment.create_time|date:'Y-m-d H:m' }}</span> <a href="">{{ comment.user.username }}</a> <span class="pull-right re_comm" username="{{ comment.user.username }}" comment_pk="{{ comment.pk }}"> {#自定义属性 username用于点击回复时,自动@评论人#} {#自定义属性 comment_pk标识此为父评论#} <a>回复</a></span> </p> {% if comment.parent_comment_id %} {#判断是否有父评论#} <div class="well"> <p> {{ comment.parent_comment.user.username }}:{{ comment.parent_comment.content }} </p> </div> {% endif %} <p> {{ comment.content }}</p> </li> {% endfor %} </ul> </div>
Jquery
//评论提交 var parent_id = ''; $('#btn').click(function () { var content = $('#tbCommentBody').val(); if(parent_id){ //即为子评论 var index = content.indexOf(' '); content = content.slice(index+1) } // 回复评论判断后,切片后存入数据库 $.ajax({ url:"/comment/", type: 'post', async:false, data:{ 'csrfmiddlewaretoken':$("[name='csrfmiddlewaretoken']").val(), 'article_id':"{{ art_obj.pk }}", 'content':content, 'parent_id': parent_id, }, success:function (data) { var create_time= data['create_time']; var username = data['username']; var content = data['content']; if(!parent_id){ //字符串拼接标签样式 var com ='<li class="list-group-item"><span>'+create_time+ '</span> <a href="">'+username+ '</a><span class="pull-right"><a>回复</a></span> <p> '+content+ '</p> </li>'; $('#comm_list').append(com); }else{ var parent_name = data['parent_name']; var parent_content = data['parent_content']; //ES6用法,连标签模块一起插入 com = `<li class="list-group-item"> <span>${create_time}</span> <a href="">${username}</a> <span class="pull-right re_comm"> <a>回复</a></span> <div class="well"> <p> ${ parent_name }:${parent_content} </p> </div> <p> ${content}</p></li>`; $('#comm_list').append(com); } //清空评论框 与parent_comment_id parent_id = ''; $('#tbCommentBody').val('') } }) }); //回复事件 $('.re_comm').click(function () { $('#tbCommentBody').focus(); $('#tbCommentBody').val('@'+$(this).attr('username')+' '); //利用标签自定义属性 {#点击回复即给当前评论赋值parent_comment_id#} parent_id = $(this).attr('comment_pk') }) });
重点
1、给前端ajax 时间数据时,后端存储的是datetime.datetime对象。需要转换成格式化的字符串
2、回复内容切片后存储发送
3、运用字符串拼接、ES6,动态添加标签
4、HTML中标签自定义属性的运用,点击回复按钮(产生子评论),自动添加@+名字,给parent_id赋值传给后端。ajax处理完后进行数据清空
5、评论两种显示:render显示,ajax动态显示