Django之登录页面优化--添加验证码
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
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)