文章

Django - 訊息框架(Message Framework)

Django 的訊息框架提供了一種簡單的方式來在請求和回應期間顯示一次性提示訊息,常用於用戶通知(例如:登入成功、表單提交成功、錯誤警告等)。


課程目標

  • 瞭解 Django 訊息框架的基本概念。
  • 學習如何在視圖中添加訊息。
  • 學習如何在模板中顯示訊息。
  • 探索訊息框架的等級與自訂功能。

課程內容

1. 訊息框架概述

1.1 訊息框架的作用

訊息框架允許開發者向用戶顯示一次性通知,這些通知會在下一次請求後自動消失。例如:

  • 用戶登入成功。
  • 表單提交成功或失敗。
  • 操作警告或錯誤訊息。

1.2 設置

訊息框架預設已啟用,並且依賴於以下中介軟體和應用程式:

  • 中介軟體django.contrib.messages.middleware.MessageMiddleware
  • 應用程式django.contrib.messages

確認這些已在 settings.py 中啟用:

1
2
3
4
5
6
7
8
9
10
INSTALLED_APPS = [
    ...
    'django.contrib.messages',
]

MIDDLEWARE = [
    ...
    'django.contrib.messages.middleware.MessageMiddleware',
    ...
]

2. 在視圖中添加訊息

Django 提供了 messages 模組來輕鬆添加訊息。以下是一些常見用法:

2.1 使用 messages 模組

views.py 中導入 messages,並添加訊息:

1
2
3
4
5
6
7
from django.contrib import messages
from django.shortcuts import render, redirect

def example_view(request):
    messages.success(request, "操作成功!")
    messages.error(request, "發生錯誤,請重試!")
    return redirect('home')

2.2 訊息等級

訊息框架提供五個預設的等級,分別適用於不同類型的通知:

  • debug:調試訊息。
  • info:一般訊息。
  • success:成功提示。
  • warning:警告提示。
  • error:錯誤提示。

示例:

1
2
3
4
5
messages.debug(request, "這是一條調試訊息。")
messages.info(request, "這是一條一般訊息。")
messages.success(request, "這是一條成功訊息。")
messages.warning(request, "這是一條警告訊息。")
messages.error(request, "這是一條錯誤訊息。")

3. 在模板中顯示訊息

在模板中,可以使用 messages 上下文變數顯示訊息。

3.1 基本用法

在模板文件中添加以下代碼來遍歷訊息:

1
2
3
4
5
6
7
{% if messages %}
<ul class="messages">
  {% for message in messages %}
  <li class="{{ message.tags }}">{{ message }}</li>
  {% endfor %}
</ul>
{% endif %}

3.2 添加樣式

可以根據訊息的等級為訊息添加不同的樣式。message.tags 自動生成與等級對應的 CSS 類:

1
<li class="alert alert-"></li>

若使用 Bootstrap

1
2
3
4
5
6
7
{% if messages %}
<div class="alert-box">
  {% for message in messages %}
  <div class="alert alert-{{ message.tags }}">{{ message }}</div>
  {% endfor %}
</div>
{% endif %}

4. 自訂訊息框架設置

4.1 預設等級設置

可以在 settings.py 中自訂訊息框架的等級和行為:

1
2
3
4
from django.contrib.messages import constants as message_constants

MESSAGE_LEVEL = message_constants.DEBUG
MESSAGE_STORAGE = 'django.contrib.messages.storage.session.SessionStorage'
  • MESSAGE_LEVEL:設定最低的訊息等級。低於此等級的訊息將被忽略。
  • MESSAGE_STORAGE:定義訊息儲存的方式,預設使用 Session。

4.2 自訂訊息標籤

可以自訂等級對應的 CSS 樣式標籤:

1
2
3
4
5
6
7
MESSAGE_TAGS = {
    message_constants.DEBUG: 'secondary',
    message_constants.INFO: 'info',
    message_constants.SUCCESS: 'success',
    message_constants.WARNING: 'warning',
    message_constants.ERROR: 'danger',
}

5. 實踐:用戶操作通知

目標

實作一個簡單的用戶登入通知。

實作

視圖代碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
from django.contrib import messages
from django.shortcuts import render, redirect
from django.contrib.auth import authenticate, login

def login_view(request):
    if request.method == 'POST':
        username = request.POST['username']
        password = request.POST['password']
        user = authenticate(request, username=username, password=password)

        if user is not None:
            login(request, user)
            messages.success(request, "登入成功!歡迎回來,{}".format(user.username))
            return redirect('home')
        else:
            messages.error(request, "登入失敗,請檢查帳號與密碼。")

    return render(request, 'login.html')

模板代碼

1
2
3
4
5
6
7
8
9
10
11
12
13
{% if messages %}
<div class="messages">
  {% for message in messages %}
  <div class="alert alert-{{ message.tags }}">{{ message }}</div>
  {% endfor %}
</div>
{% endif %}
<form method="post">
  {% csrf_token %}
  <input type="text" name="username" placeholder="使用者名稱" />
  <input type="password" name="password" placeholder="密碼" />
  <button type="submit">登入</button>
</form>

6. 本日總結

  • 學習 Django 訊息框架的工作原理。
  • 使用不同等級的訊息來通知用戶。
  • 在模板中顯示訊息,並搭配樣式設計美觀的提示框。
  • 設置訊息框架的自訂等級與標籤。

作業

  1. 實作一個用戶註冊功能,並在成功註冊後顯示提示訊息。
  2. 為用戶密碼重設功能添加通知訊息,例如「密碼重設連結已發送至您的信箱」。
  3. 自訂訊息框架的 CSS 樣式,設計一套與網站主題一致的提示訊息外觀。

本文章以 CC BY 4.0 授權