摘要：刪除的全部代碼，并添加如下代碼第行使用了的一個自定義模板標簽，它讓包含所有的樣式文件。只修改了樣式，并沒有修改代碼。

《Python編程：從入門到實踐》筆記。
本篇將對Django項目做最后的完善。本篇也是這本書的最后一篇。

在本篇中，我們將：

使用Bootstrap庫設置樣式；

把項目部署到Heroku上。

之前關注的都是項目的功能，現在來為項目添加樣式。

我們將使用django-bootstrap3來設置樣式。首先請在虛擬環境中安裝這個第三方庫。

然后像之前在項目settings.py中注冊我們自己編寫的APP一樣，注冊bootstrap3這個應用程序。

還需要包含django-bootstrap3包含jQuery，在settings.py末尾添加如下代碼：

-- snip --
LOGIN_URL = "/users/login/"

# django-bootstrap3的設置
BOOTSTRAP3 = {
    "include_jquery": True,
}

實現訪問項目的每個頁面時，瀏覽器標題都現實這個網站的名稱。另外還添加了一些在模板中使用Bootstrap所需的信息。刪除base.html的全部代碼，并添加如下代碼：

{% load bootstrap3 %}




  
  
  
    
  

  {% bootstrap_css %}
  {% bootstrap_javascript %}

第12行使用了django-bootstrap3的一個自定義模板標簽，它讓Django包含所有的Bootstrap樣式文件。第13行啟用可能在頁面中使用的所有交互式行為，如可折疊的導航欄。

-- snip --

navbar、navbar-default和navbar-static-top是三個選擇器，在nav塊中的內容將根據選擇器在Bootstrap中定義的樣式規則來設置樣式（額，html中選擇器的概念有點忘了，不過不要緊，我們的任務并不是研究HTML）。在第20-28行中是我們之前編寫的判斷語句，只不過被放在了ul塊中，并且設置了一個選擇器navbar-right。

-- snip --


-- snip --


  

    {% block header %}{% endblock %}
  
  

    {% block content %}{% endblock %}
  

 

這部分包含一個div塊，該塊的class屬性是container（容器），容器中包含兩個元素：一個新增的header塊和之前用到的content塊。header塊的內容告訴用戶頁面包含哪些信息以及用戶可以在頁面上執行哪些操作，其class屬性值page-header將一系列樣式應用于這個塊。base.html的修改到此為止。

下面使用新定義的header塊及另一個名為jumbotron的Bootstrap元素修改主頁。jumbotron元素是一個大框，通常用于在主頁中呈現項目的簡要描述，修改index.html：

{% extends "learning_logs/base.html" %}

{% block header %}
  

    
Track your learning.
  
{% endblock header %}

{% block content %}
  

    Register an accountto make your own
    Learning Log, and list the topics you"re learning about.
  
  

    Whenever you learn something new about a topic, make an entry summarizing
    what you"ve learned.
  
{% endblock content %}

在header塊中，我們用一個jumbotron元素來修飾一條簡短的標語，讓首次訪問者大致知道網站功能。隨后再content塊中描述了兩種主要操作。下圖是實際效果：

現在的代碼改進了登錄頁面的整體外觀（因為修改了base.html），現在來改進登錄表單，修改login.html：

{% extends "learning_logs/base.html" %}
{% load bootstrap3 %}

{% block header %}
  
Log in to your account.
{% endblock header %}

{% block content %}

  

    {% csrf_token %}
    {% bootstrap_form form %}

    {% buttons %}
      log in
    {% endbuttons %}
    
  

{% endblock content %}

第2行代碼加載了bootstrap3模板標簽；

header塊描述這個頁面時做什么的；

刪除了之前的 if form.errors代碼塊，因為django-bootstrap3位自動管理表單錯誤；

form塊中添加了屬性“form"，然后使用標簽模板bootstrap_form來顯示表單，這個標簽替換掉了之前的form.as_p；

button也使用Bootstrap樣式進行了替換，下面是實際效果圖：

