三、BBS制作inclusion_tag、点赞点踩、子评论和根评论思想

郑统京

# 侧边栏制作inclusion_tag
1、当一个页面的局部需要在多个页面使用的时候还需要传参数
自定义inclusion_tag步骤
    ①在应用下创建templatetags文件夹
    ②py文件书写任意的两行代码
    from django import template
    register = template.Library
    @register = inclusion_tag(left_menu)
    def index():
        准备上述需要的数据
        return locals()
[使用inclusion_tag]
<div class="col-md-3">
    {% load mytag %} <!--通过inclusion_tag中只需要传一个username即可-->
    {% left_menu username %}  <!--在base基类中提前定义好username参数，site和article_detail的html中都有都有视图函数传来的username参数，-->
    <!--这样在视图函数中的models直接通过tags.py调用了，视图函数的models直接可以省略不写了-->
</div>
<div class="col-md-9"></div>

# 点赞点踩
[前端页面]
   1、拷贝博客园点赞点踩博客样式
    HTML代码+CSS样式
    2、如何判断了用户是点赞还是点踩了，哪个图标
    恰巧页面只有两个图标，所以给两个图标添加一个公共的样式类，
    然后给这两个公共事件绑定一个点击事件，再利用this指代的当前被操作的对象
    再利用hasClass判断是否有某个特定的类属性，从而判断出到底是两个图标中的哪一个
    3、书写ajax代码朝后端提交数据
        data中需要的参数有：is_up,article_id,csrfmiddlewaretoken
    4、后端逻辑书写完毕之后 前端对于点赞点踩动作实现需要动态展示提示信息
        1.前端点赞点踩数字自增1 需要注意数据类型的问题
            Number(old_num) + 1
        2.用户没有登录 需要展示没有登录提示 并且登录可以点击跳转
            html()
            |safe
            make_safe()
[后端逻辑]
    1、先判断用户是否登录
        request.user.is_authenticated():
    2、当前文章是否使用户自己写的
        通过文章主键值获取文章对象
        之后在利用orm查询获取文章的对应的用户对象与request.user比对
        [article_obj= models.Article.objects.filter(pk=article_id).first()
        if not article_obj.blog.userinfo == request.user：]
    3、判断当前用户是否已经给当前文章点了
        利用article_obj文章对象和request.user用户对象去点赞点踩表中筛选数据
        [is_click = models.UpAndDown.objects.filter(user=request.user,article=article_obj)]
    如果有数据则点过，如果没有数据则没点
    4、操作数据库 需要注意要同时操作两张表
        1、前端发送过来的是否点赞是一个字符串，需要你自己转换成布尔值或者字符串判断
        ①json.load(is_up)
        ②if is_up
        if is_up == 'true' (字符串的布尔值判断也可以)
        2、F模块
[书写代码思想
    在书写较为复杂的业务逻辑可以先按照一条线书写下去，
    之后再去弥补其他线路情况
        类似与树的先主干和后分支

# 子评论、根评论
[先写根跟论，在考虑子评论]
    先把整体的评论功能跑通
    1、书写前端获取用户评论的标签
        可能点赞点踩会有浮动带来的影响
            clearfix
    2、点击评论发送Ajax请求
        提交根评论
    3、后端给评论单独开设url处理
        后端逻辑非常的简单非常少
    4、针对跟评论涉及到两种前端渲染方式
        1.DOM操作临时渲染楼
            需要用到模板字符串
                临时渲染评论楼
                let userName = '{{ request.user.username }}'
                let temp = `
                <li class="list-group-item">
                    <span>${userName}</span>
                    <span><a href="#" class="pull-right">回复</a></span>
                    <div>
                        ${conTent}
                    </div>
                </li> `
                // 将生成好的标签加到到评论楼里面去，append尾部追加一个临时的评论楼
                $('.list-group').append(temp);
        2.页面刷新永久(render)渲染
            后端直接获取当前文章对应的所有评论 传递给html页面即可
            [comment_list = models.Comment.objects.filter(article=article_obj)]
            前端利用for循环参考博客园评论楼样式渲染评论
        3.评论框里面的内容需要清空

[子评论]
    1、从回复按钮入手
        点击回复按钮发生了几件事
            1、评论框自动聚焦 .focus()
            2、评论框自动添加对应评论的评论人和姓名
            [<span><a class="pull-right reply" username="{{ comment.user.username }}" comment_id="{{ comment.pk }}">回复</a></span>
                let commentUserName =$(this).attr('username')
                @ + username+ \n]
    2、思考:
        1、跟评论和子评论点的是同一个按钮
        2、跟评论和子评论的区别
            多了parent_id
            其实之前的ajax代码只需要添加一个父评论id即可
    3、点击回复按钮 要获取根评论的对应的用户名和主键值
    [<span><a class="pull-right reply" username="{{ comment.user.username }}" comment_id="{{ comment.pk }}">回复</a></span>]
    parentId =$(this).attr('comment_id')
    主键值多个变量需要用到 所以用全局变量的形式存储 [let parentId =null]
    4、针对子评论内容需要切割不是用户写的 @username\n
        [判断是否是子评论，如果是则需要手动将@username名字去除掉
        if(parentId){
            // 先找到\n对应的索引 然后利用切片 但是切片是顾头不顾尾 索引索引+1
            let indexNum = conTent.indexOf('\n') +1 ;
            conTent=conTent.slice(indexNum) // 将indexNum所有的数据切除，只保留后面的部分
        }]
    5、后端parent字段本来就可以为空，所以传不传值都可以存储数据
        [parentId = request.POST.get('parent_id')]  
    6、前端针对子评论在渲染楼的时候，需要再加个判断
        {# 判断当前评论是否是子评论 如果是则需要渲染对应的评论人名#}
            {% if comment.parent_id %}
                <p>@{{ comment.parent.user.username }}</p>
            {% endif %}
                {{ comment.content }}
    7、前端parentId字段每次提交之后需要手动的清空
            parentId = null
补充:inclusion_tag代码/templatetags/mytag.pyfrom django import template
from app01 import models
from django.db.models import Count
from django.db.models.functions import TruncMonth

register = template.Library()


# 自定义inclusion_tag
@register.inclusion_tag('left_menu.html')
def left_menu(username): # 把视图函数的site代码拷过来，发现只有username需要传入，那么我们就用形参传入进来即可
    # 构造侧边栏需要的数据
    user_obj= models.UserInfo.objects.filter(username=username).first()
    blog = user_obj.blog
    # 1、查询当前的用户所有分类及分类下的文章数
    category_list = models.Category.objects.filter(blog=blog).annotate(count_num=Count('article__pk')).values_list(
        'name', 'count_num', 'pk')
    # print(category_list) #<QuerySet [('jason的分类一', 2), ('jason的分类二', 1), ('jason的分类三', 1)]>

    # 2、查询所有用户下的标签空标签下文章数
    tag_list = models.Tag.objects.filter(blog=blog).annotate(count_num=Count('article__pk')).values_list('name',
                                                                                                         'count_num',
                                                                                                         'pk')
    # print(tag_list)  # <QuerySet [('tank的标签一', 1), ('tank的标签二', 1), ('tank的标签三', 2)]>

    # 3、按照年月统计所有时间
    date_list = models.Article.objects.filter(blog=blog).annotate(month=TruncMonth('create_time')).values(
        'month').annotate(count_num=Count('pk')).values_list('month', 'count_num')
    # date_list = models.Article.objects.filter(blog=blog).annotate(month=TruncMonth('create_time')).values('month').annotate(count_num=Count('pk')).values_list('month', 'count_num')
    # print(date_list)
    return locals()