Django 博客项目:文章评论功能、子评论的评论功能

该要

  • 根评论分为:render页面刷新时更新瓶绿、Ajax提交后局部刷新评论(创建html代码,并插入对应部位)插入html代码
  • 子评论:focus() 获取焦点,取父评论人名字: 在回复按钮上自定义一个username='标签上获取到的父名'在jquery中再用.attr('自定义名')获取值
  • 事务回滚 ransaction
  • 发送邮件功能
  • 在jquery中插入html代码,用反`符号

根评论、子评论

  • username='标签上获取到的父名'在jquery中再用.attr('自定义名')获取值
  • 在jquery中插入html代码,用反`符号

html

<div class="comments">
        <p>评论列表p>
        <ul class="comment_list list-group">

            {#      评论内容   boot   #}
            {% for comment in comment_list %}
                <li class="list-group-item">

                    <div>
                        <a href=""># {{ forloop.counter }}a>   
                        <span>{{ comment.create_time|date:'Y-m-d H:i' }}span>
                        <a class="pull-right reply_btn" username="{{ comment.user.username }}"
                           comment_pk="{{ comment.pk }}">回复a>  
                        <a href="">评论人:{{ comment.user.username }}a>  
                    div>

                    {# 显示子评论 #}
                    {% if comment.parent_comment %}
                        {# 如果是子评论,那么现实父评论内容#}
                        <div class="pid_info well">
                            <p>
                                {{ comment.parent_comment.user.username }} : {{ comment.parent_comment.content }}
                            p>
                        div>

                    {% endif %}

                    <div class="comment_con" style="margin-top: 10px">
                        <p>{{ comment.content }}p>
                    div>
                li>
            {% endfor %}

        ul>
        <p>发表评论p>
        <hr>
        <p>昵称:<input type="text" id="tbCommentAuthor" class="author" disabled="disabled" size="50"
                     value="{{ request.user.username }}">p>
        <p>评论内容p>
        <textarea name="" id="comment_content" cols="90" rows="10">textarea>
        <p>
            <button class="btn btn-default comment_btn">提交评论button>
        p>

    div>

jq

{# 父ID 如果是子评论就有值 #}
        var pid = ''
        {# 评论请求 #}
        $('.comment_btn').click(function () {
            var content = $('#comment_content').val();

            if (pid) {
                //去掉显示的 第一行@XXX , 切片
                var index = content.indexOf('\n') //找到换行符进行切片
                content = content.slice(index + 1)
            }

            $.ajax({

                url: '/comment/',
                type: 'post',
                data: {
                    'csrfmiddlewaretoken': $("[name='csrfmiddlewaretoken']").val(),  //token值
                    'article_id': '{{ article_obj.pk }}',
                    'content': content,
                    'pid': pid,
                },
                success: function (data) {
                    var create_time = data.create_time;  //创建时间
                    var username = data.username;  // 评论人
                    var content = data.content;  // 评论内容
                    var pid = data.pid; // 父评论id 如果有的话

                    // 需要判断是否是子评论
                    // 在jquery中插入html 用反`符号
                    if (pid) {
                        var comment_username = data.comment_username;
                        var comment_content = data.comment_content;

                        var s = `
  • class="list-group-item"> <div> <span>${create_time} "" >评论人:${username}  
  • class="pid_info well"> <p> ${comment_username}: ${comment_content}

    class="comment_con" style="margin-top: 10px"> <p>${content}

    `; } else { // 构建显示刚加的评论 构建标签字符串【利用反括号!!!】 var s = `
  • class="list-group-item"> <div> <span>${create_time} "" >评论人:${username}  
  • class="comment_con" style="margin-top: 10px"> <p>${content}

    `; } // Ajax立刻append 一个标签进去(局部刷新) $('ul.comment_list').append(s); // 提交之后清空输入框 $('#comment_content').val(''); // 清空子评论时的 pid pid = '' } }) }) {# 回复按钮事件 #} $('.reply_btn').click(function () { $('#comment_content').focus(); // 取父评论人名字: 在回复按钮上自定义一个username='标签上获取到的父名' var val = '@' + $(this).attr('username') + '\n'// 光标移动至下一行 $('#comment_content').val(val) // 获取pid父值id 在回复按钮上,给一个自定义 comment_pk 值 pid = $(this).attr('comment_pk')

    事务回滚

    用到模块 transaction、F

     from django.db import transaction
        from django.db.models import F  # 利用F来做自加1操作port F
        with transaction.atomic():
            # 根据传来的参数,创建数据库记录
            comment_obj = models.Comment.objects.create(user_id=user_id, article_id=article_id, content=content,
                                                        parent_comment_id=pid)
            # 生成评论的时候,不要忘了给文章更新一次,因为文章表里有评论数参数,+1
            models.Article.objects.filter(pk=article_id).update(comment_count=F('comment_count') + 1)

    邮件发送

    setting

    # 需要配置一个自己邮箱的账号
    EMAIL_HOST = '邮箱号'
    EMAIL_PORT = 端口号
    EMAIL_HOST_USER = '账号'
    EMAIL_HOST_PASSWORD = '密码'
    # DEFAULT_FROM_EMAIL = EMAIL_HOST_USER. # 开启使用该配置
    EMAIL_USE_SSL = True  # 是否配置证书

    视图中

    # 成功评论后发送邮件
        # 速度会卡,所以最好用线程来处理
        from django.core.mail import send_mail
        from cnblog import settings  # 导入邮箱配置
        send_mail(
            '你的文章新增了一条评论',
            content,  # 内容
            settings.EMAIL_HOST_USER,  # 用户名
            ['用户邮箱']
        )

    你可能感兴趣的:(Django,python)