2024 網頁x人因xDjango 實務課程 03 Django 後端 MTV 運作原理解析

前言

上次建好一個新的 Django 專案後，一定很多人對於那些突然冒出來的檔案感到疑惑：

urls 是幹嘛的？
我要在哪邊寫程式碼？
我要怎麼設置我的網頁？

今天即將像大家介紹各個檔案的用途，並且帶入上次上課所教授的前後端概念，這次將以 Django 的後端詳細運作，展示給各位。那廢話不多說，我們開始課程吧。

資料來源：DALL-E 生成

整理好你的思緒，深深吸一口氣，讓我們在 2024 這嶄新的一年當中，開始新的學習之旅吧。

Django 檔案介紹

資料來源：本人 VScode 截圖

那當我們創建新的專案和 app 後，我們會得到這些新的檔案，有一些檔案是程式碼裡面配置用的，我們不太需要去做更改或運用。

用紅色框框圈起來的是，我們在日後開發網站的過程中，會經常需要動到的檔案，接下來將介紹這些檔案的用途，以及我們可以做出怎樣的變動。

settings.py

這裡存放著各種此專案的設定，在這專案中的其他檔案，都會透過 settings.py 取得一些整個專案的設定內容。這邊來提幾個，我們比較常用到的：

1. INSTALLED_APPS

INSTALLED_APPS = [    
	'django.contrib.admin',   
	'django.contrib.auth',    
	'django.contrib.contenttypes',    
	'django.contrib.sessions',    
	'django.contrib.messages',    
	'django.contrib.staticfiles',
	'{這裡新增你的 app 名稱}'​,
]

這裡是存放所有，你想要新增的 APP 名稱，如果你透過 Python manage.py startapp {app 名稱} 去新增一個新的 APP 時，可別忘了在這裡新增這個名稱，好讓 Django 可以抓到這個 APP 喔。

2. ALLOWED_HOSTS

ALLOWED_HOSTS = [
	'*',​
]

這裡是一份允許進入你的網頁的限制名單，如果沒出現在這份名單的 IP 位置，是無法使用你的網頁的。而像這邊我寫的是 '*' ，這代表允許所有人使用此網頁，使其變得完全公開。

3. DEBUG

DEBUG = True

這個是關於是否開啟幫助你去 修程式碼 的輔助功能，開啟後所有錯誤的網頁，都會列出詳細錯誤的原因以及其程式碼，方便你進行修正。

但請注意！如果現在是公開的階段，請更改為 False 。原因是因為，不法人士很有可能透過這個輔助功能，去查看你的程式碼寫法，盜走你的商業機密，甚至是侵入網站。

4. TIME_ZONE

TIME_ZONE = 'UTC'

這個設定是去選擇你的時區是哪一個，通常會去配合你預計要吸引的客群的所在時區。如果是台灣的話，通常會設定成 'Asia/Taipei' 台北的時區。

5. LANGUAGE_CODE

LANGUAGE_CODE = 'en-us'

這是用於控制你的網頁的語言為何，通常一些設定的網頁內容，預設文字就會是你選擇的這個文字。目前屬於美式英文，但如果想要用中文的話，可以更改為'zh-TW'

tests.py

當你在進行開發網站之後，可以需要進行多種測試(單元測試)，驗證你撰寫的程式碼是否完全正確。因此這個檔案就是專門用來給你測試用，減少在專案上的錯誤。

比方說：

# tests.py

​from django.test import TestCase
from myapp.models import MyModel 

class MyModelTestCase(TestCase): 
	def setUp(self): 
		# 在每個測試方法執行之前設置初始資料 
		self.my_model = MyModel.objects.create(name='Test', price=10.00, quantity=5) 
	def test_calculate_total(self): 
		# 測試 calculate_total() 方法是否正確計算總價格 
		expected_total = 10.00 * 5 
		self.assertEqual(self.my_model.calculate_total(), expected_total) 
		

在這個測試的環節中，必須寫好幾個方法，根據你需要測試的內容，寫不同的方法讓它程式碼實際跑過看看。

