一个登录页面的实现
自己比较笨,一个登录界面搞了半天,终于有了点眉目,现在记录下来,免得自己过段时间又忘了。
先说下软件配置,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>
后面随时会进行修改和完善