Django登录页面优化--动态验证码
本章节添加修改动态验证码功能，基于前一章使用的前端环境进行代码修改。安装依赖库
pip install Pillow pip install django-simple-captcha
添加captcha应用
在myproject/settings.py文件的INSTALLED_APPS列表中添加captcha应用
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'captcha',
'myapp',
]
配置视图
from django.contrib.auth import authenticate, login
from django.http import HttpResponse
from django.contrib import messages
from captcha.models import CaptchaStore
from captcha.helpers import captcha_image_url
from django.shortcuts import redirect
def login_view(request):
if request.method == 'POST':
username = request.POST.get('username')
password = request.POST.get('password')
captcha_solution = request.POST.get('captcha_solution')
captcha_key = request.POST.get('captcha_key')
# 验证码校验
if captcha_key and captcha_solution:
if not CaptchaStore.objects.filter(response=captcha_solution, hashkey=captcha_key).exists():
messages.error(request, '验证码错误')
return redirect('login')
# 身份验证
user = authenticate(request, username=username, password=password)
if user:
login(request, user)
return HttpResponse('登录成功！')
else:
messages.error(request, '用户名或密码错误')
return redirect('login')
new_key = CaptchaStore.generate_key()
image_url = captcha_image_url(new_key)
return render(request, 'login.html', {'key': new_key, 'image_url': image_url})
修改登录模板
在myapp/templates/login.html文件中，替换原先的验证码部分为动态生成的验证码代码
<label for="captcha_solution">验证码：</label>
<input type="text" id="captcha_solution" name="captcha_solution" required>
<img src="{{ image_url }}" alt="验证码">
<input type="hidden" name="captcha_key" value="{{ key }}">
完整配置如下
<!--添加动态验证码-->
{% if messages %}
{% for message in messages %}
<p>{{ message }}</p>
{% endfor %}
{% endif %}
<form method="POST">
{% csrf_token %}
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required>
<label for="password">密码：</label>
<input type="password" id="password" name="password" required>
<label for="captcha_solution">验证码：</label>
<input type="text" id="captcha_solution" name="captcha_solution" required>
<img src="{{ image_url }}" alt="验证码">
<input type="hidden" name="captcha_key" value="{{ key }}">
<button type="submit">登录</button>
</form>
</body>
</html>
配置添加路由
在myproject/urls.py文件中，修改URL配置如下
from django.contrib import admin
from django.urls import path, include
from myapp.views import login_view
urlpatterns = [
path('admin/', admin.site.urls),
path('login/', login_view, name='login'),
path('captcha/', include('captcha.urls')),
]
运行代码
优化登录页面的背景功能
修改模版文件
将框居于页面右侧存放，并使框中的表单和验证码大小适中，您可以使用 CSS 的 margin 属性和一些调整。
要优化表单内容不超出框外，您可以使用 CSS 的 overflow 属性来控制框的溢出行为。
对 .login-form 的样式进行了修改。通过设置 overflow: hidden，我们隐藏了框外的内容，以确保表单内容不会溢出框外。
对 body 的样式进行了修改。通过设置 justify-content: flex-end，我们将框居于页面的右侧。
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
justify-content: flex-end;
align-items: center;
height: 100vh;
background-image: url("https://img1.baidu.com/it/u=3663508195,2907650417&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1692378000&t=9f11a3e494efccd0dad4d4ce8fd1d627");
background-size: cover;
}
.login-form {
background-color: #fff;
padding: 20px;
border-radius: 5px;
width: 50%;
max-width: 300px;
overflow: hidden; /* 隐藏框外的内容 */
}
.login-form label {
display: block;
margin-bottom: 10px;
}
.login-form input {
width: 96%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.login-form img {
display: block;
margin-bottom: 10px;
width: 100%;
max-width: 200px;
}
.login-form button {
padding: 10px 20px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
align-self: flex-end;
}
</style>
</head>
<body>
<div class="login-form">
{% if messages %}
{% for message in messages %}
<p>{{ message }}</p>
{% endfor %}
{% endif %}
<form method="POST">
{% csrf_token %}
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required>
<label for="password">密码：</label>
<input type="password" id="password" name="password" required>
<label for="captcha_solution">验证码：</label>
<input type="text" id="captcha_solution" name="captcha_solution" required>
<img src="{{ image_url }}" alt="验证码">
<input type="hidden" name="captcha_key" value="{{ key }}">
<button type="submit">登录</button>
</form>
</div>
</body>
</html>
最终优化登录页面
标签：--,request,验证码,django,captcha,import,login,Django From： https://www.cnblogs.com/weiweirui/p/17643364.html