实战Django：Rango Part7

26.用Django-Registration-Redux进行用户校验


Django中，有好多现成的应用提供了注册、登录、校验等功能，我们只要稍稍改动一下URL映射、视图和模板就可以使用它们。在这一章，我们将介绍用Django-Registration-Redux,顺便学习一下如何把外部的应用加到我们的项目中。

（1）安装Django-Registration-Redux

在Dos命令提示符下转到Python的Scripts文件夹，然后运行如下命令：

pip install django-registration-redux

正确安装的话会你看到“Successfully installed django-registration-redux”这样的提示。

（2）配置

打开settings.py文件，将INSTALLED_APPS改为：

rangoproject/settings.py：

INSTALLED_APPS = (
‘django.contrib.admin‘,
‘django.contrib.auth‘,
‘django.contrib.contenttypes‘,
‘django.contrib.sessions‘,
‘django.contrib.messages‘,
‘django.contrib.staticfiles‘,
‘rango‘,
‘registration‘, # add in the registration package
)

同时在settings.py文件尾部加入以下内容：

rangoproject/settings.py：

REGISTRATION_OPEN = True        # 此项设置为True,用户方能注册
ACCOUNT_ACTIVATION_DAYS = 7
REGISTRATION_AUTO_LOGIN = True  # 此项设置为True，用户可以自动登录
LOGIN_REDIRECT_URL = ‘/rango/‘  # 用户登录后转向的页面
LOGIN_URL = ‘/accounts/login/‘  # 用户未成功登录时转向的页面

(3)修改URL映射

修改rangoproject下的urls.py文件,改成下面这样：

rangoproject/urls.py:

urlpatterns = patterns(‘‘,
    url(r‘^admin/‘, include(admin.site.urls)),
    url(r‘^rango/‘, include(‘rango.urls‘)),
    url(r‘^accounts/‘, include(‘registration.backends.simple.urls‘)),
)

(4)设置模板

我们先来做登录模板.我们在templates下面新建一个叫registration的文件夹，下面说到的这些模板都放在这里。在这个文件夹下新建一个叫login.html的文件,加入如下内容：

templates/registration/login.html：

{% extends "base.html" %}

{% block body_block %}
<h1>登录</h1>
        <form method="post" action=".">
                {% csrf_token %}
                {{ form.as_p }}

                <input type="submit" value="登录" />
                <input type="hidden" name="next" value="{{ next }}" />
                </form>

        <p>还不是会员? <a href="{% url ‘registration_register‘ %}">Register</a>!</p>
{% endblock %}

接着我们来做注册模板，在registration文件夹下新建一个叫registration_form.html的文件,加入如下内容:

templates/registration/registration_form.html：

{% extends "base.html" %}

{% block body_block %}
<h1>注册</h1>
        <form method="post" action=".">
                {% csrf_token %}
                {{ form.as_p }}

                <input type="submit" value="提交" />
        </form>
{% endblock %}

我们接下来做注册完成模板，在registration文件夹下新建一个叫registration_complete.html的文件,加入如下内容:

templates/registration/registration_complete.html：

{% extends "base.html" %}

{% block body_block %}
<h1>注册成功</h1>
        <p>您已成功注册！</p>
{% endblock %}

然后是注销模板，在registration文件夹下新建一个叫logout.html的文件,加入如下内容:

templates/registration/logout.html：

{% extends "base.html" %}

{% block body_block %}
<h1>注销</h1>
        <p>您已退出当前登录.</p>
{% endblock %}

准备好上面这些，我们可以开始体验了。在浏览器地址栏中输入“http://127.0.0.1/accounts/register”,感受一下全新的注册、登录、注销流程吧！

(5)修改链接

最后我们要调整一下base.html中的相关链接：

  • 将注册链接改为： <a href="{% url ‘registration_register‘ %}">
  • 将登录链接改为： <a href="{% url ‘auth_login‘ %}">
  • 将注销链接改为：<a href="{% url ‘auth_logout‘ %}?next=/rango/">

注意在注销链接中，我们加了一句”?next=/rango/"“，它的作用是在用户注销后，将其引导回Rango首页。

(6)修改注册流程

在当前的设置中，当用户完成注册时，程序会将其引导到”注册成功“页面。这样做感觉傻傻的，所以，我们来调整一***册流程。

我们来重写一下”registration.backends.simple.views“提供的RegistrationView。

修改rangoproject下的urls.py文件,改成下面这样：

rangoproject/urls.py:

from django.conf.urls import patterns, include, url
from django.contrib import admin
from registration.backends.simple.views import RegistrationView

