2024 網頁x人因xDjango 實務課程 04 建立一個新的網頁

Caffeine 咖啡因

發佈於2024 網頁x人因實務課程

2024/03/13 更新2024/02/29 發佈閱讀 14 分鐘

前言

還記得那時候剛建立起一個自己的網頁，真的超興奮又超開心的，雖然只是一個簡單，沒有什麼內容的網頁，卻能讓自己開心一整天。我想這就是學習有興趣的東西，會產生的效果吧。

那麼廢話不多說，今天我們將學習到，建立一個新網頁的整個流程。

資料來源：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