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

文章的评论制作

先做跟评论,在做子评论

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

    {#    评论功能开始#}
    {% 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

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:文章的评论(跟评论与子评论的制作) - Python技术站

(0)
上一篇 2023年4月2日 下午4:46
下一篇 2023年4月2日 下午4:46

相关文章

  • 模板语法之标签

    语法 {% 开始标签 %} …. {% 结束标签%} if标签 例:{% if … %} {% elif %} {% else %} {% endif %} if语句支持 and 、or、==、>、<、!=、<=、>=、in、not in、is、is not判断。 for标签 # for 标签带有一个可选的{% empty %…

    Python开发 2023年4月2日
    00
  • django自带的序列化组件

    1.什么是序列化组件 在django中,自带一个序列化组件,它是用来将数据进行整理、转化成特定的为一个特定的格式(比如json数据格式),然后传输给前端,以便前端对数据进行处理操作。 2.为什么要用序列化组件 当我们从数据库取出一些数据时,我们需要将数据转成特定的格式,比如列表套字典的形式,然后将这些数据序列化成json的格式传输给前端,这就需要我们在后端把…

    Python开发 2023年4月2日
    00
  • 变量与常量

    1.什么是变量 变量是指可以变化的量,量指的是事物的状态,比如年龄,金钱、身高等等 2.为什么要有变量 为了能够让计算机像人一样记忆某一种事物的状态,并且这个状态是可以发生变化的。 程序的执行其实本质就是一系列状态的变化! 3.如何使用变量 (1)变量的基本使用 # 原则:先定义,再引用 name=’zhang’ print(name) (2) 内存管理(垃…

    2023年4月2日
    00
  • 基础数据类型之数字和字符串

    1.数字类型 数字类型的数据可以相互的进行+-/*、也可以进行相互的比较(<>=) 1.1整型int age = 18 记录年龄等整数 print(type(age))# int类型 int()方法可以将其他类型的数据转换成int类型 1.1.2二、八、十六进制的相互转换 1.十进制《—》二进制 # bin()方法 print(bin(11)…

    Python开发 2023年4月2日
    00
  • JWT的介绍和使用

    JWT的含义 Json web token(JWT),是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准(RFC 7519),该token被设计为紧凑且安全的,特别适用于分布式站点的单点登录(sso)场景,JWT的声明一般被用来在身份提供者和服务者间传递被认证的用户身份信息,以便于从资源服务器获取资源,也可以增加一些额外的其他业务逻辑所必须的声…

    2023年4月2日
    00
  • 数据库配置限)不用root用户操作数据库了(为数据库创建用户,并赋予权限)

    步骤 1.为路飞项目创建数据库 在mysql终端输入以下代码: create database luffy charset=utf8; 2.创建数据库用户 create user ‘username’@’host’ identified by ‘password’; 其中username为自定义的用户名;host为登录域名,host为’%’时表示为 任意IP…

    Python开发 2023年4月2日
    00
  • 注册功能页面的搭建

    思路分析 注册页面需要对用户提交的数据进行校验,并且需要对用户输入错误的地方进行提示! 所有我们需要使用forms组件搭建注册页面! 平时我们书写form是组件的时候是在views.py里面书写的,但是为了接耦合,我们需要将forms组件都单独写在一个地方,需要用的时候导入就行! 例如,在项目文件夹下创建一个myforms文件夹,里面放各种forms组件文件…

    2023年4月2日
    00
  • 小程序发布流程、小程序进度条组件、修改data里的局部数据、小程序api位置设置、首页瀑布流展示

    发布 发布流程的问题 方式一 1. 打开图片进行本地预览 2. 输入文字 & 选择相应的信息 3. 点击发布按钮 3.1 将本地图片上传到 腾讯云对象存储中COS(oss),并将COS中的图片地址返回。 3.2 将COS中的图片URL和文字等信息一起提交到后台。 BUG: 在3.2步骤时可能拿不到COS中的图片。 function onClickSu…

    Python开发 2023年3月31日
    00
合作推广
合作推广
分享本页
返回顶部