博客动态
Hi!欢迎来到Jerry Coding!喜欢请关注!谢谢!有问题可以留言或者点击下面的QQ交流哦!(最近博主划水中。。更新较慢。。。)
微信扫码

扫一扫关注我

More
关于
New
RSS

Django建站历程:(十一)ajax实现文章添加评论

Jerry 2019年6月22日 717  

      为了结构清晰,我们新创建一个comment APP来做评论系统,如何创建和配置具体可以看前面的章节,这里就不详细写了。需要注意的是,本文只实现了对文章的评论,对于对评论进行回复和评论没有实现,其实实现方法类似,大家可以自己搞搞。

      新增一个model,第一步老规矩,确认model的属性。

1、添加model属性

       一个评论的属性很简单,大约有以下几点:评论所属文章、评论时间、评论内容、评论者。一个评论只属于一篇文章,而一篇文章可以有多个评论。修改model.py,创建评论的相关属性字段如下

from django.db import models
from django.conf import settings

# Create your models here.

class Comment(models.Model):
    owner = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE, verbose_name='评论人')
    body = models.TextField('评论内容')
    create_date = models.DateTimeField('评论时间', auto_now_add=True)

    belong = models.ForeignKey(settings.ARTICLE_MODEL, on_delete=models.CASCADE, related_name='articles_comments', verbose_name='所属文章')

    class Meta:
        verbose_name = '文章评论'
        verbose_name_plural = verbose_name
        ordering = ['create_date']

注意,需要全局setting中声明下ARTICLE_MODEL

ARTICLE_MODEL = 'blog.Article'

2、修改admin.py

修改如下代码用于评论字段的后台显示

from django.contrib import admin
from comment.models import Comment

# Register your models here.

@admin.register(Comment)
class CommentAdmin(admin.ModelAdmin):
    list_display = ['id', 'owner', 'body', 'create_date','belong']

3、同步数据库

root@jerryls-site1:/home/mysite# ./manage.py makemigrations
root@jerryls-site1:/home/mysite# ./manage.py migrate

此时,运行服务器进入后台即可看到评论字段

我们能先随便加一条评论用于显示。

4、创建模板文件

     我们创建评论模板文件comment_list.html将评论按条显示出来,路径老规矩,在app/comment/templates/comment/下。代码类似文章列表的显示:

