Django之登录页面优化--添加验证码
前面写的Django项目，前端登录页面较简单如下图，为了美化操作这边优化了前端登录页面。为了只专注登录页面优化这边新构建一个项目用于测试，后续在CV使用到其他项目上。
创建项目及应用
django-admin startproject myproject
cd myproject
python manage.py startapp myapp
配置应用
- 在myproject/settings.py文件的INSTALLED_APPS列表中添加myapp应用：
INSTALLED_APPS = [
...
'myapp',
]
创建视图文件
- 在myapp应用下创建一个新的视图文件views.py，并编写以下代码：
from django.shortcuts import render, redirect
from django.contrib.auth import authenticate, login
from django.contrib import messages
from django.http import HttpResponse
def login_view(request):
if request.method == 'POST':
username = request.POST.get('username')
password = request.POST.get('password')
captcha = request.POST.get('captcha')
# 验证码校验
if captcha != 'ABCD':
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')
return render(request, 'login.html')
创建模版文件
- 在myapp下创建一个新的templates文件夹，并在其中创建一个名为login.html的HTML模板，内容如下：
<!DOCTYPE html>
<html>
<head>
<title>登录</title>
</head>
<body>
{% 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">验证码：</label>
<input type="text" id="captcha" name="captcha" required>
<img src="/captcha.jpg" alt="验证码">
<button type="submit">登录</button>
</form>
</body>
</html>
配置路由
- 在myproject/urls.py文件中添加以下URL配置：
from django.contrib import admin
from django.urls import path
from myapp.views import login_view
urlpatterns = [
path('admin/', admin.site.urls),
path('login/', login_view, name='login'),
]
创建数据库及用户
python manage.py migrate
python manage.py createsuperuser
运行访问
通过http://localhost:8000/login/访问登录页面，输入用户名、密码和验证码后进行登录操作。请注意，以上示例中的验证码是硬编码为"ABCD"
python manage.py runserver
