用Django全栈开发——19. 热门文章数据展示

大家好，这是皮爷给大家带来的最新的学习Python能干啥？之Django教程，从零开始，到最后成功部署上线的项目。这一节，我们将实现热门文章挑选。

Peekpa.com的官方地址：http://peekpa.com

前两节，我们说了文章详情页还有首页是如何接入文章数据的，那么，这一节我们还要说文章的数据接入，是右侧栏的阅读专栏数据接入。

页面回顾

右侧的阅读排行专栏，出现在首页还有文章详情页这两个页面中。虽然是两个页面，但是他们使用的确实同一个html文件模板，即base/right_section.html文件：

所以，我们这一节就来将这里面的数据填充进去。

分析做法

经过上两节课的实战积累，我们来看这里，其实思路很简单，想要将数据填充进HTML文件，无非就是这么几步：

• 在视图函数中，从数据库里面读取出来数据；
• 将数据以context的形势传送到前端；
• 前端页面，通过DTL里面的各种标签，来做展示。

所以，我们这里就打算这么来搞。

视图函数

既然首页还有文章详情页都有这个版块内容，那么我们就先写一个函数方法，功能是从数据库里面读取数据，然后放到一个read_post变量中：

def get_read_most_post():
    read_post = Post.objects.all().order_by('-read_num')
    if len(read_post) > 5:
        read_post = read_post[:5]
    context = {
        'read_post': read_post
    }
    return context

我们这里取阅读前五的文章，因为首页还有文章详情页都用到了这个数据，所以我们需要在index(request)还有detail(request)这两个视图函数里，添加一行context.update(get_read_most_post())，以index为例：

def index(request):
    top_post = Post.objects.filter(is_main_page=True).order_by('-priority')
    list_post = Post.objects.filter(is_main_page=False)
    context = {
        'top_post': top_post,
        'list_post': list_post
    }
    context.update(get_read_most_post())
    return render(request, 'post/index.html', context=context)

这样，我们的阅读榜的数据就会放在read_post里面，传送到前端。

前端适配

既然后端传送的数据放到了read_post里面，我们这边就需要在base/right_section.html文件里面做适配：

{% if read_post %}
    <!-- 文章板块 -->
    <div class="row ml-1 mt-4" style="background-color: white">
        <div class="col-sm-12 mt-4">
            <p class="h5 border-bottom pb-2 mb-2 ml-1 pl-0 mr-1 pr-0">『皮爷撸码』阅读排行榜</p>
        </div>
    </div>
    <!-- 文章列表 -->
    <div class="row ml-1" style="background-color: white">
        <ul class="col-sm-12 d-block">
            {% for post in read_post %}
                <!-- 列表内容 -->
                <li class="row mt-2 mb-2 pb-2 ml-0 pl-1 mr-0 pr-1 border-bottom " style="height: 100px;">
                    <div class="col-sm-5 pl-0 h-100">
                        <a href="{% url 'post:detail' time_id=post.time_id%}" class="w-100 h-100">
                            <img src="{{ post.thumbnail }}" class="w-100 h-100">
                        </a>
                    </div>
                    <div class="col-sm-7 d-flex flex-column pl-0 pr-0 mt-1">
                        <p class="h6" style="font-size: .9rem"><a href="{% url 'post:detail' time_id=post.time_id%}" class="text-decoration-none text-dark">{{ post.title }}</a>
                        </p>
                        <div class="d-flex flex-row justify-content-between mt-auto">
                            <p class="font-weight-light small mb-0">阅读({{ post.read_num }})</p>
                            <p class="font-weight-light small mb-0">{{ post.publish_time_show | datapicker_format  }}</p>
                        </div>
                    </div>
                </li>
            {% endfor %}

        </ul>
    </div>
{% endif %}

非常的简单，而且非常的清晰。这个时候，我们再来看一下前端页面的结果：

完美，阅读榜单的数据就出来了，而且，点进去还能跳转到文章详情页。

技术总结

最后总结一下，

阅读榜接入文章数据：

1. 写视图函数，实现满足需求的方法， 将结果放到一个字典中；
2. 在需要使用数据的地方，调用context.update(get_read_most_post())来补充进去数据；
3. 前端通过Django的DLT模板，来显示Post的各个内容，文章详情页的URL，使用{% url 'post:detail' time_id=xxx.time_id %}来传递；
4. 完毕。

获取代码的唯一途径：关注『皮爷撸码』，回复『代码』即可获得。

长按下图二维码关注，如文章对你有启发，欢迎在看与转发。