二十一.增加用户登陆界面

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/alex_chen_16/article/details/51729924

由于我们这是一个对内的项目管理界面,因此,我不提供用户的公开注册,只负责用户登陆并让用户更改密码。建立用户可以通过admin后台来建立。如果需要拥有一套完整的用户注册系统,可以直接选择一个django-registration-redux的插件。

 

在这里,我们用Django提供的一个原生的注册系统来实现。具体文档可以参阅:

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

 

其中,我们使用Django提供的Authentication ViewsDjango提供了好几种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目录下。通过ACElogin.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页面。


展开阅读全文

没有更多推荐了,返回首页