{% extends "learning_logs/base.html" %}
{% load bootstrap3 %}

{% block header %}
  
Add a new topic:
{% endblock header %}

{% block content %}

  

    {% csrf_token %}
    {% bootstrap_form %}

    {% buttons %}
      add topic
    {% endbuttons %}
  

{% endblock content %}

上面的修改大多都類似于對login.html的修改。

{% extends "learning_logs/base.html" %}

{% block header %}
  
Topics
{% endblock header %}

{% block content %}

  

    {% for topic in topics %}
      

        

          {{ topic }}
        
      
    {% empty %}
      
No topics have been added yet.
    {% endfor %}
  
  
Add a new topic:
  
{% endblock content %}

這里并沒有加載bootstrap3，因為該文件中并沒有使用任何bootstrap3自定義標簽。

topic頁面包含的內容比其他大部分頁面都多，所以樣式設置要多一些，我們將使用Bootstrap面板（panel）來突出每個條目。

{% extends "learning_logs/base.html" %}

{% block header %}
  
{{ topic }}
{% endblock header %}

{% block content %}
  

    add new entry
  

  {% for entry in entries %}
    

      

        

          {{ entry.date_added|date:"M d, Y H:i" }}
          
            edit
              entry
          
        
      
      

        {{ entry.text|linebreaks }}
      
    
 
  {% empty %}
    

      There are no entries for this topic yet.
    
  {% endfor %}

{% endblock content %}

只修改了樣式，并沒有修改Django代碼。下圖是實際效果：

至此已完成了對頁面的修改。

由于對Web應用不是很了解，筆者查閱資料現在大多用Apache和Nginx來部署Web項目，但本書使用Heroku來部署我們的Web項目。

請到Heroku的官網注冊賬號，它提供免費使用服務，并到https://toolbelt.heroku.com/ 下載命令行工具。

同時，還需要在Django項目所在的虛擬環境中安裝一些額外的包：

dj-database-url：幫助Django與Heroku使用的數據庫進行通信；

dj-static，static3：幫助Django正確管理靜態文件（靜態文件包括樣式規則和JavaScript文件）；

gunicorn：一個服務器軟件，能夠在在線環境中支持應用程序提供的服務。

Heroku需要知道我們的項目依賴于哪些包，使用pip命令來生成這個文件：

(venv)learning_log>pip freeze > requirements.txt

下面是這個文件所包含的內容（“如果是Windows系統，看到的內容可能不全”——這是書中提示，然而這里的內容還比書中多了一個pytz）：

dj-database-url==0.5.0
dj-static==0.0.6
Django==2.0.4
django-bootstrap3==9.1.0
gunicorn==19.7.1
pytz==2018.4
static3==0.7.0

在部署項目時，Heroku將創建一個環境，并根據這個文件安裝其中的所有包。也因此，項目部署到Heroku后，行為將與它在本地系統上一樣。

還需要在包列表中添加psycopg2，它幫助Heroku管理活動數據庫。需在requirements.txt最后一行添加如下代碼：psycopg2>=2.6.1。該語句表示，有新版則裝最新版，沒有的話最低安裝2.6.1版本。

如果沒有指定Python版本，Heroku將使用其當前的Python默認版本。下面來確保Heroku使用我們所使用的版本。如果不知道使用的python的版本，請在項目所在虛擬環境中執行python --version：

(venv)learning_log>python --version
Python 3.6.4

再在manage.py所在的文件夾中新建一個名為runtime.txt的文件，輸入Python的版本：

python-3.6.4

注意：單詞小寫，中間有一個連字符！

在settings.py末尾添加一個片段，指定一些Heroku環境設置：

