ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

DAY15 用户评论点赞的实现

2021-10-25 23:02:34  阅读:199  来源: 互联网

标签:comment count like 用户 DAY15 点赞 action id


表分析

点赞是用户和评论之间发生的事情,并且直接存在着多对多的关系,当点赞发生后会往后台存入数据来记录,也就是需要单独的一张点赞表来进行

记录,点赞表的字段记录用户表的ID和评论表的ID来维持多对多关系。

表结构分析完后就该处理端口了

点赞端口

因为我们需要用到局部刷新,也就是在用户点赞后不刷新页面进行点赞的显示和点赞数的增加,

所以我们的端口规范和之前的评论端口差不多,也就是json格式,post请求格式,返回json。

接收的参数我们只需要评论的ID以及用户进行的行为(action),也就是进行的点赞还是取消点赞

新闻的ID的话,点赞只存在新闻页面里面,所以可以不用判断新闻是否存在

确认参数后就可以进行后台代码的编写了

后台代码

首先还是创建新的视图函数并在文档注释里写入实现功能,记得设置请求方式

  

 完成之后整理思路,在注释里写下思路:

 

第一步

# 1. 获取用户登录状态
    user = g.user
    if not user:
        return jsonify(errno=RET.SESSIONERR,errmsg="用户未登录") 

点赞是只有当用户登录了之后才能进行

第二步

# 2. 接收参数(comment_id,action(add,remove),news_id)
    comment_id  = request.json.get("comment_id")
    action = request.json.get("action")

接收json格式的数据

  

 第三步

# 3. 校验参数
#     3.1 校验参数是否齐全
    if not all([comment_id,action]):
        return jsonify(errno=RET.PARAMERR,errmsg="参数缺失")
#     3.2 判断comment_id,news_id是否为整形
    try:
        comment_id = int(comment_id)
    except Exception as e :
            current_app.logger.error(e)
            return jsonify(errno=RET.PARAMERR,errmsg="非法参数")
#     3.3 判断action的值是否合法
    if action not in ["add","remove"]:
        return jsonify(errno=RET.PARAMERR,errmsg="非法参数")
#     3.4 校验评论是否存在
    try:
        comment = Comment.query.get(comment_id)
    except Exception as e :
            current_app.logger.error(e)
            return jsonify(errno=RET.DBERR,errmsg="数据读取失败")
    if not comment :
        return jsonify(errno=RET.NODATA, errmsg="评论未找到")

  

 对接收的参数进行校验,参数是否齐全,参数的数据类型是否正确,参数是否合法,并通过评论的ID查询评论是否存在。查询放在最后

第四步

# 4.通过action的值来进行不同的操作
    try:
        commentLike = CommentLike.query.filter_by(user_id=user.id,comment_id=comment.id).first()
    except Exception as e:
        current_app.logger.error(e)
        return jsonify(errno=RET.DBERR, errmsg="数据库连接失败")
    if action == "add":
        if not commentLike:
            new_commentLike =CommentLike()
            new_commentLike.comment_id = comment.id
            new_commentLike.user_id = user.id 
            comment.like_count += 1      #对应评论的点赞数
            try:
                db.session.add(new_commentLike)
                db.session.commit()
            except Exception as e :
                current_app.logger.error(e)
                db.session.rollback()
                return jsonify(errno=RET.DBERR,errmsg="保存失败")
    else:
        if commentLike:
            try:
                db.session.delete(commentLike)
                comment.like_count -= 1
                db.session.commit()
            except Exception as e :
                    current_app.logger.error(e)
                    db.session.rollback()
                    return jsonify(errno=RET.DBERR,errmsg="删除失败")

  

首先需要对点赞表中的记录进行查询,然后再通过action的值以及对数据的判断来进行操作,当值为add且不存在数据时添加数据,当值为remove

且值存在时进行删除,另外还需要对该条评论的点赞数字段进行对应的处理,对数据进行操作所以需要回滚