# 创建一个新类，用来在用户登录成功时引导他回首页
class MyRegistrationView(RegistrationView):
    def get_success_url(selfself,request, user):
        return ‘/rango/‘

urlpatterns = patterns(‘‘,
    url(r‘^admin/‘, include(admin.site.urls)),
    url(r‘^rango/‘, include(‘rango.urls‘)),
    url(r‘^accounts/register/$‘, MyRegistrationView.as_view(), name=‘registration_register‘),
    url(r‘^accounts/‘, include(‘registration.backends.simple.urls‘)),
)

27.美化Django


在这一节，我们将讲解如何用Twitter Bootstrap toolkit来美化Django，我们不会讲Bootstrap背后的工作原理，并且，在讲解时我们会假定你对CSS有一定的了解。如果你从来没接触过CSS，甚至连CSS是什么都不知道，赶紧找度娘去恶补一下CSS的基础知识吧。

要学会使用Bootstrap,你可以访问Bootstrap的官方网站（http://getbootstrap.com/），那里有一些例子可以学习。从这个网站可以看一些布局的范例（http://getbootstrap.com/getting-started/#examples）。比如我们参考下面这个范例来设计Rango的样式（http://getbootstrap.com/examples/dashboard/）。

我们可以直接将上面这个dashboard的页面源代码拿过来修改成base.html，具体改动的内容如下：

  • 将"../../"替换为“ http://getbootstrap.com ”；
  • 将"dashboard.css"替换为“http://getbootstrap.com/examples/dashboard/dashboard.css”；
  • 移除顶部的搜索表单；
  • 将所有不必要的内容删除，用 “{% block body_block %}{% endblock %} ”来代替；
  • 修改title元素为：<title>Rango - {% block title %}实战Django!{% endblock %}</title>
  • 修改项目名称为Rango，改这句：<a class="navbar-brand" href="/rango/">Rango
  • 在顶部导航栏中添加首页、登录、注册等链接；
  • 添加一个侧边栏区块，例如：{% block side_block %}{% endblock %}

改好后的base.html会是下面这个样子：

templates/base.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=" initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="http://getbootstrap.com/favicon.ico">

    <title>Rango - {% block title %}实战Django!{% endblock %}</title>

    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://getbootstrap.com/examples/dashboard/dashboard.css" rel="stylesheet">

    <!--[if lt IE 9]>
      <script src=\‘#\‘" //oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src=\‘#\‘" //oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/rango/">Rango</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
                <li><a href="{% url ‘index‘ %}">首页</a></li>
    {% if user.is_authenticated %}
        <li><a href="{% url ‘restricted‘ %}">限制页面</a></li>
        <li><a href="{% url ‘auth_logout‘ %}?next=/rango/">注销</a></li>
        <li><a href="{% url ‘add_category‘ %}">新建分类</a></li>
    {% else %}
        <li><a href="{% url ‘registration_register‘ %}"> 注册</a></li>
        <li><a href="{% url ‘auth_login‘ %}">登录</a></li>
    {% endif %}

    <li><a href="{% url ‘about‘ %}">关于</a></li>
              </ul>
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
                {% block side_block %}{% endblock %}

        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
           <div>
                {% block body_block %}{% endblock %}
                </div>
        </div>
      </div>
    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
    <script src="http://getbootstrap.com/assets/js/docs.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

有了这个基础模板，我们可以将这个新样式快速应用到其它模板中，比如我们来调整”关于“页面的模板：

templates/rango/about.html：

{% extends ‘base.html‘ %}

{% load staticfiles %}

{% block title %}About{% endblock %}

{% block body_block %}
    <div class="page-header">
                <h1>关于Rango</h1>
            </div>
            <div>
            <p>欢迎访问Rango！</p>
            <p>点击这里返回<a href="{% url ‘index‘ %}">首页</a>。</p>
            <p>这是一张Rango的图片！</p>

            <img  width="300" src="{% static "rango.jpg" %}" alt="Rango" />
            </div>
{% endblock %}

接下来，让我们来搞定首页。

templates/rango/index.html：

{% extends ‘base.html‘ %}

{% load staticfiles %}

{% block title %}Index{% endblock %}

        {% block body_block %}
{% if user.is_authenticated %}
    <div class="page-header">

                <h1>{{ user.username }}，欢迎来到Rango!</h1>
            {% else %}
                <h1>欢迎来到Rango!</h1>
            {% endif %}
