今天来实现如何在页面弹出一些信息，比如注册成功后弹出注册成功的信息。这一点可以通过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. hyperledger-fabirc1.2-ca-server的生产示例

    hyperledger-fabirc1.2-ca-server的生产示例,带TLS 在fabirc-samples/first-network中启动网络,其ca证书是利用crypto的工具生成的,但是 ...

  2. CryptoZombies学习笔记——Lesson2

    第二课是僵尸猎食,将把app变得更像一个游戏,添加多人模式,建立更多创造僵尸的方法. chapter1 依然是简介 chapter2:映射和地址 映射相当于一个索引,指向不同地址,不同地址存储的数据不 ...

  3. BugPhobia开发篇章：Beta阶段第II次Scrum Meeting

    0x01 :Scrum Meeting基本摘要 Beta阶段第二次Scrum Meeting 敏捷开发起始时间 2015/12/13 00:00 A.M. 敏捷开发终止时间 2015/12/14 22 ...

  4. Linux内核分析第五章读书笔记

    第五章 系统调用 在操作系统中,内核提供了用户进程与内核进行交互的一组接口,这些接口在应用程序和内核之间扮演了使者的角色,保证系统稳定可靠,避免应用程序肆意妄行. 5.1 与内核通信 系统调用在用户空 ...

  5. 20135316王剑桥Linux内核学习笔记第三周

    20135316王剑桥 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC 1000029000 三个法宝:存储程序计算机.函数调 ...

  6. VS2013安装及测试练习

    一.安装过程 任务:安装VS2010以上的版本. 其实很闹心,因为看了一下VS的安装包,都很大.以学校的网速,得下到什么时候?这是第一想法. 挺麻烦,也挺周折,最终下好了安装包.但是,还是出了问题,在 ...

  7. Ubutnu linux 下升级python版本，以2.x升级到3.x为例

    Linux操作系统一般 都会自带python,但是python版本会比主流低,故升级python, 主要思路:自带的python的链接link文件是在/usr/bin 下,采用sudo apt-get ...

  8. npm 切换淘宝镜像几种方式

    淘宝 npm 地址: http://npm.taobao.org/ 如何使用 有很多方法来配置npm的registry地址,下面根据不同情境列出几种比较常用的方法.以淘宝npm镜像举例: 1.临时使用 ...

  9. BZOJ4589 Hard Nim（博弈+FWT）

    即使n个数的异或为0.如果只有两堆,将质数筛出来设为1,做一个异或卷积即可.显然这个东西满足结合律,多堆时直接快速幂.可以在点值表示下进行. #include<iostream> #inc ...

  10. Voltage Keepsake CodeForces - 801C（思维）

    题意: 有n台机器,第i台机器每个单位时间消耗ai的功率,初始有bi的功率储备,有一个充电器每个单位时间充p单位的功率 问经过多长时间才能有一个功率位0的机器,如果能够无限使用输出-1: 解析: 时间 ...