评论：

• 根评论：对文章的评论

• 子评论：对评论的评论

• 区别：是否有父评论

流程

1. 构建样式

2. 提交根评论

3. 显示根评论

   1. -- render显示

   2. -- Ajax显示

4. 提交子评论

5. 显示子评论

   1. -- render显示

   2. -- Ajax显示

html

         
     
        
      
                   {% for comment in comment_list %}                
       
                    
        
                        
         #{
   { forloop.counter }}楼                           
         {
   { comment.created_time | date:'Y-m-d H:i' }}                            
         { { comment.user.username }}                        
         回复                    
        
                    {% if comment.parent_comment_id %}                        
        
  
                                     
         
                                {
    { comment.parent_comment.user.username }}: {
    { comment.parent_comment.content }}                            
                        
        
                    {% endif %}                    
        
                        
         
{
   { comment.content }}
                    
        
                
            {% endfor %}        
      
        
      
评论列表
        
      
发表评论
        
      
            昵称：        
        
      
评论内容:
        
      
                    
        
      提交评论    
     

 

css

/* 评论 */input.author {
       background-image: url(/static/font/icon_form.gif);    background-repeat: no-repeat;    background-position: 3px -3px;    border: 1px solid #ccc;    padding: 4px 4px 4px 30px;    width: 300px;    font-size: 13px;}.show_comment_content {
       margin-top: 10px;}.comment_info a {
       cursor: pointer;    text-decoration: none;}.comment_info a:hover {
       color: #5cb85c;}

 

js

// 点赞请求        $('#div_digg .action').click(function () {
               let is_up = $(this).hasClass('diggit');            $obj = $(this).children('span');            $.ajax({                url: '/digg/',                type: 'post',                data: {                    'csrfmiddlewaretoken': $("[name='csrfmiddlewaretoken']").val(),                    'is_up': is_up,                    'article_id': "{
    { article_obj.pk }}",                },                success: function (data) {
                       if (data.status) {                        let val = parseInt($obj.text());                        $obj.text(val + 1);                    } else {
                           let val = data.handled ? '您已经推荐过！' : '您已经反对过！';                        $('#digg_tips').html(val);                        setTimeout(function () {                            $('#digg_tips').html("");                        }, 1000)                    }                }            })        });        // 评论请求        let pid = '';        $('#comment_btn').click(function () {
               let content = $('#comment_content').val();            if (pid) {                let index = content.indexOf("\n");                content = content.slice(index + 1);            }            $.ajax({
                   url: '/comment/',                type: 'post',                data: {                    'csrfmiddlewaretoken': $("[name='csrfmiddlewaretoken']").val(),                    'article_id': "{
    { article_obj.pk }}",                    'content': content,                    'pid': pid,                },                success: function (data) {
                       let created_time = data.created_time;                    let username = data.username;                    let content = data.content;                    if (data.parent_comment) {  // 用户提交的是子评论，同时显示父评论                        let latest_comment = `                    
                    
      
                        
       
${data.parent_name}: ${
   data.parent_comment}
                    
      
                    
      
                        
       ${
   created_time}                           
       ${
   username}                    
      
                    
      
                        
       
${
   content}
                    
      
                    
`;                        $('ul.comment_list').append(latest_comment);                    } else {
     // 用户提价的是根评论，只显示用户提交的评论                        let latest_comment = `                    
                    
      
                        
       ${created_time}                           
       ${
   username}                    
      
                    
      
                        
       
${
   content}
                    
      
                    
`;                        $('ul.comment_list').append(latest_comment);                    }                    // 清空评论框                    $('#comment_content').val('');                    pid = "";                }            })        });        // 回复按钮事件        $('.reply_btn').click(function () {
               $('#comment_content').focus();            let comment_user = '@' + $(this).attr('username') + "\n";            $('#comment_content').val(comment_user);            pid = $(this).attr('comment_pk');        });

 

py

# urls.py# 评论path('comment/', views.comment),views.py# 评论def comment(request):    article_id = request.POST.get("article_id")    pid = request.POST.get('pid')    content = request.POST.get('content')    user_id = request.user.pk    comment_obj = models.Comment.objects.create(        user_id=user_id,        article_id=article_id,        content=content,        parent_comment_id=pid    )    response = {}    response['created_time'] = comment_obj.created_time.strftime('%Y-%m%d %X')    response['username'] = request.user.username    response['content'] = content    if pid:        parent_comment = models.Comment.objects.filter(nid=pid).first()        response['parent_comment'] = parent_comment.content        response['parent_name'] = parent_comment.user.username    return JsonResponse(response