博客项目实践（6）

urlpatterns = [
    # 文章详情页
    path(‘<str:username>/article/<int:article_id>/‘, views.article_detail),
    # 点赞点踩
    path(‘up_or_down/‘, views.up_or_down),

    # 评论处理
    path(‘comment/‘, views.comment),
]

def article_detail(request, username, article_id):
    """
    优先校验username、article_id是否存在
    """
    user_obj = models.UserInfo.objects.filter(username=username).first()
    blog = user_obj.blog
    # 先获取文章对象
    article_obj = models.Article.objects.filter(id=article_id, blog__userinfo__username=username).first()
    if not article_obj:
        return render(request, ‘errors.html‘)
    # 获取当前文章的所有评论内容
    comment_list = models.Comment.objects.filter(article=article_obj)
    return render(request, ‘article_detail.html‘, locals())

import json
from django.db.models import F
def up_or_down(request):
    """
    校验用户是否登录
    自己不能点赞自己的文章
    用户是否已点赞当前文章
    操作数据库
    """
    if request.is_ajax():
        back_dic = {‘code‘: 1000, ‘msg‘: ‘‘}
        # 当前用户是否登录
        if request.user.is_authenticated:
            article_id = request.POST.get(‘article_id‘)
            is_up = request.POST.get(‘is_up‘)
            # print(is_up, type(is_up))  # true <class ‘str‘>
            is_up = json.loads(is_up)
            # print(is_up, type(is_up))  # True <class ‘bool‘>

            # 当前文章是否是当前用户自己写的
            article_obj = models.Article.objects.filter(id=article_id).first()
            if not article_obj.blog.userinfo == request.user:
                # 校验当前用户是否已经点了
                is_click = models.UpAndDown.objects.filter(user=request.user.username, article=article_obj)
                if not is_click:
                    # 操作数据库 记录数据  要同步操作普通字段
                    # 判断当前用户点了赞还是踩
                    if is_up:
                        # 给点赞数加一
                        models.Article.objects.filter(id=article_id).update(up_num=F(‘up_num‘) + 1)
                        back_dic[‘msg‘] = ‘点赞成功‘
                    else:
                        # 给点踩数加一
                        models.Article.objects.filter(id=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)

