二十一.增加用戶登陸界面

原創 静以修身养心 2018-09-05 02:47

由於我們這是一個對內的項目管理界面，因此，我不提供用戶的公開註冊，只負責用戶登陸並讓用戶更改密碼。建立用戶可以通過admin後臺來建立。如果需要擁有一套完整的用戶註冊系統，可以直接選擇一個django-registration-redux的插件。

 

在這裏，我們用Django提供的一個原生的註冊系統來實現。具體文檔可以參閱：

https://docs.djangoproject.com/en/1.9/topics/auth/default/#auth-web-requests

 

其中，我們使用Django提供的Authentication Views。Django提供了好幾種views可以讓你來處理登陸，登出，以及密碼管理。你可以使用Django提供的form表單來實現，當然也可以自己新建form表單。

Django沒有提供默認的認證模板。因此你需要自己建立一個html模板，而且這個html需要默認放在registration目錄下。

 

1.      使用Django內建的views實現用戶登陸退出及密碼修改：

Urls.py:

#用戶登陸列表
#用戶登陸
url(r'login/', echo.views.login, name='login'),
#用戶退出
url(r'logout/', echo.views.logout, name='logout'),
#密碼修改
url(r'password_change/', echo.views.password_change, name='password_change'),

以上只是url的一種方式，事實上，可以根據自己的需要，在url中做許多變動，以適應實際需要，具體可以參加Django文檔。

 

2.      在views.py中建立相應函數：

#用戶登陸選項，所有的函數將會返回一個template_response的實例，用來描繪頁面，同時你也可以在return之前增加一些特定的功能
#用戶登陸
def login(request):
    #extra_context是一個字典，它將作爲context傳遞給template，這裏告訴template成功後跳轉的頁面將是/index
    template_response = views.login(request, extra_context={'next': '/index'})
    return template_response

#用戶退出
def logout(request):
    #logout_then_login表示退出即跳轉至登陸頁面，login_url爲登陸頁面的url地址
    template_response = views.logout_then_login(request,login_url='/login')
    return template_response

#密碼更改
def password_change(request):
    #post_change_redirect表示密碼成功修改後將跳轉的頁面.
    template_response = views.password_change(request,post_change_redirect='/index')
    return template_response


在view中，有許多參數可供選擇，具體可以參加https://docs.djangoproject.com/en/1.9/topics/auth/default/#all-authentication-views


3.      建立login.html：

由於Django不提供login頁面，因此需要自己建立一個html頁面，並放於registration目錄下。通過ACE的login.html，我們做適當的修改，將一些不必要的功能去掉簡化。

Login.html:

 

% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <title>登錄頁面</title>
      <!-- basic styles -->
      <link href="{% static 'assets/css/bootstrap.min.css' %}" rel="stylesheet" />
      <link rel="stylesheet" href="{% static 'assets/css/font-awesome.min.css' %}" />
      <!--[if IE 7]>
        <link rel="stylesheet" href="{% static 'assets/css/font-awesome-ie7.min.css' %}" />
      <![endif]-->
      <!-- page specific plugin styles -->
      <!-- fonts -->
      <link rel="stylesheet" href="{% static 'assets/css/ace-fonts.css' %}" />
      <!-- ace styles -->
      <link rel="stylesheet" href="{% static 'assets/css/ace.min.css' %}" />
      <link rel="stylesheet" href="{% static 'assets/css/ace-rtl.min.css' %}" />

      <!--[if lte IE 8]>
        <link rel="stylesheet" href="{% static 'assets/css/ace-ie.min.css' %}" />
      <![endif]-->
      <!-- inline styles related to this page -->
      <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
      <!--[if lt IE 9]>
      <script src="{% static 'assets/js/html5shiv.js' %}"></script>
      <script src="{% static 'assets/js/respond.min.js' %}"></script>
      <![endif]-->
   </head>

   <body class="login-layout">
      <div class="main-container">
         <div class="main-content">
            <div class="row">
               <div class="col-sm-10 col-sm-offset-1">
                  <div class="login-container">
                     <div class="center">
                        <h1>
                           <span class="white">ECHO信息管理平臺</span>
                        </h1>
                     </div>

                     <div class="space-6"></div>

                     <div class="position-relative">
                        <div id="login-box" class="login-box visible widget-box no-border">
                           <div class="widget-body">
                              <div class="widget-main">
                                 <h4 class="header blue lighter bigger center">
                                    <i class="icon-coffee green"></i>
                                    請輸入用戶名和密碼
                                 </h4>

                                 <div class="space-12 center"></div>
                                            <!--如果登錄的form報錯，則顯示相關報錯信息-->
                                            {% if form.errors %}
                                            <p class="red">用戶名與密碼不匹配</p>
                                            {% endif %}
                                            <!--建立一個用於登陸的form表單-->
                                 <form class="center" method="post" action="{% url 'login' %}">
                                            {% csrf_token %}
                                    <fieldset>
                                       <label class="block clearfix">
                                          <span class="block input-icon input-icon-right">
                                                            用戶
                                                            {{ form.username }}
                                             <i class="icon-user"></i>
                                          </span>
                                       </label>

                                       <label class="block clearfix">
                                          <span class="block input-icon input-icon-right">
                                             密碼
                                                            {{ form.password }}
                                             <i class="icon-lock"></i>
                                          </span>
                                       </label>

                                       <div class="space"></div>

                                       <div class="clearfix center">


                                          <button type="submit" class="width-100 pull-left btn btn-sm btn-primary">
                                             <i class="icon-key"></i>
                                             登錄
                                          </button>
                                       </div>

                                       <div class="space-4"></div>
                                    </fieldset>
                                                <!--跳轉頁面，該跳轉頁面的next值會從view傳遞過來的context中獲取-->
                                                <input type="hidden" name="next" value="{{ next }}" />
                                 </form>
                              </div><!-- /widget-main -->
                           </div><!-- /widget-body -->
                        </div><!-- /login-box -->
                     </div><!-- /position-relative -->
                  </div>
               </div><!-- /.col -->
            </div><!-- /.row -->
         </div>
      </div><!-- /.main-container -->
      <!-- basic scripts -->
      <script type="text/javascript">
         window.jQuery || document.write("<script src={% static 'assets/js/jquery.min.js' %}>"+"<"+"/script>");
      </script>
      <!-- <![endif]-->
      <!--[if IE]>
