用Django全棧開發——21. 大規模優化整理

大家好，這是皮爺給大家帶來的最新的學習Python能幹啥？之Django教程，從零開始，到最後成功部署上線的項目。這一節，我們將對之前寫的程序進行一下優化整理。

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

皮爺的每一篇文章，都配置相對應的代碼。這篇文章的代碼Tag是Post_021

在上幾節，我們基本把網站的功能都開發了，這一節，我們需要

針對Dashboard的頁面優化；
開發文章列頁；
頂部導航欄的功能還有。

Dashboard優化

目前，我們的Dashboard長這個樣子：

就會發現左邊的列表太長了，我們需要把它摺疊起來，而且，我們點擊每一個頁面，左側的標籤也不會變成藍色。我們就針對這兩個功能研發。

功能位摺疊

我們所謂的摺疊，是目前我們總共有:Category, Tag, Post還有ExchangeLink這四項內容。我們可以摺疊成四個項，然後每一項底下又有子菜單。這個功能其實在AdminLTE的例子裏面就有實現：

我們這邊也來實現以下。其實很簡單，只要將cms/base/sidebar.html下的代碼重新編輯一下就好，我們以爲Post例：

<li class="nav-item has-treeview">
    <a href="{% url 'cms:post_manage_view' %}" class="nav-link">
      <i class="nav-icon far fa-copy"></i>
      <p>
        Post
        <i class="right fas fa-angle-left"></i>
      </p>
    </a>
    <ul class="nav nav-treeview">
      <li class="nav-item">
        <a href="{% url 'cms:post_manage_view' %}" class="nav-link">
          <i class="nav-icon fas fa-list"></i>
          <p>Post Management</p>
        </a>
      </li>
      <li class="nav-item">
        <a href="{% url 'cms:post_publish_view' %}" class="nav-link">
          <i class="nav-icon far fa-plus-square"></i>
          <p>Post Publish</p>
        </a>
      </li>
    </ul>
</li>

此刻，我們的頁面就變成了這樣：

接下來，我們就來在每一個item裏面添加active，即點擊這個頁面，它對應的tab就高亮顯示，還是以Post爲例：

{% url 'cms:post_manage_view' as post_manage_view %}
{% url 'cms:post_publish_view' as post_publish_view %}
<li class="nav-item has-treeview {% if request.path == post_manage_view or request.path == post_publish_view %}menu-open{% endif %}">
    <a href="{{ post_manage_view }}" class="nav-link {% if request.path == post_manage_view or request.path == post_publish_view %}active{% endif %}">
      <i class="nav-icon far fa-copy"></i>
      <p>
        Post
        <i class="right fas fa-angle-left"></i>
      </p>
    </a>
    <ul class="nav nav-treeview">
      <li class="nav-item">
        <a href="{{ post_manage_view }}" class="nav-link {% if request.path == post_manage_view %}active{% endif %}">
          <i class="nav-icon fas fa-list"></i>
          <p>Post Management</p>
        </a>
      </li>
      <li class="nav-item">
        <a href="{{ post_publish_view }}" class="nav-link {% if request.path == post_publish_view %}active{% endif %}">
          <i class="nav-icon far fa-plus-square"></i>
          <p>Post Publish</p>
        </a>
      </li>
    </ul>
</li>

爲什麼要這樣做？是因爲在Django1.3之後，我們的URL可以動態的綁定了。即我們綁定post_manage_view變量爲cms:post_manage_view，然後，在需要添加active的class裏面，通過if標籤做判斷就可以了。

完全實現了動態綁定。

這樣就實現了完美的顯示藍色標籤。

文章列表頁

接着，我們在前端，有首頁，還有文章詳情頁，但是我們缺少一個文章列表頁。所以我們就利用之前做好的東西，來迅速的開發一個文章詳情頁。

利用之前重構首頁的開發邏輯，我們的文章列表頁，有點像首頁左側下面的那個文章列表。所以，我們就在template/post/目錄下，創建一個list.html文件，用來寫我們的列表頁。

這個頁面也和其他頁面一樣，需要繼承base/index_base.html頁面，然後我們就直接搬運首頁的佈局來這裏就可以：

{% extends 'base/index_base.html' %}
{% load post_filters %}

{% block title %}
Peekpa Post List
{% endblock %}

{% block head %}

{% endblock %}

