首页 > 其他分享 >文章的评论(跟评论与子评论的制作)

文章的评论(跟评论与子评论的制作)

时间:2022-10-10 17:25:25浏览次数:36  
标签:comment username request 评论 文章 与子 article id

文章的评论制作

先做跟评论,在做子评论

发表评论框的制作:
前端渲染发表评论框:

    {#    评论功能开始#}
    {% if request.user.is_authenticated %}
        <div>
            <p><span class="glyphicon glyphicon-comment">发表评论:</span></p>
            <div>
                <textarea name="" id="comment" cols="60" rows="10"></textarea>
            </div>
            <button class="btn btn-primary" id="id_commit">提交评论</button>
        </div>
    {% else %}
        <li><a href="{% url 'login' %}">登录</a></li>
        <li><a href="{% url 'reg' %}">注册</a></li>
    {% endif %}

    {#    评论功能结束#}

提交评论数据:

        // 向后端提交用户评论数据
        $('#id_commit').click(function () {
            let conTent = $('#comment').val();
            $.ajax({
                type: 'post',
                url: '/comment/',
                data: {
                    'article_id': '{{ article_obj.pk }}',
                    'content': conTent,
                    'csrfmiddlewaretoken': '{{ csrf_token }}',
                },
                success: function (args) {
                    alert(args)
                }
            })
        })

后端获取评论数据:

# 九、评论视图
def comment(request):
    if request.method == 'POST':
        back_dic = {'code':1000,'msg':''}
        if request.user.is_authenticated:
            article_id = request.POST.get('article_id')
            content = request.POST.get('content')
            with transaction.atomic():
                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)
            back_dic['msg'] = '评论成功'
        else:
            back_dic['code'] = 1001
            back_dic['msg'] = '请先登录'
        return JsonResponse(back_dic)

跟评论展示:
需要在详情视图函数内传入评论内容到前端!

    {#    评论展示开始#}
    {#    #1楼 2022-10-09 08:51 lyshark#}
    <div>
        <h4>评论列表</h4>
        <hr>、
        <ul class="list-group">
            {% for comment in comment_list %}
                <li class="list-group-item">
                    <div>
                        <span>#{{ forloop.counter }}楼</span>&nbsp;
                        <span>{{ comment.create_time|date:'Y-m-d h:i:s' }}</span>&nbsp;
                        <span>{{ comment.user.username }}</span>&nbsp;
                        <span><a href="" class="pull-right">回复</a></span>
                        <div>
                            {{ comment.content }}
                        </div>
                    </div>
                </li>
            {% endfor %}
        </ul>
    </div>
    {#    评论展示结束#}

跟评论临时渲染:
提交评论之后,临时渲染到评论列表,刷新之后才会展示正常的评论格式:

步骤:
1.DOM临时渲染(用到了模板字符串)
2.页面刷新render渲染
3.提交评论之后清空评论框内容

 success: function (args) {
                    if (args.code == 1000) {
                        // 将评论框内容清空
                        $('#comment').val('');
                        // dom临时渲染评论
                        let Name = '{{ request.user.username }}'
                        // 模板字符串添加临时渲染标签到评论列表
                        let temp = `
                            <li class="list-group-item">
                                <div>
                                    <span class="glyphicon glyphicon-comment">&nbsp;${Name}</span>&nbsp;
                                    <span><a href="" class="pull-right">回复</a></span>
                                    <div>
                                        ${conTent}
                                    </div>
                                </div>
                            </li>
                        `
                        // 将生成好的标签添加到对应标签下
                        $('.list-group').append(temp)
                    }
                }

子评论展示制作:

1.点击跟评论回复按钮,发生了以下几件事:
(1).评论框自动聚焦
(2).将回复那一行的评论人姓名,拼接成@username放到评论框中
(3).评论框自动换行

<span><a class="pull-right reply" username="{{ comment.user.username }}" comment_id="{{ comment.pk }}">回复</a></span>
回复按钮标签内,需要添加对应的自定义属性,方便我们点击时获取对应的值
        // 给回复按钮绑定一个点击事件
        $('.reply').click(function (){
            // 获取当前点击所在行的用户名和跟评论主键值
            let commentUserName = $(this).attr('username');
            parentID = $(this).attr('comment_id');
            // 拼接@username放到评论框中并自动聚焦
            $('#comment').val('@'+ commentUserName + '\n').focus();
}

2.判断该评论是跟评论还是子评论

判断的依据在于,该评论是否有parent_id

在点击回复时,我们已经获取了parent_id,当我们点击提交评论时,又触发了提交评论事件,因此改事件里需要多添加一个parent_id数据

image

parent_id 变量可以定义在全局,默认为空,当点击回复时在重新赋予对应的值

在后端的视图函数里也可以进行相应的获取parent_id 并添加到数据库中:
image

3.添加到数据库的子评论内容有@username的数据,我们需要把它去除,只需要在提交评论事件里对应判断一下是否是子评论就行,是则对评论内容进行处理!!
image

4.在前端显示还是需要显示一下@username的,我们可以也判断一下,手动添加一下

image

5.最后需要将parent_id手动清空,不然下次评论还是子评论!

image

标签:comment,username,request,评论,文章,与子,article,id
From: https://www.cnblogs.com/suncolor/p/16776448.html

相关文章

  • 文章的点赞点踩制作
    文章的添加博客园打开需要拷贝的文章,右键检查--》选择cnblogs_post_body这一个div,然后复制outerHTML到admin后台文章表里面最后需要在文章详情页的文章内容那一行添加一......
  • 百度翻译network里没有sug(文章发布时间2022年10月)
    百度翻译已经更新,现在的百度翻译分为两个阶段翻译,第一个阶段识别你的翻译字符是什么类型语言第二阶段生成随机sign加携带token以post表单方式上传数据,返回json数据尚......
  • 上位笔记_02_父窗体与子窗体打开和关闭
    背景:在winform简单应用中,登录窗体为主窗体,其余为子窗体,在选择通讯子窗体关闭时需要同时关闭登录窗体,在调试子窗体关闭后需要返回选择通讯子窗体   目前使用如下方......
  • 如何优雅的备份MySQL数据?看这篇文章就够了
    大家好,我是一灯,今天一块学习一下如何优雅安全的备份MySQL数据?1.为什么要备份数据先说一下为什么需要备份MySQL数据?一句话总结就是:为了保证数据的安全性。如果我们把数......
  • 如何一键发布技术文章到多个技术博客平台
    项目背景:我是一名拥有7年工作经验的前端开发者,平时工作中,闲暇时间会写一些技术文章记录并分享遇到的问题或者是研究的方向,总结成文章发到不同的技术平台,例如csdn,博客园,掘......
  • 最新3D目标检测文章汇总(包含ECCV20和ACMMM20)
    前言3D目标检测在ECCV20的文章中呈现依旧火热的研究趋势,本文对目前笔者看到过的ECCV20和ACMMM20的3D目标检测文章做一个汇总,分类方法按照该方法是否在对应数据集上实验作为......
  • 最近整理的关于 FastAdmin 开源的文章
    最近整理的关于FastAdmin开源的文章《FastAdmin开源后的惊喜》《在FastAdmin社区如何快速获得答案?》《FastAdmin有些插件为什么要收费?》《开源是什么?(FastAdmin......
  • 一篇文章介绍 符号运算的妙用
    以后把看到的觉得有用的符号运算记录下来。符号运算效率会更高一点,虽然甚微,但是还是有的。我记录的都是实用的,要是用上自己都看不懂,就有点搬石头砸自己的脚了。 ## 判断......
  • 以前文章总结一下事务的原理
     今晚学习了网易微专业的公开课,讲的是事务的相关的问题。这里写一篇文章记录一下。 ## 先看一下一个简单版的 spring 的事务原理全貌图  对于事务问题,之前都是一知......
  • WordPress自定义文章类型
    WordPress里面内置了两种常用的PostType:Post(文章)、Page(页面),分别用来展示两种类型的内容,一种是相对动态的文章,另一种是相对固定的页面。除此之外,WordPress还内置了其......