-- snip --
# 書中的判斷語句是 if os.getcwd() == "/app": 
# 現在估計是Heroku升級了，改為了下面的語句，否則待會兒部署的時候會出錯
if os.environ["HOME"] == "/app":
    import dj_database_url

    DATABASES = {
        "default": dj_database_url.config(default="postgres://localhost")
    }

    # 讓request.is_secure()承認X-Forwarded-Proto頭
    SECURE_PROXY_HEADER = ("HTTP_X_FORWARDED_PROTO", "https")

    # 支持所有的主機頭（host header）
    ALLOWED_HOSTS = ["*"]

    # 靜態資產配置
    BASE_DIR = os.path.dirname(os.path.abspath(__file__))
    # 書中設置是這樣的： STATIC_ROOT = "staticfiles"
    STATIC_ROOT = os.path.join(BASE_DIR, "static")
    STATICFILES_DIRS = (
        os.path.join(BASE_DIR, "static"),
    )

第2行中，使用getcwd()函數獲取當前的工作目錄，在Heroku中，這個目錄總/app。在本地部署中，這個目錄通常是項目文件的名稱。這個if測試確保僅當項目被部署到Heroku時才運行這個代碼塊。這種結構讓我們能夠將統一配置文件用于本地開發環境和在線服務器。

在第3行，導入了dj_database_url，用于在Heroku上配置服務器。Heroku使用PostgreSQL（也叫Postgres，一種比SQLite更高級的數據庫），這些配置使得項目在Heroku上使用該數據庫。

其他配置作用分別如下：支持HTTPS請求（第10行）；讓Django能夠使用Heroku的URL來提供項目支持的服務（第13行）；設置項目，使其能夠在Heroku上正確地提供靜態文件（第16-20行）。

Procfile告訴Heroku啟動那些進程，以便能夠正確地提供項目支持的服務。這個文件只包含一行，文件名為Procfile，不帶擴展名，保存到項目根目錄。

web: gunicorn learning_log.wsgi --log-file -

這段代碼讓Heroku將gunicorn用過服務器，并使用learning_log/wsgi.py中的設置來啟動應用程序。標志log-file告訴Heroku應將哪些類型的時間寫入日志。

因為Heroku需要的設置與目前一直使用的設置稍有不同，所以還需要修改wsgi.py文件：

import os

from django.core.wsgi import get_wsgi_application
from dj_static import Cling

os.environ.setdefault("DJANGO_SETTINGS_MODULE", "learning_log.settings")

# 原代碼是 application = get_wsgi_application()
application = Cling(get_wsgi_application())

注意，這里只有第4,9行是添加的，其余都是自帶的。

在Heroku上，Django搜集所有的靜態文件，并將它們放在一個地方，以便高效管理。我們需要手動創建這樣一個文件夾。在項目文件夾learning_log中，也有一個名為learning_log的子文件夾，在這個子文件夾中，新建一個名為static的文件夾，即這個文件夾的路徑為：learning_log/learning_log/static/。由于項目被推送到Heroku時，它將不包含空文件夾，所以，在static文件夾中還需要創建一個占位文件placeholder.txt：

This file ensures that learning_log/static/ will be added to the project.
Django will collect static files and place them in learning_log/static/.

如果你使用的是Linux或OS X，可在部署到Heroku前嘗試在本地使用gunicorn服務器。為此，在虛擬環境中執行命令：

(ll_env)learning_log$ heroku local
Installing Heroku Toolbelt v4... done
-- snip --
forego | starting web.1 on port 5000
web.1 | [2018-04-27 14:00:00 -0800] [12875] [INFO] Starting gunicorn 19.3.0
-- snip --

但如果使用的是Windows，請跳過這個步驟（筆者用的是Windows，所以上面的輸出是從書上照搬過來的）。

Heroku Toolbelt包含Git，這里不再介紹Git怎么安裝。

Git跟蹤誰修改了項目，即便項目由一個人開發。為了實現跟蹤，需要提供用戶名和email，但對于聯系項目，這倆都可以隨便起：

(ll_env)learning_log$ git config --global user.name "example"
(ll_env)learning_log$ git config --global user.email "test@example.com"