{% block main %}
<div class="container mt-4 mb-4">
    <div class="row">
        <div class="col-md-8">
            
            <!-- 文章列表 -->
            <div class="row mt-3">
                <ul class="col-sm-12 d-block">
                    {% for post in list_post %}
                        <!-- 文章 -->
                        <li class="row mb-3" style="height: 180px;background-color: white">
                            <div class="col-sm-4 p-3 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">
                                    <div class="position-absolute mt-3"
                                         style="top:0;background-color: rgba(32,120,255,0.5)">
                                        <p class="small m-1 text-light">{{ post.category.name }}</p>
                                    </div>
                                </a>
                            </div>
                            <div class="col-sm-8 d-flex flex-column">
                                <p class="h5 mt-3 border-bottom mb-0 pb-2">
                                    <a href="{% url 'post:detail' time_id=post.time_id %}" class="text-decoration-none text-dark">{{ post.title }}
                                    </a>
                                </p>
                                <p class="small mt-2" style="font-size: 95%;">{{ post.description }}</p>
                                <div class="d-flex flex-row justify-content-between mt-auto">
                                    <p class="font-weight-light small pl-1 mb-3">{{ post.author.username }}</p>
                                    <p class="font-weight-light small pr-1 mb-3">閱讀({{ post.read_num }})</p>
                                    <p class="font-weight-light small pr-1 mb-3">{{ post.publish_time_show | time_since }}</p>
                                </div>
                            </div>
                        </li>
                    {% endfor %}

                </ul>
            </div>

        </div>

        {% include 'base/right_section.html' %}

    </div>
</div>
{% endblock %}

複製index.html，然後刪除代碼，整個頁面創建過程不到30秒，超級迅速。

既然頁面已經創建好，我們接下來就要寫視圖函數了。這個視圖函數也非常簡單，就是讀取所有數據，然後傳遞到這個頁面就可以了。

def post_list_view(request):
    list_post = Post.objects.all()
    context = {
        'list_post': list_post
    }
    context.update(get_read_most_post())
    context.update(get_exchange_link())
    return render(request, 'post/list.html', context=context)

然後在urls.py文件裏面配置一下：

urlpatterns = [
    path("list/", views.post_list_view, name="post_list"),
]

完事兒，我們直接在瀏覽器裏面輸入http://localhost:8000/list/然後看文章列表：

非常的完美，並且每篇文章都支持跳轉。

這個頁面的開發，整個過程不超過2分鐘。這個就是程序員的思維，只要結構好，日後擴展都非常的輕鬆。

頂部導航欄優化

最後就是頂部導航欄的優化了。我們看到頂部的導航欄所在的文件是templates/base/navbar.html，這裏有兩種思路來優化：

直接在navebar.html文件裏面的a標籤寫死。就像:
<li class="nav-item mr-4"><a class="nav-link" href="#">首頁</a></li>
一樣；
後臺創建一個標籤模型，後端管理工具，然後前端的請求和之前的友鏈是一模一樣的。只需要將數據塞給一個變量，然後把變量傳送到前端就可以。

這兩種開發，各有各的好處：

第一種開發好處是：非常迅速，寫死即可，只需要修改html文件；壞處：不靈活，死板，不方便動態維護；
第二種開發的好處，自然就是方便靈活；壞處則是，需要開發很多代碼。

這裏，具體怎麼實現，我就不做過多解釋了，大家可以參考我的源碼，因爲這一塊的東西，不管是寫死還是寫活，前面的章節都有很詳細的說明（寫活的方法直接參考友鏈開發章節）。

所以，最後我們的頁面就變成了這樣（注意頂部的active高亮顯示），首頁：

文章列表：

技術總結

最後總結一下，

Dashboard頁面優化：

Dashboard頁面的優化，主要參考的就是AdminLTE官方的例子；
難點就在於點擊tab item之後，item高亮顯示的問題；
高亮顯示的問題，需要使用到Django的DLT模板中的url標籤還有if標籤，將url先維護到一個變量中，然後判斷條件則是路徑是否和url一致，如果一致，則在class裏面添加active；
完畢。

文章列表頁面：

觀察，和首頁結構一樣；
所以就複製一份index.html，然後將左側頂部的文章去掉即可；
既然邏輯和首頁一樣，我們就只需要複製一份首頁的視圖函數，同樣把頂部的文章去掉；
完畢。

NavBar的實現：

方法一，寫死；
方法二，寫後臺管理程序，前端請求接口，相當於寫活了；
當然還有更好的方法，前端部分寫死，後端寫活，這樣是最靈活的，我們下節課說；
完畢。

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

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

用Django全棧開發——21. 大規模優化整理

Dashboard優化

功能位摺疊

文章列表頁

頂部導航欄優化

技術總結

用Django全棧開發（進階篇）——01. 如何讓Django連接MongoDB

實用小技巧---如何給全部網頁截圖

用Django全棧開發——28. 部署之準備服務器

用Django全棧開發——29. 部署之阿里雲CentOS+Nginx+uWsgi+Django

用Django全棧開發——26. 開發Dashboard功能展示頁面

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結