</div>

            <div class="panel panel-primary">
            <div class="panel-heading">
               <h3 class="panel-title">分类</h3>
               </div>

              {% if categories %}
                    <ul class="list-group">
                        {% for category in categories %}
                         <li class="list-group-item"><a href="{% url ‘category‘  category.slug %}">{{ category.name }}</a></li>
                        {% endfor %}
                    </ul>
                {% else %}
                    <strong>目前还没有可用分类。</strong>
                {% endif %}

            </div>
            <div class="panel panel-primary">
            <div class="panel-heading">
              <h3 class="panel-title">页面</h3>
        </div>
                {% if pages %}
                    <ul class="list-group">
                        {% for page in pages %}
                         <li class="list-group-item"><a href="{{page.url}}">{{ page.title }}</a></li>
                        {% endfor %}
                    </ul>
                {% else %}
                    <strong>目前还没有可用页面。</strong>
                {% endif %}
            </div>

          </div>

       <p> 访问数: {{ visits }}</p>
        {% endblock %}

接下来我们来搞定登录页面。在Bootstrap，他们已经有一个非常不错的登录例子（http://getbootstrap.com/examples/signin/），我们可以参照这个例子来改写登录模板：

templates/registration/login.html：

{% extends "base.html" %}

{% block body_block %}

<link href="http://getbootstrap.com/examples/signin/signin.css" rel="stylesheet">

<form class="form-signin" role="form" method="post" action=".">
{% csrf_token %}

<h2 class="form-signin-heading">请登录</h2>
<input class="form-control" placeholder="用户名" id="id_username" maxlength="254" name="username" type="text" required autofocus=""/>
<input type="password" class="form-control" placeholder="密码" id="id_password" name="password" type="password" required />

        <button class="btn btn-lg btn-primary btn-block" type="submit" value="Submit" />登录</button>
        </form>

{% endblock %}

注册页面同样需要美化。编辑registration_form.html,改成下面这样：

templates/registration/registration_form.html：

{% extends "base.html" %}

{% block body_block %}
<form role="form" method="post" action=".">
                {% csrf_token %}

<h2 class="form-signin-heading">注册</h2>

<div class="form-group" >
 <p class="required"> <label for="id_username">用户名:</label></p>
 <p><input class="form-control-static" size="28" id="id_username" maxlength="30" name="username" type="text"  placeholder="请输入用户名"/></p>
</div>
 <div class="form-group">
    <p class="required"><label for="id_email">E-mail:</label></p>
         <p><input class="form-control-static" size="28" id="id_email" name="email" type="email" placeholder="请输入邮箱" /></p>
 </div>
<div class="form-group">
    <p class="required"><label for="id_password1">密码:</label></p>
         <p><input class="form-control-static" size="28" id="id_password1" name="password1" type="password" placeholder="请输入密码" /></p>
</div>
<div class="form-group">
    <p class="required"><label for="id_password2">密码 (确认):</label></p>
 <p><input class="form-control-static" size="28" id="id_password2" name="password2" type="password" placeholder="请再次输入密码" /></p>
</div>

<button type="submit" class="btn btn-default">提交</button>

        </form>
{% endblock %}

再来看看其它的页面，比如“新建页面”模板，可以改成这样：

templates/rango/add_page.html：

{% extends ‘base.html‘ %}

{% block title %}添加页面{% endblock %}

{% block body_block %}
{% if category %}

                <form role="form"  id="page_form" method="post" action="/rango/category/{{category.slug}}/add_page/">
            <h2 class="form-signin-heading">添加页面到 <a href="/rango/category/{{category.slug}}/"> {{ category.name }}</a></h2>
                    {% csrf_token %}
                    {% for hidden in form.hidden_fields %}
                        {{ hidden }}
                    {% endfor %}

                    {% for field in form.visible_fields %}
                        {{ field.errors }}
                        {{ field.help_text }}<br/>
                        {{ field }}<br/>
                    {% endfor %}

                <br/>
            <button class="btn btn-primary" type="submit" name="submit">创建页面</button>
                </form>
            {%  else %}
            <p>此分类不存在.</p>
        {%  endif %}

        {% endblock %}

我们可以用同样的方式来修改“新建分类”模板。剩下那些模板的调整，就由你自己来完成吧！

【未完待续】

本文版权归舍得学苑所有，欢迎转载，转载请注明作者和出处。谢谢！

作者：舍得

首发：舍得学苑@博客园

 
时间： 2024-10-12 08:15:05

实战Django：Rango Part7的相关文章

实战Django：Rango Part1

在前面我们已经陆续学习了六个Django的实例,其中一个来自Django官方的文档,另外五个来自<Django Web开发指南>.舍得介绍的每一个实例,都是按照官方文档的标准,力求让大家在根据文章去做自己的实例时,能够按"文"索骥,轻松再现整个实例的制作过程. 接下来,舍得要介绍一个大型的实例,这个项目叫做Rango,它来自Django圈内口碑甚佳的<How to Tango with Django>一书.事实上,此书就是围绕Rango这一个实例来展开的,而且,