第五步

# 5.返回结果
    return jsonify(errno=RET.OK,errmsg="成功")

 

 返回json,回调函数根据值进行不同的执行。

 

 

前台代码:

js代码:

      // TODO : 点赞
        if(sHandler.indexOf('comment_up')>=0)
        {
            var $this = $(this);
            var action = "add";
            if(sHandler.indexOf('has_comment_up')>=0)
            {
                // 如果当前该评论已经是点赞状态,再次点击会进行到此代码块内,代表要取消点赞
                action = "remove"
            }

            var comment_id = $(this).attr("data-commentid")
            var news_id = $(this).attr("data-newsid")
            var params = {
                "comment_id": comment_id,
                "action": action,
                "news_id": news_id
            }

            $.ajax({
                url: "/news/comment_like",
                type: "post",
                contentType: "application/json",
                headers: {
                    "X-CSRFToken": getCookie("csrf_token")
                },
                data: JSON.stringify(params),
                success: function (resp) {
                    if (resp.errno == "0") {
                        var like_count = $this.attr('data-likecount')

                        if (like_count == undefined) {
                            like_count = 0
                        }

                        // 更新点赞按钮图标
                        if (action == "add") {
                            like_count = parseInt(like_count) + 1
                            // 代表是点赞
                            $this.addClass('has_comment_up')
                        }else {
                            like_count = parseInt(like_count) - 1
                            $this.removeClass('has_comment_up')
                        }
                        // 更新点赞数据
                        $this.attr('data-likecount', like_count)
                        if (like_count == 0) {
                            $this.html("赞")
                        }else {
                            $this.html(like_count)
                        }
                    }else if (resp.errno == "4101"){
                        $('.login_form_con').show();
                    }else {
                        alert(resp.errmsg)
                    }
                }
            })
        } 

 

HTML代码

  <a href="javascript:;" class="comment_up
                    {% if comment.is_like %}
                        has_comment_up
                    {% endif %} fr"
                       data-commentid="{{ comment.id }}"
                       data-likecount="{{ comment.like_count }}"
                       data-newsid="{{ news.id }}">
                    {% if comment.like_count > 0 %}
                        {{ comment.like_count }}
                    {% else %}
                        赞
                    {% endif %}
                    </a>

 

 

前端显示  

完成之后,我们还需要对前端的点赞图标显示进行相关处理,当用户点赞后点赞图标应该是一直高亮的状态,也就是用户下个动作

只能是取消

 

 这是关于我们的详情页显示,所以我们在渲染详情页的视图函数中进行修改,前端已经设定好了判断条件,我们只需将值

从后台传过去就行。

 

 

 

 后台代码:

 

# 6.点赞相关展示
    new_comments = []
    for comment in comments:
        if user:
            if comment in user.collection_comment:
                comment = comment.to_dict()
                comment["is_like"] = True
            else:
                comment = comment.to_dict()
                comment["is_like"] = False
        else:
            comment = comment.to_dict()
        new_comments.append(comment)

   

 我们需要对传入前端评论的上下文进行再构造,并在评论类的转字典函数里添加我们的判断条件"is_like",

只有当用户点赞了这条评论我们才添加,还有只有当用户登录时才能进行相关的判断代码的执行,不然会

报错,我上面是通过在user的模型类里添加了查询字段来进行的用户点赞评论的判断,

 

 

 

 也就是通过第三张表进行评论表的相关操作

还可以通过查询来进行,也就是在评论表找到符合该用户id的所有数据,并通过查询到的数据获取到评论的ID,然后再进行判断评论的ID是否在里面来进行

但是所有的操作都要注意到用户的登录状态,因为都需要用到用户的数据来进行,所以都需要先对用户登录状态进行判断后再进行

  最后将我们构造好的new_comments给前台就行。

 

标签:comment,count,like,用户,DAY15,点赞,action,id
来源: https://www.cnblogs.com/a1551/p/15463700.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有