我們無需讓Git跟蹤項目中的每個文件，因此將讓Git忽略一些文件。在項目根目錄下創建一個名為 .gitignore 的文件，注意前面有一個實心句點，不含擴展名。在文件中輸入：

ll_env/
__pycache__/
*.sqlite3

忽略ll_env目錄是因為隨時都可以重新創建它；忽略__pycache__是因為這個目錄包含了Django運行.py文件時自動創建的.pyc文件，目前都是本地數據（如果使用的是python2.7，請將__pycache__替換為*.pyc）；沒有跟蹤本地數據庫是因為如果你在服務器上使用的是SQLite，當你將項目推送到服務器時，可能會不小心把服務器上的數據給覆蓋掉。

最后，我們提交項目，而在提交之前需要為我們的項目初始化一個Git倉庫，將所有必要的文件都加入到這個倉庫中，并提交項目的初始狀態，如下：

(ll_env) learning_log>git init
Initialized empty Git repository in E:/Code/Python/learning_log/.git/

(ll_env) learning_log>git add .

(ll_env) learning_log>git commit -am "Ready for deployment to heroku."
[master (root-commit) 4109cbc] Ready for deployment to heroku.
 39 files changed, 745 insertions(+)
 create mode 100644 .gitignore
 -- snip --
 create mode 100644 users/views.py

(ll_env) learning_log>git status
On branch master
nothing to commit, working tree clean

第一個命令在“學習筆記”所在的目錄中初始化一個空倉庫；第二個命令（最后有個句點！）將未被忽略的文件都添加到這個倉庫中；第三個命令中的標志 -a 讓Git在這個提交中包含所有修改過的文件，而標志 -m 讓Git記錄一條日志消息；第四個命令的輸出表明當前位于分支master中，而工作目錄是干凈（clean）的，每當要將項目推送到Heroku時，都希望看到這個狀態。

現在開始推送項目。在項目的虛擬環境中執行下面的命令：

(ll_env) learning_log>heroku login
Enter your Heroku credentials:
Email: kevinwen701@gmail.com
Password: ************
Logged in as kevinwen701@gmail.com

(ll_env) learning_log>heroku create
Creating app... done, ? pure-anchorage-27981
https://pure-anchorage-27981.herokuapp.com/ | https://git.heroku.com/pure-anchorage-27981.git

(ll_env) learning_log>git push heroku master
Counting objects: 46, done.
-- snip --
remote: Verifying deploy... done.
To https://git.heroku.com/pure-anchorage-27981.git
 * [new branch]      master -> master

首先，在終端會話中，使用你在Heroku官網創建的賬號登陸，然后讓Heroku創建一個空項目。Heroku生成的項目名由兩個單詞和一個數字組成（可以修改）。然后我們讓Git將項目分值master推送到Heroku剛才建立的倉庫中；Heroku隨后使用這些文件在其服務器上創建項目。最后輸出信息還給出了訪問這個項目的URL。

大概上述命令執行完后，項目便部署好了，但還未對其做全面的配置。為核實正確地啟動了服務器進程，請執行命令heroku ps：

(ll_env) learning_log>heroku ps
Free dyno hours quota remaining this month: 550h 0m (100%)
For more information on dyno sleeping and how to upgrade, see:
https://devcenter.heroku.com/articles/dyno-sleeping

=== web (Free): gunicorn learning_log.wsgi --log-file - (1)
web.1: up 2018/04/27 16:36:42 +0800 (~ 6m ago)

當執行了這條命令后，輸出指出項目還可在多長時間內處于活動狀態。當超過這個時間后，將顯示標準的服務器錯誤頁面，而稍后我們將設置這個錯誤頁面。在倒數第二行，我們發現啟動了Procfile指定的進程。

現在，我們可以使用命令heroku open在瀏覽器中打開這個APP了：

(ll_env) learning_log>heroku open

它將自動打開瀏覽器，顯示項目的主頁。

要對Heroku項目執行Django和Python命令，可使用命令heroku run：

