實戰Django：Rango Part7

時間  2020-01-08
標籤 實戰 django rango part7 欄目 Python 简体版
原文   原文鏈接

26.用Django-Registration-Redux進行用戶校驗 css

Django中，有好多現成的應用提供了註冊、登陸、校驗等功能，咱們只要稍稍改動一下URL映射、視圖和模板就可使用它們。在這一章，咱們將介紹用Django-Registration-Redux,順便學習一下如何把外部的應用加到咱們的項目中。html

（1）安裝Django-Registration-Reduxhtml5

在Dos命令提示符下轉到Python的Scripts文件夾，而後運行以下命令：jquery

pip install django-registration-redux

正確安裝的話會你看到「Successfully installed django-registration-redux」這樣的提示。ajax

（2）配置django

打開settings.py文件，將INSTALLED_APPS改成：redux

rangoproject/settings.py：bootstrap

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文件尾部加入如下內容：api

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="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://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 %}

咱們能夠用一樣的方式來修改「新建分類」模板。剩下那些模板的調整，就由你本身來完成吧！

 

【未完待續】

本文版權歸捨得學苑全部，歡迎轉載，轉載請註明做者和出處。謝謝！
做者：捨得
首發：捨得學苑@博客園

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程