2022 iThome 鐵人賽

【Day 07】 初探 Django Templates

昨天我們修改member的urls.py、views.py和myworld的urls.py回應訪問者請求並讓網頁顯示Hello World!。而今天我們會透過回傳Template的方式，將.html檔回傳到訪問者那端，而不再只是回傳簡單的字串並顯示在網頁上。

新增 Templates 資料夾

在【Day 02】Django 簡介，有提及Template其實就是.html檔，而Templates就是收納這些Template的資料夾。但觀察members會發現裡面並沒有一個名為Templates的資料夾，所以我們要先自己建資料夾並在裡面建好一個.html檔。

接著修改新建的.html檔如下 :

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>

<h1>Hello World!</h1>
<p>Welcome to my first Django project!</p>

</body>
</html>

修改 View

新增完templates資料夾和.html檔後，接著修改members的views.py。
還記得我們之前寫了一個名為index的方法用來回應訪問者請求並回傳Hello World!嗎?
在這一小節，我們需要修改這個方法，讓它把我們建立好的.html檔回傳到訪問者的瀏覽器上並顯示出來。

將members的views.py修改如下 :

1
2
3
4
5
6
from django.http import HttpResponse
from django.template import loader #用來載入template的套件

def index(request):
  template = loader.get_template('myfirst.html')
  return HttpResponse(template.render()) #回傳template
  • loader.get_template(‘myfirst.html’)
    • 讀取名為myfirst.html的檔案並回傳一個Template物件
  • template.render()
    • 將Template物件渲染到瀏覽器上(意同於讓訪問者瀏覽myfirst.html這個檔案)

安裝 App

看到這邊可能會有點疑問，為什麼昨天的Hello World!網頁不需要做這一步呢? 因為想做到更多更複雜的事，我們就必須要正式安裝App，讓我們的Django Project認識members這個App。

打開myworld下面的settings.py，接著修改一個叫做IINSTALLED_APPS的list就像下面這樣 :

1
2
3
4
5
6
7
8
9
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'members.apps.MembersConfig'
]

這樣就成功安裝members這個App囉! 當project不再需要members這個App，只要刪除'members.apps.MembersConfig'這行就可以輕鬆卸載，真的是非常方便的插拔機制。

把members.apps.MembersConfig改成members也可以，但比較建議使用前者。

啟動 Server

最後，我們要來檢視剛剛寫的網頁囉!

跟前面一樣需要做以下的事 :

  1. 打開CMD並切換到虛擬環境(python venv)的資料夾路徑下

    (實際venv路徑不一定會跟我一樣喔!)

  2. 輸入以下指令啟動虛擬環境

    1
    Scripts\activate.bat

    啟動虛擬環境後結果如下:

  3. 接著切換路徑到Django Project所在的資料夾下

  4. 接著輸入以下指令Start Server

    1
    py manage.py runserver

  5. 在瀏覽器輸入對應的網址(127.0.0.1:8000/members/)就可以看到index(view)，在收到我們的request後，把myfirst.html這個temlate回傳到瀏覽器並渲染顯示在畫面上

到這邊今天的內容就算結束了，不過再補充一個小東西。
目前在Run Server後，都會看到下面這樣的提示:

1
2
3
You have 18 unapplied migration(s). 
Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.

想要不出現這些提示的方法也很簡單，先Stop Server並照提示內容輸入以下指令 :

1
python manage.py migrate

接著再次Run Server就會發現提示訊息不見了 :

至於python manage.py migrate到底在做什麼，之後會用番外篇做更清楚的介紹。

分享到