用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. 完畢。

獲取代碼的唯一途徑：關注『皮爺擼碼』，回覆『代碼』即可獲得。

長按下圖二維碼關注，如文章對你有啓發，歡迎在看與轉發。