其他分享
首页 > 其他分享> > BBS03--文章详情页、点赞点踩、文章评论

BBS03--文章详情页、点赞点踩、文章评论

作者:互联网

1 文章详情页

# url设计
  /username/article/1

# 先验证url是否会被其他url顶替

# 文章详情页和个人站点基本一致 所以用模版继承

# 侧边栏的渲染需要传输数据才能渲染 并且该侧边栏在很多页面都需要使用
  1.哪个地方用就拷贝需要的代码(不推荐 有点繁琐)
  2.将侧边栏制作成inclusion_tag	


# 自定义模板步骤:
  1.在应用下创建一个名字必须叫templatetags文件夹
  2.在该文件夹内创建一个任意名称的py文件
  3.在该py文件内先固定写两行代码
    from django import template
    register = template.Library()
    # 自定义过滤器
    # 自定义标签
    # 自定义inclusion_tag


# 自定义inclusion_tag:left_menu
from django import template
from app01 import models
from django.db.models import Count
from django.db.models.functions import TruncMonth

register = template.Library()


@register.inclusion_tag('left_menu.html')
def left_menu(username):
    # 构造侧边栏需要的数据
    user_obj = models.UserInfo.objects.filter(username=username).first()
    blog = user_obj.blog

    # 左侧三个筛选 (侧边栏的筛选其实就是对article_list再进一步筛选)
    # 1.查询个人站点的文章分类及分类下的文章数
    category_list = models.Category.objects.filter(blog=blog).annotate(count_num=Count('article__pk')).values(
        'name', 'count_num', 'pk')

    # 2.查询个人站点的文章标签及标签下的文章
    tag_list = models.Tag.objects.filter(blog=blog).annotate(count_num=Count('article__pk')).values(
        'name', 'count_num', 'pk')

    # 3.查询个人站点下的文章时间及时间下的文章数
    date_list = models.Article.objects.filter(blog=blog).annotate(month=TruncMonth('create_time')).values(
        'month').annotate(count_num=Count('id')).values('month', 'count_num').order_by('month')
    return locals()

2 文章点赞点踩

2.1 逻辑梳理

# 引入:
  1.浏览器上你看到的花里胡哨的页面,内部都是HTML(前端)代码
  2.那现在我们的文章内容应该写什么???	>>> html代码
  3.如何拷贝文章
    博客园文章--copy outerhtml

  4.拷贝点赞点踩
    1.拷贝前端点赞点踩图标 只拷了html
    2.css也要拷贝
        由于有图片防盗链的问题 所以将图片直接下载到本地

# 课下思考:
  前端如何区分用户是点了赞还是点了踩
    1.给标签各自绑定一个事件
      两个标签对应的代码其实基本一样,仅仅是是否点赞点踩这一个参数不一样而已
    2.二合一
      给两个标签绑定一个事件
        
    # 给所有的action类绑定事件
    $('.action').click(function () {
        alert($(this).hasClass('diggit'))
    })

# 由于点赞点踩内部有一定的业务逻辑,所以后端单独开设视图函数处理



# 前端页面
  1.拷贝博客园点赞点踩前端样式
    html代码 + css代码
  2.如何判断用户到底点击了哪个图标
    恰巧页面上只有两个图标,所以给两个图标标签添加一个公共的样式类
    然后给这个样式类绑定点击事件
    再利用this指代的就是当前被操作对象 
    利用hasClass判断是否有某个特定的类属性,
    从而判断出到底是两个图标中的哪一个
  3.书写ajax代码朝后端提交数据
  
  4.后端逻辑书写完毕之后 前端针对点赞点踩动作实现需要动态展示提示信息
      1.前端点赞点踩数字自增1 需要注意数据类型的问题
            Number(old_num) + 1
      2.用户没有登陆 需要展示没有登陆提示 并且登陆可以点击跳转
            html()
            |safe
            mark_safe()
# 后端逻辑
  1.先判断用户是否登陆
    request.user.authenticated()
  2.再判断当前文字是否是当前用户自己写的
    通过文章主键值获取文章对象
    之后利用orm查询获取文章对象对应的用户对象与request.user比对
  3.判断当前用户是否已经给当前文章点了
    利用article_obj文章对象和request.user用户对象去点赞点踩表中筛选数据如果有数据则点过没有则没点
  4.操作数据库	需要注意要同时操作两张表
    # 前端发送过来的是否点赞是一个字符串 需要你自己转成布尔值或者用字符串判断
    is_up = json.loads(is_up)
    F模块

2.2 代码实现

##### views.py 

# 个人建议:
   写代码先把所有正确的逻辑写完 再去考虑错误的逻辑 不要试图两者兼得

