文章详情页面

本功能需求：

-文章详情页展示

-点赞点踩功能（同一用户只能点一次）

-评论功能（包含子评论）

拓展功能:

-引入md编辑器

一、添加路由

文章详情 urls.py

re_path('^(?P<name>\w+)/article/(?P<id>\d+).html$', views.article_detail)

				

					
				
				

					
				
				

					
				
				

					
				
			

点赞点踩功能urls.py

path('upanddown/', views.upanddown, name='upanddown')

				

					
				
				

					
				
				

					
				
				

					
				
			

评论功能 urls.py

path('comment/', views.comment, name='comment')

				

					
				
				

					
				
				

					
				
				

					
				
			

二、添加视图函数

文章详情展示功能视图函数article_detail

def article_detail(request, name, id):
    user = models.UserInfo.objects.get(username=name)
    article = models.Article.objects.get(id=id)
    md = markdown.Markdown(extensions=[
        'markdown.extensions.extra',
        'markdown.extensions.codehilite',
        'markdown.extensions.toc',
    ])
    content = md.convert(article.markdown)
    toc = md.toc
    # article.toc = article.markdown.toc
    n = content.count('<div class="codehilite">', 0, len(content))
    for i in range(n):
        content = re.sub(r'<div class="codehilite">',
                         '<button id="ecodecopy" class="copybtn btn btn-outline-light btn-sm" '
                         'data-clipboard-action="copy" '
                         'data-clipboard-target="#code{}">复制</button> '
                         '<div class="codehilite" id="code{}">'.format(i, i), content, 1)
    comment_list = models.Comment.objects.filter(article=article)
    return render(request, 'article/Article_Detail.html', locals())

				

					
				
				

					
				
				

					
				
				

					
				
			

点赞点踩功能 视图函数 upanddown

@login_required(login_url='/login/')
def upanddown(request):
    res = {'code': 100, 'msg': ''}
    if request.user.is_authenticated:
        article_id = request.POST.get('article_id')
        user_id = request.user.id
        is_up = json.loads(request.POST.get('is_up'))
        article_obj = models.Article.objects.filter(pk=article_id).first()
        clicked = models.UpAndDown.objects.filter(article_id=article_id, user_id=user_id).first()
        if not request.user == article_obj.blog.userinfo:
            if clicked:
                res['code'] = 101
                res['msg'] = '您已经支持过' if clicked.is_up else '您已经反对过'
            else:
                with transaction.atomic():
                    models.UpAndDown.objects.create(article_id=article_id, user_id=user_id, is_up=is_up)
                    if is_up:
                        models.Article.objects.filter(pk=article_id).update(up_num=F('up_num') + 1)
                        res['msg'] = '点赞成功'
                    else:
                        models.Article.objects.filter(pk=article_id).update(down_num=F('down_num') + 1)
                        res['msg'] = '点踩成功'
        else:
            res['code'] = 103
            res['msg'] = '不能推荐自己的内容' if is_up else '不能反对自己的内容'
    else:
        res['code'] = 104
        res['msg'] = '请先<a href="/login/">登录</a>'
    return JsonResponse(res)

				

					
				
				

					
				
				

					
				
				

					
				
			

评论功能视图函数 comment

@login_required(login_url='/login/')
def comment(request):
    res = {'code': 100, 'msg': ''}
    if request.is_ajax():
        article_id = request.POST.get('article_id')
        content = request.POST.get('content')
        parent = request.POST.get('parent')
        if request.user.is_authenticated:
            article = models.Comment.objects.create(user=request.user, article_id=article_id, content=content,
                                                    comment_id_id=parent)
            models.Article.objects.filter(pk=article_id).update(comment_num=F('comment_num') + 1)
            res['msg'] = '评论成功'
            res['username'] = article.user.username
            res['content'] = article.content
            if parent:
                res['parent_name'] = article.comment_id.user.username
        else:
            res['code'] = 109
            res['msg'] = '请先登录'
 
    return JsonResponse(res)

				

					
				
				

					
				
				

					
				
				

					
				
			

三、文章详情功能涉及的模型层操作

显然,渲染文章详情需要操作文章表Article

点赞点踩要操作表UpAndDown,评论要操作表Comment

