Django - 視圖與模板

發布於 2024/01/03 更新於 2024/12/10

作者 Ned Hsu 5 分鐘閱讀

今天我們將學習 Django 的視圖與模板，學會如何處理用戶請求並返回動態生成的 HTML 頁面。

課程目標

瞭解 Django 視圖的作用與類型。
學會在視圖中處理業務邏輯並返回響應。
使用模板系統生成動態 HTML 頁面。

課程內容

1. Django 視圖概述

1.1 視圖的作用

Django 中的視圖負責處理用戶請求並返回響應。
視圖可以是函數或類，根據業務邏輯處理資料並與模板結合生成結果。

1.2 視圖的類型

基於函數的視圖 (Function-Based Views, FBV)：

使用簡單的函數實現業務邏輯。

範例：

  
from django.http import HttpResponse

def hello_view(request):
    return HttpResponse("Hello, World!")

基於類的視圖 (Class-Based Views, CBV)：

使用類來實現視圖，結構更清晰。

範例：

  
from django.views import View
from django.http import HttpResponse

class HelloView(View):
    def get(self, request):
        return HttpResponse("Hello, World!")

2. 模板系統概述

2.1 模板的作用

Django 的模板系統用於生成動態 HTML 頁面，支持變數插值和模板語法。

2.2 模板的存放位置

預設模板目錄在 settings.py 中由 TEMPLATES 配置：

  
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates'],  # 自定義模板目錄
        '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',
            ],
        },
    },
]

3. 視圖與模板的整合

3.1 範例：使用函數型視圖

編輯視圖 (views.py)

  
from django.shortcuts import render

def index(request):
    context = {
        'title': '歡迎來到 Django 課程',
        'message': '這是一個視圖與模板的範例。',
    }
    return render(request, 'index.html', context)

建立模板 (templates/index.html)

  
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{{ title }}</title>
  </head>
  <body>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </body>
</html>

設定路由 (urls.py)

  
from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),
]

訪問頁面
- 啟動伺服器並訪問 http://127.0.0.1:8000/，應該可以看到動態生成的 HTML 頁面。

3.2 範例：使用類型視圖

定義類型視圖 (views.py)

  
from django.views.generic import TemplateView

class IndexView(TemplateView):
    template_name = 'index.html'

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        context['title'] = '歡迎來到 Django 課程'
        context['message'] = '這是一個類型視圖的範例。'
        return context

設定路由 (urls.py)

  
from django.urls import path
from .views import IndexView

urlpatterns = [
    path('', IndexView.as_view(), name='index'),
]

4. 模板語法功能

4.1 變數插值

使用雙大括號 {{ }} 插入變數：

<p>用戶名：{{ user.username }}</p>

4.2 條件語句

使用 {% if %} 判斷邏輯：

  
{% if user.is_authenticated %}
<p>歡迎回來，{{ user.username }}！</p>
{% else %}
<p>請先登入。</p>
{% endif %}

4.3 循環

使用 {% for %} 進行迭代：

  
<ul>
  {% for item in items %}
  <li>{{ item }}</li>
  {% endfor %}
</ul>

4.4 繼承模板

母模板 (base.html)

  
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>{% block title %}Django 課程{% endblock %}</title>
  </head>
  <body>
    <header>
      <h1>我的網站</h1>
    </header>
    <main>{% block content %}{% endblock %}</main>
    <footer>
      <p>版權所有 © 2024</p>
    </footer>
  </body>
</html>

子模板 (index.html)

  
{% extends 'base.html' %} {% block title %}首頁{% endblock %} {% block
content %}
<h2>{{ title }}</h2>
<p>{{ message }}</p>
{% endblock %}

5. 本日總結

學習 Django 視圖的作用與類型。
瞭解模板系統如何生成動態 HTML 頁面。
實現基於視圖與模板的簡單頁面展示。

作業

為應用新增一個 /about/ 頁面，介紹你的應用功能，並使用模板繼承。
嘗試在模板中使用 {% for %} 與 {% if %} 展示條件內容或列表。

Software, Django

Django

本文章以 CC BY 4.0 授權