寫好單元測試後，輸入 Python manage.py test 進行測試，若有出現任何問題也會在此跑出來。這樣的單元測試，更加方便的去審視開發者，可能在開發過程中遺漏的部分。

models.py

當我們在製作的網頁的過程，一定會遇到需要儲存資料的時候，比如說：

電商平台一定會有訂單的資料
學校會有學生與老師的資料
FB 會有各個貼文的資料

而這些資料，一旦多了起來，我們將難以去控管。因此，我們才需要資料庫去幫助我們，好好的儲存與使用這些資料。

而 models.py 就是用來設計與控管我們資料庫的內容，我們可以在裡面新增各種主題，比方說 貼文 好了。一個貼文可能會有這幾種要素：

1. 大頭貼
2. 名稱
3. 時間
4. 貼文內容
5. 貼文的讚數
6. 留言

以此為例，我們就可以寫在 models.py 裡面成這樣：

from django.db import models
from django.utils import timezone

class Post(models.Model):
    # 定義大頭貼欄位，使用ImageField，需要安裝Pillow庫
    avatar = models.ImageField(upload_to='avatars/')
    # 定義名稱欄位，使用CharField
    name = models.CharField(max_length=100)
    # 定義時間欄位，使用DateTimeField
    time = models.DateTimeField(default=timezone.now)
    # 定義貼文內容欄位，使用TextField
    content = models.TextField()
    # 定義貼文的讚數欄位，使用IntegerField，預設值為0
    likes = models.IntegerField(default=0)
    # 定義留言欄位，這裡使用TextField僅作為示例，實際情況下可能需要另一個模型來更好地管理留言
    comments = models.TextField(blank=True)

    def __str__(self):
        return self.name

當我們寫好一個新的資料庫的內容的時候，接著必須運行這兩個指令，去做更新：

python manage.py makemigrations
python ​manage.py migrate

至此，我們就擁有了一個方便管理貼文的資料庫了。

admin.py

當我們在確定已經透過 python manage.py runserver ，執行 django 的時候，我們可以嘗試進入 127.0.0.1:8000/admin 進行一個網頁總管，在裡面可以管理我們的資料庫、使用者等等......

而 admin.py 則是可以在裡面設計 admin 這個管理頁面，出現資料庫的畫面與編排，這些將在後續課程進行更詳細的介紹。

templates

我們在開發網站的過程中，必定會有需要寫網頁的需求嘛，那這些設計好的網頁會存放在哪呢？就是放在我們的 templates 資料夾。

這時候可能有人在想，我沒有看到這個資料夾啊！

沒錯，templates 需要我們主動去建立這個資料夾，像這樣：

資料來源：本人 VScode 畫面

接著呢，我們還得去 settings.py 去設定，我們的網頁內容都是存放在這個資料夾裡面。請大家在 settings.py 中，尋找這樣的內容：

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

並且，在 'DIRS': [], 的中括號裡面新增這一串 os.path.join(BASE_DIR, 'templates').replace('\\', '/') 像是這樣：

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates').replace('\\', '/')], #變化在這裡
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

至此，我們就設定好了這個資料夾的連結。現在，我們可以將所有設計好的 html 給放在這個資料夾裡面。

views.py

在這個檔案中，我們將定義各種方法，大家可以想像成說，方法是一個我們呼叫了，就必定要得到一個東西。

換句話說，在這邊我們可以準備每個網址相對應的方法，讓各個網址可以得到應該要取得的網頁內容。

根據上一個 urls.py 介紹的範例程式，我們來寫一個在 views.py 相對應的內容：

from django.http import HttpResponse

def home(request):
    # 使用render函數渲染index.html模板
    return render(request, 'index.html')

def profile(request):
    # 使用render函數渲染profile.html模板
    return render(request, 'profile.html')

大家可以發現，在定義好的兩個方法中，我們取得了來自 templates 中的兩個 html ，回傳給使用者。

urls.py

不知道大家有沒有想過，為什麼我們可以輸入這麼多的網址，而且每個網址都能忠實的呈現他應該要對應的內容。

其實直覺上來說，就是我們去設定，怎樣的網址會對到怎樣子的網頁。比方說：

from django.urls import path
from . import views