from django.db import transaction
def comment(request):
    # 自己可以给自己的文章评论
    if request.is_ajax():
        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‘)
                parent_id = request.POST.get(‘parent_id‘)
                # print(article_id,content, request.user)
                # 直接操作两张表存储数据
                with transaction.atomic():
                    models.Article.objects.filter(id=article_id).update(comment_num=F(‘comment_num‘) + 1)
                    models.Comment.objects.create(user=request.user, article_id=article_id, content=content,
                                                  parent_id=parent_id)
                back_dic[‘msg‘] = ‘评论成功‘
            else:
                back_dic[‘code‘] = 1001
                back_dic[‘msg‘] = ‘用户未登录‘
            return JsonResponse(back_dic)

  1 {% extends ‘base.html‘ %}
  2 
  3 {% block css %}
  4     <style>
  5         #div_digg {
  6             float: right;
  7             margin-bottom: 10px;
  8             margin-right: 30px;
  9             font-size: 12px;
 10             width: 125px;
 11             text-align: center;
 12             margin-top: 10px;
 13         }
 14 
 15         .diggit {
 16             float: left;
 17             width: 46px;
 18             height: 52px;
 19             background: url(‘//static.cnblogs.com/images/upup.gif‘) no-repeat;
 20             text-align: center;
 21             cursor: pointer;
 22             margin-top: 2px;
 23             padding-top: 5px;
 24         }
 25 
 26         .buryit {
 27             float: right;
 28             margin-left: 20px;
 29             width: 46px;
 30             height: 52px;
 31             background: url(‘//static.cnblogs.com/images/downdown.gif‘) no-repeat;
 32             text-align: center;
 33             cursor: pointer;
 34             margin-top: 2px;
 35             padding-top: 5px;
 36         }
 37 
 38         .clear {
 39             clear: both;
 40         }
 41     </style>
 42 {% endblock %}
 43 
 44 
 45 {% block content %}
 46     <h1>{{ article_obj.title }}</h1>
 47     <div class="article_content">
 48         {{ article_obj.content|safe }}
 49     </div>
 50 
 51     {#    点赞踩开始#}
 52     <div class="clearfix">
 53         <div id="div_digg">
 54             <div class="diggit action">
 55                 <span class="diggnum" id="digg_count">{{ article_obj.up_num }}</span>
 56             </div>
 57             <div class="buryit action">
 58                 <span class="burynum" id="bury_count">{{ article_obj.down_num }}</span>
 59             </div>
 60             <div class="clear"></div>
 61             <div class="diggword" id="digg_tips" style="color: red">
 62             </div>
 63         </div>
 64     </div>
 65     {#    点赞踩结束#}
 66 
 67 {#    评论楼开始#}
 68     <div>
 69         <ul class="list-group">
 70             {% for comment in comment_list %}
 71                 <li class="list-group-item">
 72                     <span>#{{ forloop.counter }}楼</span>
 73                     <span>{{ comment.comment_time|date:‘Y-m-d H:m:s‘ }}</span>
 74                     <span>{{ comment.user.username }}</span>
 75                     <span><a class="pull-right reply" username="{{ comment.user.username }}" comment_id="{{ comment.id }}">回复</a></span>
 76                     <div>
 77 {#                        // 判断当前评论是否为子评论#}
 78                         {% if comment.parent_id %}
 79                             <p>@{{ comment.parent.user.username }}</p>
 80                         {% endif %} 
 81                             {{ comment.content }}
 82                     </div>
 83                 </li>
 84             {% endfor %}
 85         </ul>
 86     </div>
 87 {#    评论楼结束#}
 88 
 89 {#    文章评论开始#}
 90     {% if request.user.is_authenticated %}
 91         <div>
 92             <p><span class="glyphicon glyphicon-comment">发表评论</span></p>
 93             <div>
 94                 <textarea name="comment" id="id_comment" cols="60" rows="10"></textarea>
 95             </div>
 96             <button class="btn btn-primary" id="id_submit">提交评论</button>
 97         <span style="color: red" id="error"></span>
 98         </div>
 99     {% else %}
100         <li><a href="{% url ‘reg‘ %}">注册</a></li>
101         <li><a href="{% url ‘login‘ %}">登录</a></li>
102     {% endif %}
103 {#    文章评论结束#}
104 
105 {% endblock %}
106 
107 {% block js %}
108     <script>
109         // 给所有的action绑定事件
110         $(‘.action‘).click(function () {
111             {#alert($(this).hasClass(‘diggit‘))#}
112             let isUp = $(this).hasClass(‘diggit‘);
113             let $div = $(this);
114             // 朝后端发送ajax请求
115             $.ajax({
116                 url: ‘/up_or_down/‘,
117                 type: ‘post‘,
118                 data:{
119                     ‘article_id‘:‘{{ article_id }}‘,
120                     ‘is_up‘:isUp,
121                     ‘csrfmiddlewaretoken‘:‘{{ csrf_token }}‘,
122                 },
123                 success:function (args) {
124                     {#alert(args)#}
125                     if(args.code==1000){
126                         {#alert(args.code);#}
127                         $(‘#digg_tips‘).text(args.msg);
128                         let oldNum = $div.children().text();
129                         $div.children().text(Number(oldNum)+1)
130                     }else {
131                         $(‘#digg_tips‘).html(args.msg)
132                     }
133                 }
134             })
135         });
136 
137         // 设置一个全局变量
138         let parentId = null;
139 
140     // 用户点击评论按钮朝后端发送ajax请求
141     $(‘#id_submit‘).click(function () {
142         let conTent = $(‘#id_comment‘).val();
143         // 判断是否是子评论 如果是 需要我们将@username去除
144         if(parentId){
145             // 找到\n对应的的索引 然后利用切片 但是切片顾头不顾尾 所以需要索引+1
146             let indexNum=conTent.indexOf(‘\n‘)+1;
147             conTent = conTent.slice((indexNum))
148         }
149         $.ajax({
150             url:‘/comment/‘,
151             type: ‘post‘,
152             data: {
153                 ‘article_id‘:‘{{ article_obj.pk }}‘,
154                 ‘content‘:conTent,
155                 ‘parent_id‘:parentId,
156                 ‘csrfmiddlewaretoken‘:‘{{ csrf_token }}‘,
157             },
158             success:function (args) {
159                 {#alert(args)#}
160                 if(args.code==1000){
161                     $(‘#error‘).text(args.msg);
162 
163                     // 清空评论框
164                     $(‘#id_comment‘).val(‘‘);
165 
166                     // 临时渲染评论楼
167                     let userName =‘{{ request.user.username }}‘;
168                     let temp = `
169                     <li class="list-group-item">
170                     <span>${userName}</span>
171                     <div>${conTent}</div></li>
172                     `;
173                     // 生成的标签添加到ul标签内
174                     $(‘.list-group‘).append(temp);
175                     // 提交成功后清空全局的parentId
176                     parentId=null;
177                 }
178             }
179         })
180     });
181 
182     // 给回复按钮绑定点击事件
183     $(‘.reply‘).click(function () {
184         // 获取用户名
185         let commentUserName=$(this).attr(‘username‘);
186         // 修改全局变量
187         parentId=$(this).attr(‘comment_id‘);
188         // 拼接信息
189         $(‘#id_comment‘).val(‘@‘+commentUserName+‘\n‘).focus()
190     })
191     </script>
192 {% endblock %}