今天来实现如何在页面弹出一些信息，比如注册成功后弹出注册成功的信息。这一点可以通过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/

Anaconda+django写出第一个web app（七）的更多相关文章

  1. Anaconda+django写出第一个web app（一）

    在安装好Anaconda和django之后,我们就可以开始创建自己的第一个Web app,那么首先创建一个空文件夹,之后创建的文件都在这个文件夹内. 启动命令行进入此文件夹内,可以先通过如下命令查看一 ...

  2. Anaconda+django写出第一个web app（十一）

    今天我们来学习给页面添加一个Sidebar,根据Sidebar跳转到相应的tutorial. 打开views.py,编辑single_slug函数: def single_slug(request, ...

  3. Anaconda+django写出第一个web app（十）

    今天继续学习外键的使用. 当我们有了category.series和很多tutorials时,我们查看某个tutorial,可能需要这样的路径http://127.0.0.1:8000/categor ...

  4. Anaconda+django写出第一个web app（九）

    今天来学习外键的使用,用外键来连接数据库中的两个表. 当我们的tutorials非常多的时候,目前的显示方式就会使得页面非常凌乱.我们可以考虑把这些教程分为不同的系列,页面只显示标题以及概要等信息,进 ...

  5. Anaconda+django写出第一个web app（三）

    前面我们已经建立了模型Tutorial,也已经可以用Navicat Premium打开数据看查看数据,接下来我们通过建立admin账户来上传数据. 在命令行执行如下命令来创建用户: python ma ...

  6. Anaconda+django写出第一个web app（二）

    今天开始建立App中的第一个Model,命名为Tutorial. Model的定义在main文件夹下的models.py中通过类进行,我们希望Tutorial这个model包含三个属性:标题.内容和发 ...

  7. Anaconda+django写出第一个web app（六）

    今天学习如何写一个注册用户的界面. 上一节的导航栏中我们修改了导航栏右侧的文字为register并将路径设置为/register,内容如下: <li><a href="/r ...

  8. Anaconda+django写出第一个web app（四）

    前面对Models有了一些了解,今天开始进一步了解Views,了解Views如何和Models交互以及了解模板(templates). 打开main文件夹下的views.py,重新编写homepage ...

  9. Anaconda+django写出第一个web app（八）

    今天来实现网站的登入和登出功能. 首先我们需要在urls.py中添加路径,注意此处的路径和在导航栏中设置的文字路径保持一致: from django.urls import path from . i ...

随机推荐

  1. Delphi中 弹出框的用法

    Delphi中的提示框有 Application.MessageBox  ShowMessage messagedlg 个人认为 相对来说 Application.MessageBox 更加灵活 也相 ...

  2. VMware10 安装centos6.7 设置NAT模式固定ip

    https://www.cnblogs.com/yychnbt/p/5173761.html

  3. 剑指offer：二叉树的深度

    题目描述: 输入一棵二叉树,求该树的深度.从根结点到叶结点依次经过的结点(含根.叶结点)形成树的一条路径,最长路径的长度为树的深度. 解题思路: 这道题也是递归的思路,比较简单. 做的过程中遇到的一个 ...

  4. 第二个Sprint冲刺第 九天（燃尽图）

  5. A总结

    Alpha 答辩总结 评审表 组名 格式 内容 ppt 演讲 答辩 总计 天机组 15 15 14 15 14 73 PMS 16 16 15 15 16 78 日不落战队 16 16 16 15 1 ...

  6. iOS-copy与mutableCopy浅析

    iOS-copy与mutableCopy浅析 iOS 浅谈:深.浅拷贝与copy.strong 总结:当不可变类型对象调用copy拷贝后,不会产生新的对象,属于浅拷贝,其他类型对象不管调用copy亦或 ...

  7. Alpha冲刺第7天

    Alpha第7天 1.团队成员 郑西坤 031602542 (队长) 陈俊杰 031602504 陈顺兴 031602505 张胜男 031602540 廖钰萍 031602323 雷光游 03160 ...

  8. 关于“代码规范”，“Review”和“Check list”（续）

    在前两天的    关于“代码规范”,“Review”和“Check list”    一文中,我给自己列出了Check list,如下: 1.代码能够工作么?它有没有实现预期的功能,逻辑是否正确等. ...

  9. angular浏览器滚动条滚动到指定element 触发事件

    angular.module('app').directive('ScrollTrigger', () => { return { restrict: "A", link:f ...

  10. idea中添加类和方法注释以及codeCheck

    前言:在idea中我们添加类以及类的方法的注释很有必要,让其他人能够看懂这个类或者函数的作用是什么:为了在开发过程中检查自己的编程规范,可以通过codecheck工具进行自我检查和约束 一.在idea ...