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

来源：互联网发布：js接受php时间戳编辑：程序博客网时间：2024/06/15 10:30

由于我们这是一个对内的项目管理界面，因此，我不提供用户的公开注册，只负责用户登陆并让用户更改密码。建立用户可以通过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，我们做适当的修改，将一些不必要的功能去掉简化。

% 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页面。

3 0