<script type="text/javascript">
     window.jQuery || document.write("<script src={% static 'assets/js/jquery.min.js' %}>"+"<"+"/script>");
</script>
<![endif]-->
      <script type="text/javascript">
         if("ontouchend" in document) document.write("<script src={% static 'assets/js/jquery.mobile.custom.min.js' %}>"+"<"+"/script>");
      </script>
      <!-- inline scripts related to this page -->
      <script type="text/javascript">
         function show_box(id) {
          jQuery('.widget-box.visible').removeClass('visible');
          jQuery('#'+id).addClass('visible');
         }
      </script>
</body>
</html>

4.     驗證登陸頁面

登陸http://127.0.0.1:8000/login


發現能夠成功訪問該login頁面。輸入錯誤的用戶名和密碼後會報出相關錯誤信息。

用戶名和密碼驗證通過後，將會跳轉到我們所設定的index頁面。

 

5.      修改更改密碼和退出的HTML頁面。


我們對右上角的這個菜單進行一個簡單的編輯，將密碼修改鏈接放於這個頁面中。

我們對index.html頁面中的section:basics/navbar.user_menu進行更改。

<!-- #section:basics/navbar.user_menu -->
               <li class="light-blue">
                  <a data-toggle="dropdown" href="#" class="dropdown-toggle">

                     <span class="user-info">
                               <!--判斷用戶是否已經通過認證，如果通過則顯示用戶已登陸-->
                                   {% if user.is_authenticated %}
                                       用戶選項
                                       <small>{{user.username }}已登錄</small>
                                   {% else %}
                                       用戶選項
                                   {% endif %}

                     </span>

                     <i class="ace-icon fa fa-caret-down"></i>
                  </a>

                  <ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">

                               <!--如果用戶已經登陸則顯示註銷選項，否則顯示登錄選項-->
                               {% if user.is_authenticated %}
                                   <li>
                        <a href="{% url 'logout' %}">
                           <i class="ace-icon fa fa-power-off"></i>
                           註銷
                        </a>
                     </li>
                                   {% else %}
                     <li>
                        <a href="{% url 'login'%}">
                           <i class="ace-icon fa fa-user"></i>
                           登錄
                        </a>
                     </li>
                               {% endif %}

                               <li class="divider"></li>
                               <li>
                        <a href="{% url 'password_change' %}">
                           <i class="ace-icon fa fa-cog"></i>
                           更改密碼
                        </a>
                     </li>




                  </ul>
               </li>

               <!-- /section:basics/navbar.user_menu -->


6.      驗證用戶登錄、修改密碼及註銷

如果用戶echo已經登錄，那麼顯示如下


我們點擊註銷後，會退回到login頁面。

 

如果我們不通過登錄，而直接訪問index頁面。則看到的頁面如下


點擊更改密碼後，我們發現跳轉至了Django的更改密碼頁面，在這個頁面上我們可以順利更改相應密碼。


 

如果修改密碼完成後，會自動跳轉至index頁面。

 

點擊註銷功能後，頁面會跳轉至login頁面。


發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

二.djangoECHO項目的建立

1.      基礎環境的配套軟件   操作系統: WINDOWS 7 IDE環境：Pycharm 4.3 數據庫：mysql 5.051b 服務器：APACHE 2.2.8 開發包： PYTHON 2.7.5 http://www.py

静以修身养心 2020-06-26 07:35:14

三.通過Model建立數據庫信息

静以修身养心 2020-02-26 05:04:14

六.Django中URL的參數傳遞

静以修身养心 2020-02-26 05:04:14

一.項目介紹及django的MTV模式簡介

静以修身养心 2020-02-26 05:04:14

五. Django的forms與ModelForm

静以修身养心 2020-02-26 05:04:14

四.Django的template

静以修身养心 2020-02-26 05:04:14

二十. 增加一個項目協作留言板功能（六）----- 增加一個任務結束按鈕

静以修身养心 2018-09-05 02:47:02

二十五.將ECHO項目部署至LINUX環境

静以修身养心 2018-09-05 02:47:02

十九. 增加一個項目協作留言板功能（五）----- 增加添加附件功能

静以修身养心 2018-09-05 02:47:01

十八. 增加一個項目協作留言板功能（四）----- 增加實施步驟的增刪改查功能

静以修身养心 2018-09-05 02:47:01

十二.通過bootstrap的modal.js來完成刪除功能

静以修身养心 2018-09-05 02:47:01

二十二.完善Dashboard頁面並更改font awesome icons

静以修身养心 2018-09-05 02:47:00

七.將bootstrap模板ACE引入django

静以修身养心 2018-09-05 02:47:00

十七. 增加一個項目協作留言板功能（三）----- 增加任務的修改和刪除功能

静以修身养心 2018-09-05 02:47:00

二十三.優化整個項目界面

静以修身养心 2018-09-05 02:47:00