尤其需要注意的是,因为评论可能涉及子评论,所以评论表还有子关联的一对多关系

四、文章详情功能前端模板

文章详情页面 在templates文件夹中新建Article_Detail.html(继承前面提到过的基础模板base.html)

{% extends 'template_base/base.html' %}
 
{% block title %}
    {{ article.title }}
{% endblock %}
 
{% block content %}
    <div class="row">
        <div class="col-md-2">
            {% load sideBar %}
            {% left name %}
        </div>
        <div class="col-md-8">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    当前位置：
                    <li class="breadcrumb-item"><a href="/index/">首页</a></li>
                    <li class="breadcrumb-item"><a
                            href="/{{ article.blog.userinfo.username }}">{{ article.blog.title }}</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">{{ article.title }}</li>
                    {% if request.user.username == article.blog.userinfo.username %}
                        <a href="/update_article/{{ article.pk }}" class="ml-auto btn btn-outline-secondary btn-sm m-0">编辑</a>
                    {% endif %}
                </ol>
            </nav>
            <div class="row mx-1">
                <span class="alert alert-warning col-md-4"><strong>发布于：</strong>{{ article.create_time }}</span>
                <span class="alert alert-info col-md-4"><strong>当前时间：</strong><span
                        id="c_time"></span></span>
                <span class="alert alert-success col-md-4"><strong>更新于：</strong>{{ article.modify_time }}</span>
            </div>
            <div class="bg-white-95 radius-5 p-2">
                <h1 class="text-center">{{ article.title }}</h1>
                <hr>
                <div class="mb-2 article-content">
                    {{ content|safe }}
                </div>
 
                <!-- 点赞点踩 -->
                {% if request.user.username %}
                    <hr>
                    <div class="row">
                        <div id="div_digg" class="ml-auto mr-4">
                            <div class="diggit action btn btn-success">
                            <span class="diggnum" id="digg_count">
                                <i class="fa fa-thumbs-o-up"></i>
                                <span>{{ article.up_num }}</span>
                            </span>
                            </div>
                            <div class="buryit action btn btn-danger">
                            <span class="burynum" id="bury_count">
                                <i class="fa fa-thumbs-o-down"></i>
                                <span>{{ article.down_num }}</span>
                            </span>
                            </div>
                        </div>
                    </div>
                {% endif %}
 
                <hr>
                <!-- 评论 -->
                <div style="width: 100%" class="mt-2">
                    <h1 class="text-center">评论区</h1>
                    <ul class="list-group">
                        {% for comment in comment_list %}
                            <li class="list-group-item">
                                <div class="p-0">
                                    <span>#{{ forloop.counter }}楼</span>
                                    <span>{{ comment.comment_time|date:'Y-m-d H:i:s' }}</span>
                                    <span class="">用户：<a
                                            href="/{{ comment.user.username }}">{{ comment.user.username }}</a>
                                    </span>
                                    {% if request.user.username %}
                                        <button class="id_replay btn btn-outline-secondary btn-sm ml-auto d-block"
                                                username="{{ comment.user.username }} " style="margin-top: -28px"
                                                parent="{{ comment.pk }}">回复
                                        </button>
                                    {% endif %}
 
                                </div>
                                <hr class="my-2">
                                <div>
                                    {% if comment.comment_id_id %}
                                        <p>@{{ comment.comment_id.userinfo.username }}</p>
                                        <p>{{ comment.content }}</p>
                                    {% else %}
                                        {{ comment.content }}
                                    {% endif %}
 
                                </div>
                            </li>
                        {% empty %}
                            <div class="alert alert-warning"><h2 class="text-center">当前暂无评论内容</h2></div>
                        {% endfor %}
                    </ul>
 
                </div>
                {% if request.user.is_authenticated %}
                    <div class="mt-2">
                        <p><textarea name="" class="width-b100 radius-5 p-2" id="id_text" rows="10"
                                     placeholder="来都来了，说两句呗！" required></textarea></p>
                        <button class="btn btn-success btn-block mb-2" id="id_comment">发表评论</button>
                    </div>
                {% else %}
                    <div class="mt-2 ml-1 alert alert-warning">
                        登录后才能发表评论，立即 <a href="/login/" class="btn btn-outline-primary btn-sm">登录</a> 或 <a
                            href="/register/" class="btn btn-outline-success btn-sm">注册</a>， 访问 网站首页
                    </div>
                {% endif %}
            </div>
        </div>
        <div class="col-md-2 p-0">
            {{ toc|safe }}
        </div>
    </div>
{% endblock %}
 
