今天来实现如何在页面弹出一些信息，比如注册成功后弹出注册成功的信息。这一点可以通过materialize里的Toasts来实现。
django自带的messages可以告诉我们是否注册成功，以及注册失败，或者提出警告。我们首先修改views.py，来引入messages：
from django.shortcuts import render, redirect
from django.http import HttpResponse
from .models import Tutorial
from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth import login, logout, authenticate
from django.contrib import messages
# Create your views here.
def homepage(request):
return render(request=request,
template_name='main/home.html',
context={'tutorials':Tutorial.objects.all}) def register(request):
if request.method == 'POST':
form = UserCreationForm(request.POST)
if form.is_valid():
user = form.save()
username = form.cleaned_data.get('username')
messages.success(request, f"New account created: {username}")
login(request, user)
return redirect('main:homepage')
else:
for msg in form.error_messages:
messages.error(request, f"{msg}:{form.error_messages[msg]}") return render(request=request,
template_name='main/register.html',
context={'form':form}) form = UserCreationForm
return render(request=request,
template_name='main/register.html',
context={'form':form})
如果注册成功，我们使用了messages.success来给出信息，如果失败我们使用了messages.error来给出信息。
接下来我们需要在html文件中使得这些信息可以显示，因为messages不止出现在注册时，所以我们将这些信息写在header.html中，我们还希望在注册成功后，导航栏右上角的文字发生变化，loigin变为刚注册的用户名，register变为logout，修改后header.html的内容如下：
<head>
{% load static %}
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="{% static 'tinymce/css/prism.css' %}" rel="stylesheet">
</head> <body>
{% if messages %}
{% for message in messages %}
{% if message.tags == 'success'%}
<script>M.toast({html: "{{message}}", classes: 'green rounded', displayLength:2000});</script>
{% elif message.tags == 'info'%}
<script>M.toast({html: "{{message}}", classes: 'blue rounded', displayLength:2000});</script>
{% elif message.tags == 'warning'%}
<script>M.toast({html: "{{message}}", classes: 'orange rounded', displayLength:10000});</script>
{% elif message.tags == 'error'%}
<script>M.toast({html: "{{message}}", classes: 'red rounded', displayLength:10000});</script>
{% endif %}
{% endfor %}
{% endif %}
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">Tutorials</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="/">Home</a></li>
{% if user.is_authenticated %}
<li><a href="/account">{{ user.username }}</a></li>
<li><a href="/logout">Logout</a></li>
{% else %}
<li><a href="/login">Login</a></li>
<li><a href="/register">Register</a></li>
{% endif %}
</ul>
</div>
</nav> <div class="container">
{% block content %}
{% endblock %}
</div> </body> <script src="{% static 'tinymce/js/prism.js' %}"></script>
此时的header.html内容显得有些复杂和凌乱，我们可以使用include来将某些代码放入单独的html文件中来缩短header.html的内容，为此我们在templates/main文件夹下新建文件夹includes，然后新建两个文件messages.html和navbaritems.html，最终header.html、messages.html、navbaritems.html内容分别如下：
<head>
{% load static %}
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="{% static 'tinymce/css/prism.css' %}" rel="stylesheet">
</head> <body>
{% include 'main/includes/messages.html' %}
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">Tutorials</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="/">Home</a></li>
{% include 'main/includes/navbaritems.html' %}
</ul>
</div>
</nav> <div class="container">
{% block content %}
{% endblock %}
</div> </body> <script src="{% static 'tinymce/js/prism.js' %}"></script>
{% if messages %}
{% for message in messages %}
{% if message.tags == 'success'%}
<script>M.toast({html: "{{message}}", classes: 'green rounded', displayLength:2000});</script>
{% elif message.tags == 'info'%}
<script>M.toast({html: "{{message}}", classes: 'blue rounded', displayLength:2000});</script>
{% elif message.tags == 'warning'%}
<script>M.toast({html: "{{message}}", classes: 'orange rounded', displayLength:10000});</script>
{% elif message.tags == 'error'%}
<script>M.toast({html: "{{message}}", classes: 'red rounded', displayLength:10000});</script>
{% endif %}
{% endfor %}
{% endif %}
{% if user.is_authenticated %}
<li><a href="/account">{{ user.username }}</a></li>
<li><a href="/logout">Logout</a></li>
{% else %}
<li><a href="/login">Login</a></li>
<li><a href="/register">Register</a></li>
{% endif %}
在浏览器中刷新页面，仍然正常显示。这种方法可以保证单个文件的内容不至于过长，便于后期管理。本文中刚开始提到的信息提示，没有相应的截图，这个可以在下一节添加login和logout时清楚的观察到。
参考链接：
[1] https://materializecss.com/toasts.html
[2] https://pythonprogramming.net/messages-django-tutorial/