(ll_env) learning_log>heroku run python manage.py migrate
Running python manage.py migrate on ? pure-anchorage-27981... up, run.9204 (Free)
-- snip --
Operations to perform:
  Apply all migrations: admin, auth, contenttypes, learning_logs, sessions
Running migrations:
  -- snip --
  Applying learning_logs.0003_topic_owner... OK
  Applying sessions.0001_initial... OK

當執行上述命令后，Heroku創建一個終端會話來執行命令migrate（第2行）。從第6行起，Django應用默認遷移以及我們在開發“學習筆記”期間生成的遷移。

現在可以像在本地系統上一樣使用它。然而其中并沒有任何數據，因為之前的測試數據并沒有復制到服務器中，而且也不建議將測試數據復制到服務器中。

從上面的命令可以看出，我們可以使用heroku run來執行一次性命令，但可以這樣執行命令：在連接到了Heroku服務器的情況下，使用命令heroku run bash來打開Bash終端會話。我們將使用Bash終端會話來創建超級用戶，以便能夠訪問在線應用程序的管理網站：

(ll_env) learning_log>heroku run bash
Running bash on ? pure-anchorage-27981... up, run.8093 (Free)
~ $ ls
learning_log  learning_logs  manage.py  Procfile  requirements.txt  runtime.txt  users
~ $ python manage.py createsuperuser
/app/.heroku/python/lib/python3.6/site-packages/psycopg2/__init__.py:144: UserWarning:
The psycopg2 wheel package will be renamed from release 2.8; in order to keep installing
from binary please use "pip install psycopg2-binary" instead. For details see: 
.
  """)
Username (leave blank to use "u10229"): ll_admin
Email address:
Password:
Password (again):
Superuser created successfully.
~ $ exit
exit
(venv) learning_log>

進入Bash后，我們首先執行了ls命令，以查看服務器上有哪些文件和目錄，發現和本地系統相同。然后我們執行了常見超級用戶的命令，執行過程和之前創建超級用戶一樣。現在可以通過在APP的URL后面加/admin/來登陸管理網站了。

由于在服務器上我們的項目名不是learning_log，而是其他自動生成的名字，為此，我們使用一個命令來重命名這個APP：

(ll_env) learning_log>heroku apps:rename kevins-learning-log
Renaming pure-anchorage-27981 to kevins-learning-log... done
https://kevins-learning-log.herokuapp.com/ | https://git.heroku.com/kevins-learning-log.git
Git remote heroku updated
 !    Don"t forget to update git remotes for all other local checkouts of the app.

當前這個項目存在一個嚴重的安全問題：settings.py中包含設置DEBUG=True，它在發生錯誤時顯示調試信息。開發項目時，Django的錯誤頁面向你顯示了重要的調試信息，如果將項目部署到服務器后依然保留這個設置，講給攻擊者提供大量可供利用的信息。我們還需要確保任何人都無法看到這些信息，也不能冒充項目托管網站來重定向請求。

下面修改settings.py文件，以讓我們能夠在本地看到錯誤信息，但部署到服務器后不顯示任何錯誤信息：

-- snip --
if os.environ["HOME"] == "/app":
    -- snip --
    # 只允許Heroku托管這個項目
    ALLOWED_HOSTS = ["kevins-learning-log.herokuapp.com"]
    
    DEBUG = False
    -- snip --

然后我們提交并推送修改。先將修改提交到Git倉庫，在推送到Heroku：

(venv) E:CodePythonlearning_log>git commit -am "Set DEBUG=False for heroku."
[master 563b175] Set DEBUG=False for heroku.
 1 file changed, 6 insertions(+), 4 deletions(-)

(venv) E:CodePythonlearning_log>git status
On branch master
nothing to commit, working tree clean

(venv) E:CodePythonlearning_log>git push heroku master
-- snip --
remote: -----> Python app detected
remote: -----> Installing requirements with pip
-- snip --
remote: -----> Launching...
remote:        Released v7
remote:        https://kevins-learning-log.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/kevins-learning-log.git
   9bc1c2d..563b175  master -> master

Heroku發現倉庫發生了變化，因此重建了項目，確保所有的修改都已生效。它不會重建數據庫，因此本次無需執行命令migrate。

現在如果訪問未定義的擴展將會看到一個標準的錯誤頁面，它不包含任何關于項目的具體信息。

編寫兩個風格與我們項目相符的404和500錯誤頁面模板。這些模板必須放在根模板目錄中。為此，在文件夾leraning_log/learning_log中新建一個文件夾templates，再在這個文件夾中新建一個404.html文件，并輸入如下內容：

{% extends "learning_logs/base.html" %}

{% block header %}
  
The item you requested is not available.(404)
{% endblock header %}

再創建一個名為500.html的文件：

{% extends "learning_logs/base.html" %}

{% block header %}
  
There has been an internal error. (500)
{% endblock header %}

這些新文件要求對settings.py做細微的修改：

-- snip --
TEMPLATES = [
    {
        "BACKEND": "django.template.backends.django.DjangoTemplates",
        "DIRS": [os.path.join(BASE_DIR, "learning_log/templates")],
        "APP_DIRS": True,
        -- snip --
    },
]
-- snip --

在將修改推送到服務器之前，可以在本地查看錯誤頁面時什么樣的，不過得先在本地設置DEBUG=False：

# settings.py文件
# SECURITY WARNING: don"t run with debug turned on in production!
DEBUG = False

ALLOWED_HOSTS = ["localhost"]

現在本地訪問不存在的頁面時將得到我們自定義的錯誤頁面。

最后，想之前一樣，將修改推送到服務器，代碼不再演示，注意為推送添加一條簡短的日志信息。

現在，如果用戶手工請求不存在的主題或條目將導致500錯誤。Django嘗試渲染請求的頁面，但沒有足夠的信息來完成這項任務，進而引發500錯誤。對于這種情況，將其視為404錯誤更合適，為此可使用Django快捷函數get_object_or_404()。這個函數嘗試從數據庫獲取請求的對象，當對象不存在時，引發404錯誤。我們在views.py中導入這個函數，并用它替換函數get()：

from django.shortcuts import render, get_object_or_404
@login_required
def topic(request, topic_id):
    """顯示單個主題及其所有的條目"""
    topic = get_object_or_404(Topic, id=topic_id)
    -- snip --

再次提交并推送修改。

從前面這些例子可看出，開發與部署的過程如下：

①修改項目。如果創建了新文件，使用命令 git add. （最后有個句點！）將它們加到Git倉庫中。如果要遷移數據庫，也需要執行該命令，因為每個遷移都生成了新的遷移文件。

②執行 git commit -am "commit message"，將修改提交到倉庫。

③執行 git push heroku master 將修改推送到服務器。

④如果本地遷移了數據庫，也需要遷移在線數據庫，可以使用一次性命令 heroku run python manage.py migrate ，也可以使用 heroku run bash打開一個遠程終端會話，再執行遷移。

Django根據settings.py中的SECRET_KEY來實現大量的安全協議。本項目中設置的SECRET_KEY對一個練習項目來說已經足夠了，但是對于生產網站，請務必認真對待這個值。

Heroku限制了你可免費托管的項目數，另外，我們也不希望自己的賬戶中塞滿大量的聯系項目。除了可以登錄到Heroku，在應用程序的Settings中手動刪除項目，也可以在命令行中執行如下命令刪除項目：

(ll_env)learning_log$ heroku apps:destroy --app appname

現在大家可以訪問這個網站 https://kevins-learning-log.h... （筆者在免費期過期前不會刪除這個網站）。本篇主要介紹了如何使用Bootstrap來設置網頁的樣式，并學習了如何將項目部署到Heroku的服務器上。至此，Python的Django入門已經完成，這本書也已經看完。暫時告一段落。

迎大家關注我的微信公眾號"代碼港" & 個人網站 www.vpointer.net ~