{% block js %}
    <script src="/static/js/highlight.js"></script>
    <script src="/static/js/highlight-lines.js"></script>
    <script src="/static/js/clipboard.js"></script>
    <script>
        hljs.initHighlightingOnLoad();
        hljs.initLineNumbersOnLoad();
    </script>
    <script>
        var clipboard = new Clipboard('.copybtn');
        clipboard.on('success', function (e) {
            swal({
                title: '复制成功！',
                text: '如需转载，请注明出处',
                type: 'success',
                timer: 1000,
                showConfirmButton: false,
            })
        });
        clipboard.on('error', function (e) {
            swal({
                title: '复制失败！',
                text: '在试一试吧！',
                type: 'danger',
                timer: 1000,
                showConfirmButton: false,
            })
        });
    </script>
    <script>
        //页面加载调用
        window.onload = function () {
            //每1秒刷新时间
            setInterval("NowTime()", 1000);
        }
 
        function NowTime() {
            var myDate = new Date();
            var y = myDate.getFullYear();
            var M = myDate.getMonth() + 1;     //获取当前月份(0-11,0代表1月)
            var d = myDate.getDate();        //获取当前日(1-31)
            var h = myDate.getHours();       //获取当前小时数(0-23)
            var m = myDate.getMinutes();     //获取当前分钟数(0-59)
            var s = myDate.getSeconds();     //获取当前秒数(0-59)
 
            //检查是否小于10
            M = check(M);
            d = check(d);
            h = check(h);
            m = check(m);
            s = check(s);
            var timestr = y + "年" + M + "月" + d + "日 " + h + ":" + m + ":" + s;
            document.getElementById("c_time").innerHTML = timestr;
        }
 
        //时间数字小于10，则在之前加个“0”补位。
        function check(i) {
            var num = (i < 10) ? ("0" + i) : i;
            return num;
        }
    </script>
    <script>
        var parent_id = ''
        $(".action").click(function () {
            var is_up = $(this).hasClass('diggit')
            var span = $(this).children('span').children('span')
            $.ajax({
                url: '/upanddown/',
                method: 'post',
                data: {
                    article_id: '{{ article.id }}',
                    is_up: is_up,
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                success: function (data) {
                    swal({
                        title: data.msg,
                    })
                    if (data.code === 100) {
                        var num = Number(span.html()) + 1
                        span.html(num)
                    }
                }
            })
        })
 
        $('#id_comment').click(function () {
            let content = $('#id_text').val()
            if (parent_id) {
                let i = content.indexOf('\n') + 1
                content = content.slice(i)
            }
            $.ajax({
                url: '/comment/',
                method: 'post',
                data: {
                    article_id: '{{ article.id }}',
                    content: content,
                    parent: parent_id,
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                success: function (data) {
                    if (data.code === 100) {
                        let username = data.username
                        let res_content = data.content
                        let parent_name = data.parent_name
                        let ss = ``
                        if (parent_id) {
                            ss = `<li class="list-group-item">
                                <div>
                                    <span>${username}</span>
                                </div>
                                <div>
                                <p>@${parent_name}</p>
                                    ${res_content}
                                </div>
                            </li>`
                        } else {
                            ss = `<li class="list-group-item">
                                <div>
                                    <span>${username}</span>
 
                                </div>
                                <div>
                                    ${res_content}
                                </div>
                            </li>`
                        }
                        $('#id_text').val('')
                        $('.list-group').append(ss)
                        parent_id = ''
                    }
                }
            })
        })
 
        $('.id_replay').click(function () {
            let username = $(this).attr('username')
            parent_id = $(this).attr('parent')
            $('#id_text').val('@' + username + '\n').focus()
        })
    </script>
    <script>
        $('body').attr('style', 'background:url(/media/{{ article.blog.userinfo.bg_img }}) !important;background-attachment: fixed !important;background-size: cover !important;')
    </script>
{% endblock %}