<div class="list-group">
  <a class="list-group-item disabled">评论</a>
{% for cmt in cmt_list %}
  <a class="list-group-item"><p><i>({{forloop.counter}}#)&nbsp;&nbsp;&nbsp;</i>{{cmt.owner}}:{{cmt.body}}</p><p class="text-right">{{cmt.create_date}}</p></a>
{% empty %}
<h4>暂时没有评论!</h4>
{% endfor %}
</div>

forloop.counter 可以打印出循环次数,我们用来做楼层显示。接下来修改views.py,将cmt_list传进来。

5、添加视图和路由

直接把评论列表放在文章后面即可,无需单独的视图和路由。修改article_view如下:

from comment.models import Comment

def article_view(request, slug):
    article = get_object_or_404(Article, slug=slug)  #获取该slug的文章
    cmt_list = Comment.objects.filter(belong = article)  #获取该文章的所有评论
    return render(request,'blog/article_detail.html', {'article':article, 'cmt_list':cmt_list})   # 返回article_detail.html页面

将comment_list.html文件连接到文章主体之下:

{% include 'comment/comment_list.html'%}

此时运行服务器,就可以看到文章下面的评论列表啦!

下面我们加一个文本框和评论按钮,再利用 jQuery ajax() 方法来实现网页的评论提交。

6、添加评论框

    修改comment_list.html文件,在评论列表上面添加一个文本框和按钮,代码如下:

<div>
  <br><br>
  <textarea rows="5" cols="100" id="cmt_content"></textarea>  <br>
  <button type="button" class="pull-right btn btn-primary" id="cmt_submit">评论</button>
  <br><br><br>
</div>

效果如下:

7、实现评论提交

      使用ajax方法进行提交,大体思路如下: 点击评论按钮 --> 获取当前用户、文章等信息 --> 打包成json数据提交后台 --> 后台view视图创建comment信息 --> 存入数据库 --> 返回成功提示 --> 刷新界面。 

前端JS代码如下:

<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>

<script type="text/javascript">
$(function() {
    $("#cmt_submit").click(function(){
        var body = $("#cmt_content").val();
        if (body.length == 0){
            alert("请输入评论内容....");
            return;
        }
        
        //从html获取相关字段 html 里面写的data-*, 这里就写 *
        var article_id = $(this).data('article_id');
        var csrf = $(this).data('csrf');                 
        var ajax_url = $(this).data('ajax_url')

        //设置post Json字段 
        var post_data={
        "article_id":article_id,
        "body":body,
        };

        $.ajaxSetup({
            data:{'csrfmiddlewaretoken': csrf }
        });

        $.ajax({
            url:ajax_url,
            type:'post',
            data:post_data,
            //{#请求成功回调函数#}
            success:function (data) {
                alert(data.msg);
                window.location.reload(); //刷新当前页面.
            },
            //{#请求失败回调函数#}
            error:function (data) {
                alert("err"+ data.msg);
            }
        });
    });
})
</script>

<div>
  <br><br>
  <textarea rows="5" cols="100" id="cmt_content"></textarea>
  <br>
  <button type="button" class="pull-right btn btn-primary"id="cmt_submit" data-csrf="{{ csrf_token }}" data-article_id="{{article.id}}" data-ajax_url="{% url 'comment:cmt_add_url' %}">评论</button>
  <br><br><br>
</div>

后台view视图处理代码如下:

from django.shortcuts import render
from django.views.decorators.http import require_POST
from django.contrib.auth.decorators import login_required
from django.http import JsonResponse

from blog.models import Article
from .models import Comment

# Create your views here.

@login_required
@require_POST
def cmt_add_view(request):
    if request.is_ajax():
        cmt_user = request.user                       #获取评论的用户
        cmt_articleid = request.POST.get('article_id')     #获取评论的文章
        cmt_body = request.POST.get('body')                #获取评论的内容
        article = Article.objects.get(id=cmt_articleid)     #获取评论的文章

        comment = Comment(owner=cmt_user, body=cmt_body, belong=article)  #创建一个新的comment
        comment.save()            #保存数据

        return JsonResponse({'msg':'评论提交成功!'})
    return JsonResponse({'msg':'评论提交失败!'})

全局路由和APP局部路由代码如下

#app下urls.py

from django.urls import path
from .views import cmt_add_view

app_name = '[comment]'

urlpatterns = [
    path('add/',cmt_add_view, name='cmt_add_url'),  # 添加评论:
]

#全局下urls.py
path('comment/', include('comment.urls', namespace = 'comment')),

逻辑都很简单,还有注释,不用多比比太多。评论提交功能完成!

为了实现登陆后评论,修改下前端代码就OK。

<div>
  <br><br>
{% if user.is_authenticated %}
  <textarea rows="5" cols="100" id="cmt_content"></textarea>
  <br>
  <button type="button" class="pull-right btn btn-primary"id="cmt_submit" data-csrf="{{ csrf_token }}" data-article_id="{{article.id}}" data-ajax_url="{% url 'comment:cmt_add_url' %}">评论</button>
{% else %}
  <div class="text-center">尚未登录,暂时无法评论。请先
      <a class="text-danger" href="{% url 'account_login' %}?next={{ request.path }}">登录</a> 或
      <a class="text-danger" href="{% url 'account_signup' %}?next={{ request.path }}">注册</a>
  </div>
{% endif %}
  <br><br><br>
</div>

   

文章评论完成,这下终于可以喷博主了@_@ ,完结撒花~ 又是半夜12点了,溜了溜了。。

 


原创文章,转载请注明出处: https://jerrycoding.com/article/site_building_11

您尚未登录,暂时无法评论。请先 登录 或者 注册

0 人参与 | 0 条评论

每日一句 (From ONE)
人生在世,无非“吃喝”二字。将生活嚼得有滋有味,把日子过得活色生香,往往靠的不只是嘴巴,还要有一颗浸透人间烟火的心。