zoukankan      html  css  js  c++  java
  • 一个登录页面的实现

    自己比较笨,一个登录界面搞了半天,终于有了点眉目,现在记录下来,免得自己过段时间又忘了。

    先说下软件配置,python 3.3,django 1.6, bootstrap 3

    一个登录页面的模板login.html,一个登录后要跳转的页面main.html

    app下的urls.py:

    1 from django.conf.urls import patterns, url, include
    2 from .views import login_view,main_view
    3 
    4 urlpatterns = patterns('',
    5         url(r'^login/$', login_view,name='login'),
    6         url(r'^main/$', main_view,name='main'),
    7     )

    app下的表单文件forms.py :

     1 from django import forms
     2 
     3 class LoginForm(forms.Form):
     4     username = forms.CharField(required=True,
     5             label='',
     6             max_length=12,
     7             error_messages={'required':'请输入用户名'},
     8             widget=forms.TextInput(
     9                 attrs={'placeholder':'用户名',
    10                        'class':'form-control'}))
    11     password = forms.CharField(required=True,
    12             label='',
    13             max_length=12,
    14             min_length=6,
    15             error_messages={'required':'请输入密码'},
    16             widget=forms.PasswordInput(
    17                 attrs={'placeholder':'密码',
    18                        'class':'form-control'}))
    19     
    20     def clean(self):
    21         if not self.is_valid():
    22             raise forms.ValidationError('用户名和密码为必填项')
    23         else:
    24             cleaned_data = super().clean()

     

    app下的views.py:

     1 from django.shortcuts import render_to_response,redirect,render
     2 from django.template import RequestContext
     3 from django.contrib import auth
     4 from django.contrib.auth.decorators import login_required
     5 
     6 from .forms import LoginForm
     7 
     8 def login_view(request):
     9     if request.method == 'GET':  
    10         form = LoginForm(auto_id=False)  
    11         return render_to_response('game/login.html',
    12                 RequestContext(request, {'form': form,}))
    13     else:  
    14         form = LoginForm(request.POST)  
    15         if form.is_valid():  
    16             username = request.POST.get('username', '')  
    17             password = request.POST.get('password', '')  
    18             user = auth.authenticate(username=username,
    19                                      password=password)  
    20             if user is not None and user.is_active:  
    21                 auth.login(request, user)  
    22                 return redirect('/game/main/')
    23             else:  
    24                 return render_to_response('game/login.html',
    25                     RequestContext(request, 
    26                         {'form': form,'password_is_wrong':True}))  
    27         else:  
    28             return render_to_response('game/login.html',
    29                     RequestContext(request, {'form': form,}))  
    30 
    31 @login_required(login_url='/game/login/')
    32 def main_view(request):
    33     return render(request, 'game/main.html', {'user':request.user})

           这两天一直在折腾登录,一开始不加@login_required时可以正常跳转到登录后的页面,但是一旦加了@login_required后,就不能正常工作,百思不得其解,经过多番尝试,终于理解了问题发生的原因,在login_view函数里,auth.login(request,user)的后面一句不能写成return render或render_to_response,因为登录成功后会因为render直接显示main.html这个页面,根本就没有跳转到main_view视图函数,因此在登录语句后应该写成跳转的形式。

    登录模板使用了bootstrap的样式

     1 <!DOCTYPE html>
     2 <html lang="en">
     3   <head>
     4     <meta charset="utf-8">
     5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     6     <meta name="viewport" content="width=device-width, initial-scale=1">
     7     <meta name="description" content="">
     8     <meta name="author" content="">
     9 <!--     <link rel="shortcut icon" href="../../assets/ico/favicon.ico"> -->
    10 
    11     <title>系统登录</title>
    12 
    13     <!-- Bootstrap core CSS -->
    14     <link href="/static/css/bootstrap.css" rel="stylesheet">
    15 
    16     <!-- Custom styles for this template -->
    17     <link href="/static/css/signin.css" rel="stylesheet">
    18 
    19     <!-- Just for debugging purposes. Don't actually copy this line! -->
    20     <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    21 
    22     <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    23     <!--[if lt IE 9]>
    24       <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    25       <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    26     <![endif]-->
    27   </head>
    28 
    29   <body>
    30       {% if password_is_wrong %}  
    31         <div class="alert alert-error">    
    32             <h4>错误!</h4>用户名或密码错误  
    33         </div>  
    34          {% endif %} 
    35     <div class="container">
    36 
    37       <form class="form-signin" role="form" action="{% url 'game:login'  %}" method="post">
    38       {% csrf_token %}
    39         
    40         <h2 class="form-signin-heading">请登录</h2>
    41          {{ form.as_p }} 
    42 <!--          <input type="hidden" name="next" value="{{ next }}" /> -->
    43         <!-- <input type="text"  class="form-control" placeholder="请输入用户名" required autofocus>
    44         <input type="password" class="form-control" placeholder="请输入密码" required> -->
    45         <label class="checkbox">
    46           <input type="checkbox" value="remember-me"> 记住我
    47         </label>
    48         <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
    49       </form>
    50     </div> <!-- /container -->
    51 
    52 
    53     <!-- Bootstrap core JavaScript
    54     ================================================== -->
    55     <!-- Placed at the end of the document so the pages load faster -->
    56   </body>
    57 </html>

    登录后的main.html页面:

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta charset="UTF-8">
     5 <title>Insert title here</title>
     6 </head>
     7 <body>
     8 {% if user.is_authenticated %}
     9     {{ user.username }} Successful
    10 {% else %}
    11     Failed
    12 {% endif %} 
    13 </body>
    14 </html>

    后面随时会进行修改和完善

  • 相关阅读:
    GDI+中发生一般性错误
    反复
    一些网址
    控制listview大图标之间的间距
    android 系统移植
    android 启动报错
    android init.rc 语法分析
    Linux下的管道编程技术dup函数和dup2函数
    为了防止打开的设备 被占用
    android 多媒体框架
  • 原文地址:https://www.cnblogs.com/captain-cp/p/3560976.html
Copyright © 2011-2022 走看看