目录
引言:
bootstrap登录页面外观比较平庸,看久了有点疲倦,现将登录页面美化一下。
环境准备:
1.python3
2.django
3.bootstrap3
后端代码:
创建login_check视图函数,用来处理登录
def login_action(request):
if request.method == "POST":
username = request.POST.get('username','')
password = request.POST.get('password','')
remember = request.POST.get('remember','')
print(remember)
user = auth.authenticate(username=username,password=password)
if user is not None:
auth.login(request,user) #登陆
request.session['user'] = username
response = HttpResponseRedirect('/event_manager/')
if remember == "on":
# 设置cookie username *过期时间为1周
response.set_cookie('username', username, max_age=7 * 24 * 3600)
return response
else:
# return render(request,'index.html',{'error':'username or password error!'})
return redirect('/login/')
创建login视图函数,用来返回登录页面
#登录显示页面
def login(request):
'''显示登陆页面'''
# 获取cookie username
if 'username' in request.COOKIES:
# 获取记住的用户名
username = request.COOKIES['username']
print("用户名名:%s"%username)
else:
username = ''
return render(request,'index_bak.html',{'username': username})
前端HTML部分代码:
<div class="container" style="margin-top: 13%;">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-success">
<div class="panel-heading">登录信息</div>
<div class="panel-body">
<form action="/login_action/" method="post">
<div class="form-group has-feedback">
<i class="fa fa-user fa-lg"></i>
<input type="text" class="form-control" name="username" value="{{ username }}"
placeholder="用户名">
</div>
<div class="form-group has-feedback">
<i class="fa fa-lock fa-lg"></i>
<input type="password" class="form-control" name="password"
placeholder="密码">
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="remember">记住用户名
</label>
</div>
</div>
<!-- button的btn-block 可以占满当前珊栏而不用自适应。-->
<button type="submit" class="btn btn-success btn-block btn-lg">登录</button>
</form>
</div>
</div>
</div>
</div>
</div>
打开浏览器访问登录页面:
再对比一下默认的登录
以上源码如需要可加群:696400122获取。