实战Django：Rango Part6

24.优化模板 在这个项目中,从已经做过的模板来看,你可能会注意到里面有很多重复的代码.这种重复不仅带来大量无谓的工作量,而且以后调整起来也极为不便. 因此,最理想的做法是将那些重复的代码放到基础模板中,然后从基础模板再扩展出一个个新的模板. 我们先来做这个基础模板,在templates/rango文件夹下新建一个base.html文件,然后添加以下内容: templates/rango/base.html: <!DOCTYPE html> <html> <head>

实战Django：简易博客Part1

舍得学习新技能的时候,通常不喜欢傻读书--捧着一本阐述该项技能的书籍,然后傻看,一路看下来,脑子里塞满了新的概念.知识点,头是越来越大,但技能却几乎没掌握半分. 多年来,舍得养成了用做实例来学习新技能的习惯.这可不是舍得的独创,在象棋.围棋界中,历来有"打谱"一说,就是根据棋谱,把一步步棋摆出来,在打谱的过程中,去感悟.去吸收,此时感悟到的.吸收进的,才是属于你自己的东西.新的技能就这样一步步发展起来,逐渐壮大. 就象Django官方文档那样,一个实例看起来很简单,但作为初学者,用&q

实战Django：简易博客Part2

在Part1中,我们完成了本项目的基本框架搭建,并完善了一下管理后台,现在我们来看如何设计面向公共的页面部分. 8.创建模板 首先,请在blog文件夹下建立templates文件夹,然后,在templates文件夹中建立一个叫bog的文件夹,在这个bog文件夹下新建一个archive.html文件,这个文件的路径应该是: bog/templates/bog/archive.html 把下面这些代码添加到archive.html中: bog/templates/bog/archive.html:

实战Django：小型CMS Part2

回顾一下我们之前讲过的几个实例的流程,现在,我们只要添加一些内容(用来测试),创建视图.模板和URL模式,就能完成这个小型的CMS了.   7.添加内容 我们先来创建一个分类,点击Categories后面的"增加"按钮,然后在Label文本框中输入:"Django",在slug文本框后面输入"django"(django不用输入也能自动出现,你可以改成自己喜欢的名字): 随后点击后面的"保存"按钮. 点击左上方的"首

实战Django：Pastebin

  这是<Django Web开发指南>中的最后一个实例.如果说上一个实例Liveblog重点讲的是Django和Ajax的协作,那么我们在Pastebin中,将学习到Django和高亮语法JS的协作,顺便复习一下在Django中加入表单. 1.创建项目和应用 我们先来创建本实例的项目,在dos命令提示符下转到Scripts文件夹(如"c:\python32\Scripts"),然后运行如下命令: $ django-admin startproject pastebinpr

实战Django:官方实例Part1

[写在前面] 撰写这个实战系列的Django文章,是很久之前就有的想法,问题是手头实例太少,一旦开讲,恐有"无米下锅"之忧. 随着对Django学习的深入,渐渐有了些心得,把这些心得整理出来,以规范的.方便新人上手的撰写方式来写这个实战系列,相信对刚接触Django的童鞋会有一定的帮助. 舍得这里所用到的版本,为Django 1.7.1,Python 3.2,想要按照舍得讲解的实例上手练习的话,请务必与舍得所用的版本保持一致. 实例是在Windows系统下调试的,如果你采用的是非Win

实战Django：小型CMS Part1

CMS,即Content Management System,内容管理系统.我们这里要开发的小型CMS应用,从结构上和blog应用有些类似,但我们会在这里加入一些新的技术,比如说工作流.搜索功能.编辑组件等. 1.创建项目和应用 我们先来创建本实例的项目,在dos命令提示符下转到Scripts文件夹(如"c:\python32\Scripts"),然后运行如下命令: $ django-admin startproject cmsproject 然后在dos命令提示符下继续输入如下命令,

实战Django：LiveBlog

<Django Web开发指南>的实例讲的差不多了,除了今天要介绍的LiveBlog,还有一个Pastebin.这样,书中的实例基本讲完了.做完这些实例之后,舍得建议回头看看这本书,或许你会从书中找到舍得所讲的实例里忽略掉的一些细节.此外,<Django Web开发指南>中有几个章节是关于Django的基础或高级技术的,建议阅读并设法把它应用到你所练习过的实例中. 正如你已经看到的,Django提供了丰富的内置功能,你可以很轻松地用这些功能来完成很多工作.但和所有的工具一样,Dja