2024 網頁x人因xDjango 實務課程 04 建立一個新的網頁
前言
還記得那時候剛建立起一個自己的網頁，真的超興奮又超開心的，雖然只是一個簡單，沒有什麼內容的網頁，卻能讓自己開心一整天。我想這就是學習有興趣的東西，會產生的效果吧。
那麼廢話不多說，今天我們將學習到，建立一個新網頁的整個流程。
資料來源：DALL-E 生成
整理好你的思緒，深深吸一口氣，讓我們在 2024 這嶄新的一年當中，開始新的學習之旅吧。
基本流程
如何建立一個新的網頁呢？其實我們在上個課程中就有教授到，一個網頁的流程。如果大家忘記的話，我來幫大家回顧一下：
回顧
【User】
- 輸入
網址想要瀏覽貼文
【Urls】
- 收到
User的網址 - 找到在
Views當中這個網址相對應的方法 - 向
Views呼叫這個方法
【Views】
- 啟用
這個方法 - 準備
使用者名稱的資料 - 向
Models請求使用者名稱
【Modles】
- 收到
Views對使用者名稱的請求 - 找到相對應的
使用者名稱 - 回傳
使用者名稱給Views
【Views】
- 收到
Models回傳的使用者名稱 - 處理這個
使用者名稱 - 接著，準備
貼文內容 - 向
Models請求貼文內容
【Models】
- 收到
Views對貼文內容的請求 - 找到相對應的
貼文內容 - 回傳
貼文內容給Views
【Views】
- 收到
Models回傳的貼文內容 - 處理這個
貼文內容 - 向
Templates請求貼文的網頁模板
【Templates】
- 收到了
Views對貼文的網頁模板的請求 - 找到
貼文的網頁模板 - 回傳
貼文的網頁模板給Views
【Views】
- 收到了
Templates回傳的貼文的網頁模板 - 將
使用者名稱跟貼文內容塞進去這個貼文的網頁模板 - 準備好了
完整的貼文網頁 - 將這個
完整的貼文網頁回傳給User
【User】
- 看見
完整的貼文網頁
總結
簡要來說的話，我們總共需要設置三個東西，分別是：
Templates : 設置網頁
Views : 設置相對應的方法
Urls : 設置相對應的網址
接下來，就讓我們開始實際的操作流程吧。
設置 Templates 網頁
打開 Templates 資料夾
首先讓我們找到 Templates 這個資料夾。
新增一個網頁
點擊 像是紙張的按鈕，新增檔案，並取名為 index.html 。
打上內容
接著打開這個 index.html 的檔案。
打開後，輸入一個驚嘆號，就會跑出這個選項：
請點擊第一個，也就是只有一個驚嘆號的選項，他將為你創建一個空白的 html 模板，像是這樣：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
此時，請在 <body> 與 </body> 之間，打上一串 <h1>{{name}}</h1>。像是這樣：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>
{{name}}
</h1>
</body>
</html>
這一串 {{name}} 是為了讓這個網頁，可以取得 Views 中的 name，然後顯示在網頁上。至於為什麼要這樣，我們將在等等的 Views 設置當中介紹，大家可以不用著急去懂。
那至此，我們就成功建立好一個網頁了。
設置 Views 方法
接著我們要寫一個 Views 的方法，去讓 Views 可以將相對應的網頁回傳給使用者。
打開 Views.py
首先讓我們打開 Views.py 。
方法格式
def [方法名](request):
## 範例
def Index(request):
新增一個方法
由於我們要建立一個，專門回傳 Index.html 的網頁，因此我們的方法名取名為 Index ，那讓我們直接建立吧。
from django.shortcuts import render
# Create your views here.
def Index(request):
準備好 name 這個參數
接著呢，讓我們在這個方法裡面，開始撰寫程式碼吧！由於剛剛我們在 Index.html 當中，有寫一串字 {{name}} ，這個是到時候在回傳之前，要讓我們將 name 這個參數準備好，要塞進去網頁用的。因此現在，就讓我們來準備這個參數吧。
from django.shortcuts import render
# Create your views here.
def Index(request):
context = {
'name' : "Ting",
}
首先，context 這個東西，蒐集了等等我們要給網頁的所有東西，裡面會很清楚的定義，要傳的是什麼，而內容又是什麼。
大家可以發現， context 裡面的內容，是由左邊一串字，右邊一串字組成。以裡面唯一的一個東西為例，左邊的 name 代表了 這個參數的名稱。而右邊的 Ting ，則是代表了 這個參數的值 。
所以格式是這樣子的：
context = {
'[參數名稱]' : "[參數的值]",
}
假設我想新增大量的參數，可以像這樣：
context = {
'name' : "Ting",
'age' : "20",
'sexual' : "boy",
}
如果這邊還沒搞懂的話沒關係，我將在後續課程補上更詳細的內容，這邊只是想帶大家了解新增一個網頁的過程，並結合先前介紹的前後端概念而已。
回傳
接著，我們準備好參數後，就準備要寫一串專門回傳給使用者的程式碼。
from django.shortcuts import render
# Create your views here.
def Index(request):
context = {
'name' : "Ting",
}
return render(request, 'Index.html', context)
這個 render 是 django 內建的一個方法，用於讓我們回傳給使用者的一個方法。裡面會包含三種參數：
- request：這個
request的名稱，必須與def Index(request)小括弧中的request相符合。 - html：這邊是放置，你希望回傳給使用者的網頁。以這邊為例，則是放置了首頁的網頁，也就是
Index.html。 - context：這邊則是放置，你要準備給網頁的所有參數。請注意，
context這個名稱，必須與上面的context名稱相符合才行。
因此，根據我們的需求，就會長成這樣：
- request ： 這邊與上面的方法一樣寫
request不會變。 - html ： 由於我們要回傳的是首頁，所以這邊要寫
Index.html。 - context：由於我們準備的參數的集合就叫做
context，所以這邊寫context不用變。
至此，我們的方法也寫好了。
設置 Urls 網址
打開 Urls.py 檔案
首先讓我們找到 Urls.py 這個檔案，並且打開它。
網址格式
那大家可以看到一串叫做 urlpatterns 的部分，而這個就是用來設置我們所有的網址。大家可以發現，他裡面已經有一個網址了，長這樣：
urlpatterns = [
path('admin/', admin.site.urls),
]
沒錯，這個網址就是我們前幾次課程中用來，進入管理頁面的網址 http://127.0.0.1:8000/admin/。
那大家可以仔細觀察一下這個網址的格式，格式就如下：
path('[你想要取的網址]/', [指定的 Views].[要向 views 呼叫的方法], name = "[想要為這個網址，取得簡短名稱]"),
因此，我們如果想寫一個回傳首頁的網址，就可以寫成這樣：
path('Index/', post_views.Index, name = 'Index'),
在這裡，我把網址取作 Index ，接著從 post_views 中使用 Index 這個方法做回傳，最後將這個網址簡稱為 Index 。
但在把這串寫到 urlpatterns 之前，我們可別忘了把 Views 給引用進來。
大家還記得嗎，views.py 是在 我們創建的新的 app 底下的，所以其實每個 app 都有相對應的 views。
因此，如果我們要使用不同 app 的 views.py 時，都要特別去引用起來。像是這樣：
## 格式
from [app 名稱] import views as [你想取的名稱]
## 範例
from post import views as post_views
這邊建議 as 後面的名稱，盡量取 [app名稱]_views ，這樣才能更好的分辨，哪個 views 是給哪個 app 運作的。
接著，讓我們把這串加到程式碼裡：
from django.contrib import admin
from django.urls import path
## 引用 post 當中的 views
from post import views as psot_views
urlpatterns = [
path('admin/', admin.site.urls),
]
最後，便可將剛剛的網址，也加進去 urlpatterns 裡面。像這樣：
from django.contrib import admin
from django.urls import path
## 引用 post 當中的 views
from post import views as psot_views
urlpatterns = [
path('admin/', admin.site.urls),
path('Index'/, post_views.Index, name = 'Index'),
]
測試
輸入指令
接著讓我們輸入這串指令，執行 Django 程式。
PS E:......>Python manage.py runserver
輸入網址
然後，我們便能在瀏覽器中，輸入這個網址 http://127.0.0.1:8000/Index/ 來檢查是否真的有成功設置好。
最終結果
大家可以發現，剛剛設置的 'name' : 'Ting' ，真的有將 Ting 這個文字傳給網頁上。最後，讓我們來回顧一下之前學的概念，以結合這次的實際流程操作。
最終回顧
MTV 回顧
這次我將以，我們剛剛實際建立的 首頁 作為流程範例，詳細解釋剛剛的整個流程。
【User】
- 輸入
http://127.0.0.1:8000/Index/想要瀏覽貼文
【Urls】
- 收到
User的http://127.0.0.1:8000/Index/ - 透過
path('Index'/,post_views.Index, name = 'Index'),使用在post_views當中的方法Index - 向
post_views呼叫Index
【Views】
- 啟用
Index - 準備
Context中'name' : 'ting'的資料
- 向
Templates請求Index.html
【Templates】
- 收到了
Views對Index.html的請求 - 找到
Index.html - 回傳
Index.html給post_views的方法Index
【Views】
- 收到了
Templates回傳的Index.html - 將
'name' : 'Ting'塞進去Index.html - 準備好了
包含 Ting 的 Index.html - 將這個
完整的Index.html回傳給User
【User】
- 看見
完整的Index.html
結論
當我們想創建一個新的網頁的時候，大略上需要做到以下步驟：
- 創建一個 html 網頁。
- 在 Views 當中，寫一個方法，可以呼叫這個網頁並回傳
- 在 Urls 當中，設置好網址，並決定會呼叫哪一個方法
這樣子，便能創建一個新的網頁了。
結語
感謝你看到這邊，把這些內容持之以恆地讀完肯定不容易，你辛苦啦！
今天我們學到了創建一個新的網址的整個流程，也學習了各個流程中的程式碼撰寫格式，最後也成功測試，看見這個網頁了。
接下來，我們將介紹更多 html 的寫法，讓大家可以有能力去撰寫網頁。
