前言
還記得那時候剛建立起一個自己的網頁,真的超興奮又超開心的,雖然只是一個簡單,沒有什麼內容的網頁,卻能讓自己開心一整天。我想這就是學習有興趣的東西,會產生的效果吧。
那麼廢話不多說,今天我們將學習到,建立一個新網頁的整個流程。

資料來源: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 的寫法,讓大家可以有能力去撰寫網頁。