urlpatterns = [
    # 首頁​
    path('', views.home, name='home'),
    # 個人資料
    path('profile/', views.profile, name='profile'),
]

在這個檔案中，我們定義了兩個網址：

127.0.0.1:8000 > 前往首頁
127.0.0.1:8000/profile/ > 前往個人資料

那至於應該要出現的內容，則是剛剛定義在 views.py 當中，我們剛寫好的兩個方法，分別是 home 跟 profile，因此這兩個方法，會回傳 home.html 跟 profile.html 這兩個網頁給使用者，讓他們能夠看見 首頁 或是 個人資料。

總結

資料來源：Canva 自行繪製

後端運作流程

回顧

首先，我們先來回顧一下上次課程內容。

資料來源：Canva 自行繪製

在上次的課程中，我們知道了前後端的運作流程：

【使用者】

• 有一位學生，輸入了學校首頁的網址，並且按了 enter 鍵。
• 電腦發送 request 的網頁請求給網站伺服器

【後端】

• 收到來自學生輸入的網址
• 你的電腦後端辨別出這個網址對應到的是學校首頁。
• 為這個首頁準備今天的焦點新聞
• 跟資料庫要求本日的焦點新聞

【資料庫】

• 找到所有的焦點新聞
• 只取今天的焦點新聞
• 把這些焦點新聞的內容傳給後端

【後端】

• 收到今天的焦點新聞內容
• 整理好後傳給前端的首頁

【前端】

• 收到焦點新聞的內容
• 處理好排版問題後，回傳完整內容的網頁給後端

【後端】

• 收到應該要傳給使用者的完整網頁
• 傳送完整網頁給使用者

【使用者】

• 收到完整網頁的內容(此時為程式碼)
• 瀏覽器將程式碼化為有圖有文的網頁
• 使用者看見首頁內容

那接下來，我們將介紹後端的部分。

MTV 架構

首先， Django 採用的架構是 MTV 架構。那這個 MTV 又是甚麼呢？我們拆開來看看：

M : Models
T : Templates
V : Views

沒錯，大家有沒有發現，這三個都是剛剛講過的內容。

M : Models
>> 資料庫

T : Templates
>> 存放網頁(html)

V : Views
>> 存放方法

MTV 流程

那接下來，我們來介紹一下他的流程：

資料來源：Canva 自行繪製

【Views】

• 方法被觸發後
• 向 Model 尋找應該要準備的資料

【Models】

• 收到 Views 想找的資料類型
• 準備資料
• 回傳資料給 Views

【Views】

• 收到 Models 回傳的資料
• 處理資料
• 再向 Models 尋找資料

【Models】

• 收到 Views 想找的資料類型
• 準備資料
• 回傳資料給 Views

【Views】

• 收到 Models 回傳的資料
• 處理資料
• 向 Templates 取得應該要回傳的網頁

【Templates】

• 收到 Views 想尋找的網頁檔案名稱
• 回傳給 Views 這個網頁

【Views】

• 收到 Templates 回傳的網頁
• 將這些資料塞進這個網頁當中
• 將準備好的完整的網頁 回傳給使用者

流程大概是就是：

Views -> Models -> Views -> Templates -> Views -> User

在準備給 User之前呢，Views 有可能需要多種的資料，因此在那段過程中，有可能會不斷地向 Models 尋找資料，最後才向 Templates 取得網頁，將資料塞進裡面。

MTV 範例介紹

那我們來做個簡單的範例，假設今天我們寫的是一個貼文好了：

1. 架構

我們先來思考第一件事情， 這個貼文應該包含什麼樣的要素？
1. 使用者名稱
2. 貼文內容

2. 流程

資料來源：Canva 自行繪製

【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】

• 看見 完整的貼文網頁

那這就是 Django 的 MVT 後端框架的完整流程。

結語

感謝你看到這邊，把這些內容持之以恆地讀完肯定不容易，你辛苦啦！

今天我們學到了 Django 各個檔案的用途，也學到了 MTV 架構，更是學到了 MTV 架構的實際流程。

接下來，我們將實際的根據 MTV 架構，建立一個新的網頁。