用Django全棧開發——17. 文章前端頁面展示

大家好，這是皮爺給大家帶來的最新的學習Python能幹啥？之Django教程，從零開始，到最後成功部署上線的項目。這一節，我們將後端的數據在前端展示出來。

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

上兩節，我們主要是針對後臺的文章功能的開發，這一節，我們需要對前端文章的展示來做修改了。

前端文章頁面回顧

在第12講的時候，我們當時寫了文章詳情頁的樣子，張這個樣子：

我們這一節的任務，就是講文章的內容詳細的在這個文章詳情頁裏面展示出來。

後臺數據填充

如果要展示文章，那麼我們就先得有文章。所以我們現在後臺數據庫填充一篇文章：

我們把第12節的內容文章添加進來。看到文章ID爲3，那麼我們就要把這個文章的顯示到前端detail頁面裏面。我們的URL初步設計爲：http://localhost:8000/detail/<time_id>，文章time_id是20200517。

配置視圖函數

既然我們知道的URL的規則，那麼我們接下來就要寫視圖函數了。

我們之前在Poster下面的url裏，配置了：

path("detail/", views.detail, name="detail"),

但是這個當中並沒有帶time_id，所以，我們應該把time_id加進來，

path("detail/<int:time_id>/", views.detail, name="detail"),

同時還應該修改一下視圖函數：

def detail(request, time_id):
    post = Post.objects.select_related('category', 'author').get(time_id=time_id)
    context = {
        'post_data': post,
    }
    return render(request, 'post/detail.html', context=context)

這樣，我們就將文章放到了一個名爲post_data的變量中，傳遞給了前端，接下來，我們要在前端頁面來集成我們的文章：

<div class="col-md-8">
    <!-- 標題和文章基本信息 -->
    <div class="row" style="background-color: white">
        <div class="col-md-12 mt-4 mb-2">
            <p class="h3">{{ post_data.title }}</p>
            <hr>
        </div>

        <div class="col-md-12">
            <div class="d-flex flex-row">
                <p class="font-weight-light small mr-4">{{ post_data.author.username }}</p>
                <p class="font-weight-light small mr-4"><a href="#" class="text-decoration-none text-dark"><i class="fas fa-list mr-1"></i>{{ post_data.category.name }}</a></p>
                <p class="font-weight-light small mr-4"><i class="far fa-clock mr-1"></i>{{ post_data.publish_time_show | datapicker_format }}</p>
                <p class="font-weight-light small"><i class="fas fa-eye mr-1"></i>閱讀({{ post_data.read_num }})</p>
            </div>
        </div>
    </div>
    <!-- 文章內容 -->
    <div class="row" style="background-color: white">
        <div class="col-md-12 pb-4">
            {% if post_data.is_md %}
                {% autoescape off%}
                {{ post_data.content_html}}
                {% endautoescape %}
            {% else %}
                {{ post_data.content }}
            {% endif %}
        </div>
    </div>
</div>

這個時候，我們看一下前端，發現內容完美顯示出來，但是有個問題，就是圖片大小有問題，還有代碼也有問題，所以接下來我們要調整這些內容。

首先我們要front/src/css/post下面，創建一個scss文件：

接下來，我們要在detail.html頁面中，找到展示文章頁面的那個div，加入一個id，叫做post-content：

<!-- 文章內容 -->
            <div class="row" style="background-color: white">
                <div class="col-md-12 pb-4" id="post-content">
                    {% if post_data.is_md %}
                        {% autoescape off%}
                        {{ post_data.content_html}}
                        {% endautoescape %}
                    {% else %}
                        {{ post_data.content }}
                    {% endif %}
                </div>
            </div>

接下來，我們在那個scss文件中寫入一下代碼：

#post-content{
    p {
        line-height: 28px;
        img{
            width: 100%!important;
        }
    }

    pre {
        background-color: rgb(45,45,45);
        color: #ccc;
        padding: 1.5rem!important;
    }
}

這些代碼的意思是，在id爲post-content模塊中，所以p元素底下的image元素，調整寬度爲100%；pre元素則設置背景顏色和字體顏色。

最後，在front目錄下，終端裏面運行gulp css命令，來生成min.css文件：

然後，我們要在detail.html文件的head block中，引入我們的css文件：

<link rel="stylesheet" href="{% static 'css/post/post_detail.min.css' %}">

小知識
有同學會發現head裏面有兩行代碼：還有，他們倆的作用是爲了避免圖片403錯誤。

這個時候，我們再來看前端頁面：

發現頁面展示的很完美。奈斯，今天的任務完成了。

技術總結

最後總結一下，

文章詳情頁展示：

1. 修改文章詳情頁視圖函數，將id配置到url中；
2. 視圖函數通過id來找到響應的文章，然後傳送到前端；
3. 前端通過Django的DLT模板，來顯示Post的各個內容；
4. 完畢。

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

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