[Day 13] 顯示訊息 messages framework+重構程式(extends templates)

2018 iT 邦幫忙鐵人賽

DAY 13

Modern Web

使用 Django 開發網頁系統系列第 13 篇

2018鐵人賽 django

Frank

2017-12-31 23:04:26

1327 瀏覽

今天是這一年的最後一天

今天聊聊顯示訊息 messages framework

在新增資料的時候，要顯示 "新增成功" 訊息，
以前在做跨頁面顯示，可能要使用GET + 參數 ?msg=新增成功或寫 session or cookies

django 有 messages 功能
https://docs.djangoproject.com/en/2.0/ref/contrib/messages/
有分級tag: info, success, warning error，可以運用在顯示上
可能success就是綠色背景、warning黃色等等

store/views.py

from django.contrib import messages
def categoryCreate(request):
        ...
        categoryForm.save()
        messages.success(request, '新增成功')
        return redirect(reverse('store:category'))

放在要顯示的html
store/templates/store/category.html

...
<body>
{% if messages %}
  <div>
  {% for message in messages %}
    <div {% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message.tags }}-{{ message }}</div>
  {% endfor %}
  </div>
{% endif %}
...

就可以顯示訊息了

但是如果其他頁面也要顯示訊息，就要複製同樣的程式碼了
還有我們寫了一些 html 檔案，有一些地方是重複的 doctype, head ...
可以往上提到一個檔案，放在 main/base.html
其他頁去繼承base.html

{% block content %}
{% endblock %}
定義一個區塊叫 content

未來可能會有 javascript 部分, css, title 樣式等等。都可以再多定義

main/templates/main/base.html

<!doctype html>
<html>
<head>

</head>
<body>
{% if messages %}
  <div>
    {% for message in messages %}
      <div {% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message.tags }}-{{ message }}</div>
    {% endfor %}
  </div>
{% endif %}

{% block content %}
{% endblock %}

</body>
</html>

{% extends 'main/base.html' %}
{% block content %}
...
{% endblock %}
一樣的都刪掉只留內容
使用 extends 繼承父頁面修改 content 區塊

store/templates/store/category.html

{% extends 'main/base.html' %}
{% block content %}
  <table>
    <tr>
      <th>類別</th>
    </tr>
    {% for category in categorys %}
      <tr>
        <td>{{ category.name }}</td>
      </tr>
    {% endfor %}
  </table>
{% endblock %}

store/templates/store/categoryCategory.html

{% extends 'main/base.html' %}
{% block content %}
  <h3>新增類別</h3>
  <form method="post" action="{% url 'store:categoryCreate' %}">
    {% csrf_token %}
    {{ categoryForm.as_p }}

    <input type="submit" value="儲存">
  </form>
{% endblock %}

未來新增頁面，如果都是基於首頁的話都可以這樣使用
或是以後會有導覽列目錄(nav)，直接寫在main/base.html 其他就可以跟著有了