import json
from django.db.models import F
def up_or_down(request):
    """
    1.校验用户是否登陆
    2.判断当前文章是否是当前用户自己写的(自己不能点自己的文章)
    3.当前用户是否已经给当前文章点过了
    4.操作数据库
    """
    if request.is_ajax():
        back_dic = {'code':1000,'msg':''}
        # 1 先判断当前用户是否登陆
        if request.user.is_authenticated():
            article_id = request.POST.get('article_id')
            is_up = request.POST.get('is_up')
            is_up = json.loads(is_up)  # 记得类型转换
            # print(is_up, type(is_up))  # True <class 'bool'>
            # 2 判断当前文章是否是当前用户自己写的  根据文章id查询文章对象 根据文章对象查作者 根request.user比对
            article_obj = models.Article.objects.filter(pk=article_id).first()
            if not article_obj.blog.userinfo == request.user:
                # 3 校验当前用户是否已经点了      哪个地方记录了用户到底点没点
                is_click = models.UpAndDown.objects.filter(user=request.user,article=article_obj)
                if not is_click:
                    # 4 操作数据库 记录数据      要同步操作普通字段
                    # 判断当前用户点了赞还是踩 从而决定给哪个字段加一
                    if is_up:
                        # 给点赞数加一
                        models.Article.objects.filter(pk=article_id).update(up_num = F('up_num') + 1)
                        back_dic['msg'] = '点赞成功'
                    else:
                        # 给点踩数加一
                        models.Article.objects.filter(pk=article_id).update(down_num=F('down_num') + 1)
                        back_dic['msg'] = '点踩成功'
                    # 操作点赞点踩表
                    models.UpAndDown.objects.create(user=request.user,article=article_obj,is_up=is_up)
                else:
                    back_dic['code'] = 1001
                    back_dic['msg'] = '你已经点过了,不能再点了'  
                    # 这里你可以做的更加的详细 提示用户到底点了赞还是点了踩
            else:
                back_dic['code'] = 1002
                back_dic['msg'] = '你个臭不要脸的!'
        else:
            back_dic['code'] = 1003
            back_dic['msg'] = '请先<a href="/login/">登陆</a>'
        return JsonResponse(back_dic)

    
    
#### article_detail.html    
<script>
    //  给所有的action类绑定事件
    $('.action').click(function () {
        let isUp = $(this).hasClass('diggit');    # digg  n.推荐   bury  n.埋葬
        let $div = $(this);
        // 朝后端发送ajax请求
        $.ajax({
            url:'/up_or_down/',
            type:'post',
            data:{
                'article_id':'{{ article_obj.pk }}',
                'is_up':isUp,
                'csrfmiddlewaretoken':'{{ csrf_token }}'
            },
            success:function (args) {
                    if(args.code == 1000){
                        $('#digg_tips').text(args.msg)
                        // 将前端的数字加一
                        // 先获取到之前的数字
                        let oldNum = $div.children().text();  // 文本 是字符类型
                        // 易错点
                        $div.children().text(Number(oldNum) + 1)  // 字符串拼接了 1+1 = 11  11 + 1 = 111
                    }else{
                        $('#digg_tips').html(args.msg)
                    }
            }
        })
    })
</script>

3 文章评论

# 顺序:
  先根评论
  再子评论

# 根评论
    先把整体的评论功能跑通 再去填补
    
  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>
        `
        // 将生成好的标签添加到ul标签内
        $('.list-group').append(temp);
        
    2.页面刷新 永久渲染(render)
    	后端直接获取当前文章对应的所有评论 传递给html页面即可
      前端利用for循环参考博客园评论楼样式渲染评论
      
    3.评论框里面的内容需要清空

   
# 子评论
    从回复按钮入手
    
  点击回复按钮发生了哪些事
    1.评论框自动聚焦	.focus()
    2.评论框里面自动添加对应评论的评论人姓名
        @username\n
    3.评论框内部自动换行
     
        
  # 点击回复按钮之后 我们应该获取到根评论对应的用户名和主键值
    针对主键值 多个函数都需要用 所以用全局变量的形式存储
    
  # 针对子评论内容 需要切割出不是用户写的	"@username\n"
    // 获取用户评论的内容
    let conTent = $('#id_comment').val();
    // 判断当前评论是否是子评论 如果是 需要将我们之前手动渲染的@username去除
    if(parentId){
        // 找到\n对应的索引 然后利用切片 但是前片顾头不顾尾 所以索引+1
       let indexNum = conTent.indexOf('\n') + 1;
       conTent = conTent.slice(indexNum)  // 将indexNum之前的所有数据切除 只保留后面的部分
    }
    
   # 后端parent字段本来就可以为空,所以传不传值 都可以直接存储数据
    
   # 前端针对子评论再渲染评论楼的时候 需要额外的判断
      {% if comment.parent_id %}
           <p>@{{ comment.parent.user.username }}</p>
      {% endif %}
           {{ comment.content }}
        
   # 前端parentId字段每次提交之后需要手动清空 



# 思考:
  1.根评论和子评论点的是同一个按钮: parent_id
    
  2.根评论和子评论的区别
    子评论在其实跟评论的ajax代码中 只需要添加一个父评论id即可

标签:点赞点,--,request,up,评论,user,文章,article
来源: https://www.cnblogs.com/Edmondhui/p/16534793.html