Python Web开发记录 Day12：Django part6 用户登录

名人说：东边日出西边雨，道是无晴却有晴。——刘禹锡《竹枝词》
创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊）

目录

      • 1、登录界面
      • 2、用户名密码校验
      • 3、cookie与session配置
        • ①cookie与session
        • ②配置
      • 4、登录验证
      • 5、注销登录
      • 6、图片验证码
        • ①Pillow库
        • ②图片验证码的实现
      • 7、补充：图片验证码的作用和扩展
        • ①作用
        • ②其他类型的验证码
      • 8、验证码校验

在上一篇博客中我们实现了管理员管理的内容，本篇博客则来实现用户登录，使系统的功能更加完善。

1、登录界面

1.在urls.py中添加用户列表的路径login/，并告诉该路径指向的视图account.login

from django.urls import path
from api.views import depart, user, pretty, admin, accounturlpatterns = [# 部门管理path("depart/list/", depart.depart_list),path("depart/add/", depart.depart_add),path("depart/delete/", depart.depart_delete),path("depart/<int:nid>/edit/", depart.depart_edit),# 用户管理path("user/list/", user.user_list),path("user/add/", user.user_add),path("user/model/form/add/", user.user_model_form_add),path('user/<int:nid>/edit/', user.user_edit),path("user/<int:nid>/delete/", user.user_delete),# 靓号管理path("pretty/list/", pretty.pretty_list),path("pretty/add/", pretty.pretty_add),path("pretty/<int:nid>/edit/", pretty.pretty_edit),path("pretty/<int:nid>/delete/", pretty.pretty_delete),# 管理员管理path('admin/list/', admin.admin_list),path('admin/add/', admin.admin_add),path('admin/<int:nid>/edit/', admin.admin_edit),path('admin/<int:nid>/delete/', admin.admin_delete),path('admin/<int:nid>/reset/', admin.admin_reset),# 用户登录path('login/', account.login),
]

2.在views文件夹下新建account.py，并在account.py中写出对应的函数，发出请求，并返回响应login.html

"""
from django.shortcuts import render
这段代码是导入Django中的一个函数`render`，用于渲染HTML模板并返回一个HttpResponse对象。
render函数通常在视图函数中使用，将数据和模板作为参数传递给它，然后它会根据***模板和数据生成HTML页面***，并返回给浏览器。
"""
from django.shortcuts import render, HttpResponse, redirect
from django import forms
from api.utils.bootstrap import BootStrapForm
from api.utils.encrypt import md5
from api.models import Admin
from api.utils.code import check_code
from io import BytesIO# 这一次采用Form来实现
class LoginForm(BootStrapForm):username = forms.CharField(label="用户名",widget=forms.TextInput(attrs={"class": "form-control"}),required=True,)password = forms.CharField(label="用户名",# render_value=True 表示当提交后,如果密码输入错误,不会自动清空密码输入框的内容widget=forms.PasswordInput(attrs={"class": "form-control"}, ),required=True,)code = forms.CharField(label="验证码",widget=forms.TextInput,required=True)def clean_password(self):pwd = self.cleaned_data.get("password")return md5(pwd)def login(request):"""登录"""if request.method == "GET":form = LoginForm()return render(request, 'login.html', {"form": form})form = LoginForm(data=request.POST)if form.is_valid():# 验证成功, 获取到的用户名和密码print(form.cleaned_data)# 验证码的校验user_input_code = form.cleaned_data.pop('code')image_code = request.session.get('image_code', "")if image_code.upper() != user_input_code.upper():form.add_error("code", "验证码错误")return render(request, 'login.html', {"form": form})# 去数据库校验用户名和密码是否正确admin_object = Admin.objects.filter(**form.cleaned_data).first()if not admin_object:form.add_error("password", "用户名或密码错误")return render(request, 'login.html', {"form": form})# 用户名密码和验证码正确# 网站生成随机字符串，写到用户浏览器的cookie中，再写入到服务器的session中request.session["info"] = {'id': admin_object.id, 'name': admin_object.username}request.session.set_expiry(60 * 60 * 24 * 7)return redirect("/admin/list/")return render(request, 'login.html', {"form": form})

3.创建templates目录下模版html文login.html，以此呈现做用户登录的界面。

模板layout.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--Bootstrap框架--><link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.min.css' %}"><link rel="stylesheet" href="{% static 'plugins/font-awesome-4.7.0/css/font-awesome.css' %}"><!--datetimepicker插件--><link rel="stylesheet" type="text/css"href="{% static 'plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css' %}">{% block css %}<style>.navbar {border-radius: 0;}</style>{% endblock %}
</head>
<body>
<nav class="navbar navbar-default"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse"data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">用户管理系统</a></div><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li><a href="/admin/list">管理员账户</a></li><li><a href="/depart/list">部门管理</a></li><li><a href="/user/list">用户管理</a></li><li><a href="/pretty/list">靓号管理</a></li>{#                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>#}</ul><ul class="nav navbar-nav navbar-right"><li><a href="/login">登录</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"aria-expanded="false">{{ request.session.info.name }}<span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">个人资料</a></li><li><a href="#">我的信息</a></li><li role="separator" class="divider"></li><li><a href="/logout/">注销</a></li></ul></li></ul></div></div>
</nav><div><div class="container">{% block content %}{% endblock %}</div>
</div>{% block js %}<script src="{% static 'js/jquery.min.js' %}"></script><!-- 加载 Bootstrap DateTimePicker JS --><script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.js' %}"></script><script src="{% static 'plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js' %}"></script><script src="{% static 'plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js' %}"></script><script type="text/javascript">$(function () {//当容器加载完成，对容器调用工具函数$("#dt").datetimepicker({language: 'zh-CN', //语言format: 'yyyy-mm-dd',//日期的格式minView: 'month', //可以选择的最小视图initialDate: new Date(),//初始化显示的日期autoclose: true,//设置选择完日期或者时间之后，日否自动关闭日历todayBtn: true,//设置自动显示为今天clearBtn: false//设置是否清空按钮，默认为false});});</script>
{% endblock %}

login.html

{% extends 'layout.html' %}{% block css %}
<style>.account {width: 400px;border: 1px solid #dddddd;border-radius: 5px;box-shadow: 5px 5px 20px #aaa;margin-left: auto;margin-right: auto;margin-top: 100px;padding: 20px 40px;}.account h2 {margin-top: 10px;text-align: center;}
</style>
{% endblock %}{% block content %}
<div class="account"><h2>用户登录</h2><div class="panel-body"><form method="post" novalidate>{% csrf_token %}<div class="form-group"><label>用户名</label>{{ form.username }}<span style="color: red;">{{ form.errors.username.0 }}</span></div><div class="form-group"><label>密码</label>{{ form.password }}<span style="color: red;">{{ form.errors.password.0 }}</span></div><div class="form-group"><label for="id_code">图片验证码</label><div class="row"><div class="col-xs-7"><input type="text" name="code" class="form-control" placeholder="请输入图片验证码" required="" id="id_code"><span style="color: red;"></span></div><div class="col-xs-5"><img src="/image/code/" alt="" id="image_code" onclick="this.setAttribute('src','/image/code/?random='+Math.random())"></div></div></div><button type="submit" class="btn btn-primary center-block" style="width: 80px;">登 录</button></form></div>
</div>
{% endblock %}

效果：

image-20240316094200228

2、用户名密码校验

在用户登录时，我们需要考虑一个问题，用户所输入的用户名和密码是否正确？是否与数据库中存储的用户名和密码一致？接下来我们就来解决这些问题。

1.修改login.html、form.py和account.py

a.修改login.html

{% extends 'layout.html' %}{% block css %}
<style>.account {width: 400px;border: 1px solid #dddddd;border-radius: 5px;box-shadow: 5px 5px 20px #aaa;margin-left: auto;margin-right: auto;margin-top: 100px;padding: 20px 40px;}.account h2 {margin-top: 10px;text-align: center;}
</style>
{% endblock %}{% block content %}
<div class="account"><h2>用户登录</h2><div class="panel-body"><form method="post" novalidate>{% csrf_token %}<div class="form-group"><label>用户名</label>{{ form.username }}<span style="color: red;">{{ form.errors.username.0 }}</span></div><div class="form-group"><label>密码</label>{{ form.password }}<span style="color: red;">{{ form.errors.password.0 }}</span></div><div class="form-group"><label for="id_code">图片验证码</label><div class="row"><div class="col-xs-7"><input type="text" name="code" class="form-control" placeholder="请输入图片验证码" required="" id="id_code"><span style="color: red;"></span></div><div class="col-xs-5"><img src="/image/code/" alt="" id="image_code" onclick="this.setAttribute('src','/image/code/?random='+Math.random())"></div></div></div><button type="submit" class="btn btn-primary center-block" style="width: 80px;">登 录</button></form></div>
</div>
{% endblock %}

在templates目录下新建error.html

error.html

{% extends 'layout.html' %}{% block content %}<div class="container"><div class="alert alert-danger" role="alert">{{ msg }}</div></div>
{% endblock %}

b.在form.py新增用户登录模块，此次采用Form来实现。

class LoginForm(BootStrapForm):username = forms.CharField(label="用户名",widget=forms.TextInput(attrs={"class": "form-control"}),required=True)password = forms.CharField(label="密码",widget=forms.PasswordInput(attrs={"class": "form-control"}, render_value=True),required=True)code = forms.CharField(label="验证码",widget=forms.TextInput(attrs={"class": "form-control"}),required=True,)def clean_password(self):pwd = self.cleaned_data.get("password")return md5(pwd)

c.修改account.py

"""
from django.shortcuts import render
这段代码是导入Django中的一个函数`render`，用于渲染HTML模板并返回一个HttpResponse对象。
render函数通常在视图函数中使用，将数据和模板作为参数传递给它，然后它会根据***模板和数据生成HTML页面***，并返回给浏览器。
"""
from django.shortcuts import render, HttpResponse, redirect
from django import forms
from api.utils.bootstrap import BootStrapForm
from api.utils.encrypt import md5
from api.models import Admin
from api.utils.code import check_code
from io import BytesIO# 这一次采用Form来实现
class LoginForm(BootStrapForm):username = forms.CharField(label="用户名",widget=forms.TextInput(attrs={"class": "form-control"}),required=True,)password = forms.CharField(label="用户名",# render_value=True 表示当提交后,如果密码输入错误,不会自动清空密码输入框的内容widget=forms.PasswordInput(attrs={"class": "form-control"}, ),required=True,)code = forms.CharField(label="验证码",widget=forms.TextInput,required=True)def clean_password(self):pwd = self.cleaned_data.get("password")return md5(pwd)def login(request):"""登录"""if request.method == "GET":form = LoginForm()return render(request, 'login.html', {"form": form})form = LoginForm(data=request.POST)if form.is_valid():# 验证成功, 获取到的用户名和密码print(form.cleaned_data)# 验证码的校验user_input_code = form.cleaned_data.pop('code')image_code = request.session.get('image_code', "")if image_code.upper() != user_input_code.upper():form.add_error("code", "验证码错误")return render(request, 'login.html', {"form": form})# 去数据库校验用户名和密码是否正确admin_object = Admin.objects.filter(**form.cleaned_data).first()if not admin_object:form.add_error("password", "用户名或密码错误")return render(request, 'login.html', {"form": form})# 用户名密码和验证码正确# 网站生成随机字符串，写到用户浏览器的cookie中，再写入到服务器的session中request.session["info"] = {'id': admin_object.id, 'name': admin_object.username}request.session.set_expiry(60 * 60 * 24 * 7)return redirect("/admin/list/")return render(request, 'login.html', {"form": form})

效果：输入用户名或密码错误时，此时登录时会提示“用户名或密码错误”

image-20240316163829029

3、cookie与session配置

在解决了用户名密码校验后，又遇到了一个问题，那就是我们平时访问一些网站会提示是否接受cookies？它是什么？有什么用？我们项目中怎么引入来它呢？

①cookie与session

Cookie和Session都是用于维持用户状态和数据的机制，它们在Web应用中扮演着重要的角色。下面我将用中文详细解释Cookie和Session的概念，并使用Markdown进行格式化。

1.Cookie

Cookie是一种在客户端（通常是浏览器）存储数据的机制。它以键值对的形式存储在浏览器中，由服务器在HTTP响应头中设置，并在后续的请求中发送回服务器。

  • 特点：

    • 存储在客户端浏览器中
    • 大小限制：一般不超过4KB
    • 可以设置过期时间
    • 可以设置访问路径和域名
    • 每次请求都会自动携带相应的Cookie

  • 用途：

    • 会话管理：记录用户的登录状态、购物车等
    • 个性化设置：记录用户的偏好、主题等
    • 行为跟踪：记录用户的浏览行为、广告点击等

2.Session

Session是在服务器端存储用户状态和数据的机制。它基于Cookie实现，但数据存储在服务器端。当用户第一次访问网站时，服务器会生成一个唯一的Session ID，并将其以Cookie的形式发送给客户端。后续的请求中，客户端会将Session ID发送回服务器，服务器根据Session ID获取对应的用户数据。

  • 特点：

    • 存储在服务器端
    • 大小限制：理论上没有限制，取决于服务器的内存大小
    • 安全性相对较高，数据不容易被篡改
    • 依赖Cookie传递Session ID

  • 用途：

    • 用户认证：存储用户的登录状态
    • 敏感数据的存储：存储用户的个人信息、权限等
    • 服务器端数据共享：在不同的页面或请求之间共享数据

3.Cookie与Session的区别

特性CookieSession
存储位置客户端（浏览器）服务器端
大小限制一般不超过4KB理论上没有限制，取决于服务器的内存大小
安全性相对较低，数据容易被篡改相对较高，数据存储在服务器端
数据传递每次请求都会自动携带相应的Cookie依赖Cookie传递Session ID
用途会话管理、个性化设置、行为跟踪等用户认证、敏感数据存储、服务器端数据共享
②配置

1.修改account.py中的login函数

image-20240316164346245

def login(request):"""登录"""if request.method == "GET":form = LoginForm()return render(request, 'login.html', {"form": form})form = LoginForm(data=request.POST)if form.is_valid():# 验证成功, 获取到的用户名和密码print(form.cleaned_data)# 验证码的校验user_input_code = form.cleaned_data.pop('code')image_code = request.session.get('image_code', "")if image_code.upper() != user_input_code.upper():form.add_error("code", "验证码错误")return render(request, 'login.html', {"form": form})# 去数据库校验用户名和密码是否正确admin_object = Admin.objects.filter(**form.cleaned_data).first()if not admin_object:form.add_error("password", "用户名或密码错误")return render(request, 'login.html', {"form": form})# 用户名密码和验证码正确# 网站生成随机字符串，写到用户浏览器的cookie中，再写入到服务器的session中request.session["info"] = {'id': admin_object.id, 'name': admin_object.username}request.session.set_expiry(60 * 60 * 24 * 7)return redirect("/admin/list/")return render(request, 'login.html', {"form": form})

在登录成功后，页面会跳转到管理员界面，而session信息将保存在服务端数据库django_session表中。

2.mysql显示表中数据

mysql> show tables;
+----------------------------+
| Tables_in_henan16          |
+----------------------------+
| api_admin                  |
| api_department             |
| api_prettynum              |
| api_userinfo               |
| auth_group                 |
| auth_group_permissions     |
| auth_permission            |
| auth_user                  |
| auth_user_groups           |
| auth_user_user_permissions |
| django_admin_log           |
| django_content_type        |
| django_migrations          |
| django_session             |
+----------------------------+
14 rows in set (0.00 sec)mysql> select * from django_session;
+----------------------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------+----------------------------+
| session_key                      | session_data                                                                                                                                                    | expire_date                |
+----------------------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------+----------------------------+
| z4ujk56tzhhareeh77z353vvm0upmaca | eyJpbWFnZV9jb2RlIjoiRklLUkYiLCJfc2Vzc2lvbl9leHBpcnkiOjYwfQ:1rlAeT:qgyi412exxDZPTwag0HYh7jtGUyc-Kav-VvQ_2MxsaI                                                   | 2024-03-15 16:44:25.482192 |
+----------------------------------+-----------------------------------------------------------------------------------------------------------------------------------------------------------------+----------------------------+
1 rows in set (0.01 sec)

image-20240315234226850

4、登录验证

在实现了这个用户名密码验证之后，我们要对每个页面进行验证，只有登录的人才能访问这些页面，怎么实现登录验证？这个问题我们学了中间件后就会变得越发清晰。

中间件会在视图函数下的每个方法执行前调用，不用再每个方法下进行判断，不然会导致函数过多显得冗杂。

1.新建middleware目录，并在该目录下新建auth.py文件

image-20240316165701978

auth.py

from django.utils.deprecation import MiddlewareMixin
from django.shortcuts import HttpResponse, redirectclass AuthMiddleware(MiddlewareMixin):def process_request(self, request):# 0.排除那些不需要登录就能访问的页面#   request.path_info 获取当前用户请求的URL /login/if request.path_info in ["/login/", "/image/code/"]:return# 1.读取当前访问的用户的session信息，如果能读到，说明已登陆过，就可以继续向后走。info_dict = request.session.get("info")# print(info_dict)if info_dict:return# 2.没有登录过，重新回到登录页面return redirect('/login/')

2.修改settings.py

image-20240316165804072

MIDDLEWARE = ["django.middleware.security.SecurityMiddleware","django.contrib.sessions.middleware.SessionMiddleware","django.middleware.common.CommonMiddleware","django.middleware.csrf.CsrfViewMiddleware","django.contrib.auth.middleware.AuthenticationMiddleware","django.contrib.messages.middleware.MessageMiddleware","django.middleware.clickjacking.XFrameOptionsMiddleware",'api.middleware.auth.AuthMiddleware',
]

到了这里，你会发现，只要你没登陆过，你无论访问哪个板块的页面，都会跳转到登录界面。

那么此时登录校验的功能就实现了，但是由于目前无法退出，说明该用户登录功能仍有缺陷需要改善，接下来咱们就对这一部分做进一步的介绍。

5、注销登录

1.在layout.html中配置注销（退出登录的）的跳转URL路径。

image-20240315235913270

layout.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--Bootstrap框架--><link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.min.css' %}"><link rel="stylesheet" href="{% static 'plugins/font-awesome-4.7.0/css/font-awesome.css' %}"><!--datetimepicker插件--><link rel="stylesheet" type="text/css"href="{% static 'plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css' %}">{% block css %}<style>.navbar {border-radius: 0;}</style>{% endblock %}
</head>
<body>
<nav class="navbar navbar-default"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse"data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">用户管理系统</a></div><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li><a href="/admin/list">管理员账户</a></li><li><a href="/depart/list">部门管理</a></li><li><a href="/user/list">用户管理</a></li><li><a href="/pretty/list">靓号管理</a></li>{#                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>#}</ul><ul class="nav navbar-nav navbar-right"><li><a href="/login">登录</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"aria-expanded="false">{{ request.session.info.name }}<span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">个人资料</a></li><li><a href="#">我的信息</a></li><li role="separator" class="divider"></li><li><a href="/logout/">注销</a></li></ul></li></ul></div></div>
</nav><div><div class="container">{% block content %}{% endblock %}</div>
</div>{% block js %}<script src="{% static 'js/jquery.min.js' %}"></script><!-- 加载 Bootstrap DateTimePicker JS --><script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.js' %}"></script><script src="{% static 'plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js' %}"></script><script src="{% static 'plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js' %}"></script><script type="text/javascript">$(function () {//当容器加载完成，对容器调用工具函数$("#dt").datetimepicker({language: 'zh-CN', //语言format: 'yyyy-mm-dd',//日期的格式minView: 'month', //可以选择的最小视图initialDate: new Date(),//初始化显示的日期autoclose: true,//设置选择完日期或者时间之后，日否自动关闭日历todayBtn: true,//设置自动显示为今天clearBtn: false//设置是否清空按钮，默认为false});});</script>
{% endblock %}

2.在urls.py中添加用户列表的路径logout/，并告诉该路径指向的视图view.logout

urls.py

from django.urls import path
from api.views import depart, user, pretty, admin, accounturlpatterns = [# 部门管理path("depart/list/", depart.depart_list),path("depart/add/", depart.depart_add),path("depart/delete/", depart.depart_delete),path("depart/<int:nid>/edit/", depart.depart_edit),# 用户管理path("user/list/", user.user_list),path("user/add/", user.user_add),path("user/model/form/add/", user.user_model_form_add),path('user/<int:nid>/edit/', user.user_edit),path("user/<int:nid>/delete/", user.user_delete),# 靓号管理path("pretty/list/", pretty.pretty_list),path("pretty/add/", pretty.pretty_add),path("pretty/<int:nid>/edit/", pretty.pretty_edit),path("pretty/<int:nid>/delete/", pretty.pretty_delete),# 管理员管理path('admin/list/', admin.admin_list),path('admin/add/', admin.admin_add),path('admin/<int:nid>/edit/', admin.admin_edit),path('admin/<int:nid>/delete/', admin.admin_delete),path('admin/<int:nid>/reset/', admin.admin_reset),# 用户登录path('login/', account.login),path('logout/', account.logout),
]

3.在account.py中新增logout函数，用于实现用户注销登录功能。

account.py

def logout(request):"""用户注销"""# 清除sessionrequest.session.clear()return redirect("/login/")

效果：

129

6、图片验证码

为了使用户登录功能更加完善，加入图片验证码的功能，上面的内容大家已经可以看到图片验证码，并且代码已经在上面体现了，那接下来重要讲解一下图片验证码的实现思路。

在此之前我们先要认识一个库pillow：

①Pillow库

Pillow是一个Python图像处理库，它是Python Imaging Library (PIL) 的一个分支。Pillow提供了丰富的图像处理功能，可以进行图像的打开、保存、裁剪、调整大小、旋转、滤镜应用、颜色转换等操作。它支持多种常见的图像格式，包括JPEG、PNG、GIF、BMP等。

Pillow库易于安装和使用，并且在处理图像时提供了简洁而直观的API。它广泛应用于Web开发、数据分析、图像处理等领域，可以用来处理图像、生成缩略图、添加水印、图像识别等任务。

1.下载pillow

pip install pillow

2.验证码字体下载

验证码字体下载链接，点击此处下载

3.下载完之后，解压，并在utils目录下新建ttf目录，将字体文件复制到该目录下。

image-20240316002051306

效果：

image-20240316003141901

②图片验证码的实现

1.在urls.py中添加用户列表的路径image/code/，并告诉该路径指向的视图account.image_code

from django.urls import path
from api.views import depart, user, pretty, admin, accounturlpatterns = [# 部门管理path("depart/list/", depart.depart_list),path("depart/add/", depart.depart_add),path("depart/delete/", depart.depart_delete),path("depart/<int:nid>/edit/", depart.depart_edit),# 用户管理path("user/list/", user.user_list),path("user/add/", user.user_add),path("user/model/form/add/", user.user_model_form_add),path('user/<int:nid>/edit/', user.user_edit),path("user/<int:nid>/delete/", user.user_delete),# 靓号管理path("pretty/list/", pretty.pretty_list),path("pretty/add/", pretty.pretty_add),path("pretty/<int:nid>/edit/", pretty.pretty_edit),path("pretty/<int:nid>/delete/", pretty.pretty_delete),# 管理员管理path('admin/list/', admin.admin_list),path('admin/add/', admin.admin_add),path('admin/<int:nid>/edit/', admin.admin_edit),path('admin/<int:nid>/delete/', admin.admin_delete),path('admin/<int:nid>/reset/', admin.admin_reset),# 用户登录path('login/', account.login),path('logout/', account.logout),path('image/code/', account.image_code),
]

2.在utils目录下新建code.py文件，该文件用于生成验证码。

code.py

from PIL import Image, ImageDraw, ImageFilter, ImageFont
import randomdef check_code(width=120, height=30, char_length=5, font_file='api/utils/ttf/Monaco.ttf', font_size=28):code = []img = Image.new(mode='RGB', size=(width, height), color=(255, 255, 255))draw = ImageDraw.Draw(img, mode='RGB')def rndChar():"""生成随机字母:return:"""return chr(random.randint(65, 90))def rndColor():"""生成随机颜色:return:"""return (random.randint(0, 255), random.randint(10, 255), random.randint(64, 255))# 写文字font = ImageFont.truetype(font_file, font_size)for i in range(char_length):char = rndChar()code.append(char)h = random.randint(0, 4)draw.text([i * width / char_length, h], char, font=font, fill=rndColor())# 写干扰点for i in range(40):draw.point([random.randint(0, width), random.randint(0, height)], fill=rndColor())# 写干扰圆圈for i in range(40):draw.point([random.randint(0, width), random.randint(0, height)], fill=rndColor())x = random.randint(0, width)y = random.randint(0, height)draw.arc((x, y, x + 4, y + 4), 0, 90, fill=rndColor())# 画干扰线for i in range(5):x1 = random.randint(0, width)y1 = random.randint(0, height)x2 = random.randint(0, width)y2 = random.randint(0, height)draw.line((x1, y1, x2, y2), fill=rndColor())img = img.filter(ImageFilter.EDGE_ENHANCE_MORE)return img, ''.join(code)if __name__ == '__main__':img, code_str = check_code()print(code_str)with open('code.png', 'wb') as f:img.save(f, format='png')

3.修改account.py，在其中添加image_code函数，并导入code.py，以实现图片验证码的生成。

account.py

def image_code(request):"""图片验证码"""# 调用pillow函数，生成图片img, code_string = check_code()# 写入自己的sessionrequest.session['image_code'] = code_string# 设置60s超时request.session.set_expiry(60)# 将图片保存到内存里stream = BytesIO()img.save(stream, 'png')return HttpResponse(stream.getvalue())

效果：

image-20240316172949050

7、补充：图片验证码的作用和扩展

①作用

在用户登录时增加图片验证码的主要目的是提高网站的安全性，防止一些自动化程序或者恶意攻击。具体如下：

  • 防止暴力破解

  • 防止大量无效请求

  • 防止自动注册和垃圾评论

  • 提高用户体验

总的来说，图片验证码是一种简单而有效的安全措施，可以防止一些常见的攻击方式，提高网站的安全性和用户体验。虽然它并不是万能的，但它可以与其他安全措施（如密码复杂度要求、多因素身份验证等）结合使用，构建一个更加安全的登录系统。

②其他类型的验证码

  1. 文本验证码：通过纯文本的形式出现，通常是一些简单的问题或者算术题，用户需要填写正确的答案。

  2. 滑动验证码：用户需要按照提示拖动滑块到指定位置，通过人机交互的方式完成验证。

  3. 短信验证码：网站向用户的手机发送一个随机的验证码，用户需要将收到的验证码填写到网站上进行验证。

  4. 行为验证码：通过分析用户的行为模式（如鼠标轨迹、键盘输入速度等）来判断。

在实现了图片验证码后，我们还要实现验证码的校验，即判断用户输入的验证码与生成的验证码是否一样，增加了验证码校验之后，网站的安全性也会得到一定的提升。

8、验证码校验

到了这里我们的图片验证码和验证码校验都完成了，但是还可以做一个小的优化，就是点击图片刷新验证码，我们只需要在login.html文件中修改img行就可以。

<img src="/image/code/" alt="" id="image_code" onclick="this.setAttribute('src','/image/code/?random='+Math.random())">

怎么理解这行代码？

这行代码其实是一个HTML的<img>标签，它用于显示图像：

  • src="/image/code/"：指定了图像的来源路径为"/image/code/"，这里可能是一个服务器上的图像文件或者一个处理图像验证码的URL。
  • alt=""：指定了图像的替代文本，当图像无法加载时会显示该文本。
  • id="image_code"：为图像元素指定了一个唯一的标识符，可以在JavaScript中使用该标识符来操作该元素。
  • onclick="this.setAttribute('src','/image/code/?random='+Math.random())"：定义了一个点击事件处理函数，当图像被点击时，会执行这个函数。函数的作用是将图像的src属性设置为"/image/code/?random="加上一个随机数，这样可以强制浏览器重新加载图像，实现刷新验证码的效果。

总的来说，这行代码是在HTML中创建了一个图像元素，并定义了点击事件处理函数，用于刷新图像验证码。当图像被点击时，会通过设置src属性为一个新的URL来重新加载图像。

image-20240316004420420

最后整体效果：

128

在完成了部门管理、用户管理、靓号管理、管理员管理、用户登录等之后，我们这一部分的内容就暂时告一段落，接下来会学习ajax的内容，我们为什么要学习ajax，因为我们实现网页内容的动态更新和无刷新的用户交互可以用到它，它通过在后台与服务器进行数据交换，使网页能够在不刷新整个页面的情况下更新部分内容，这样系统的交互性会更好。

很感谢你能看到这里，如有相关疑问，还请下方评论留言。
Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊）
希望本篇内容能对大家有所帮助，如果大家喜欢的话，请动动手点个赞和关注吧，非常感谢你们的支持！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://xiahunao.cn/news/2869573.html

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

ideaSSM失物招领管理系统网页模式开发mysql数据库web结构java编程计算机网页源码maven项目

ideaSSM失物招领管理系统网页模式开发mysql数据库web结构java编程计算机网页源码maven项目

一、源码特点 idea ssm 失物招领管理系统是一套完善的完整信息管理系统&#xff0c;结合SSM框架完成本系统SpringMVC spring mybatis &#xff0c;对理解JSP java编程开发语言有帮助系统采用SSM框架&#xff08;MVC模式开发&#xff09;&#xff0c;系统具有完整的源代码和数…
阅读更多...
pytorch 入门基础知识二（Pytorch 02）

pytorch 入门基础知识二（Pytorch 02）

一 微积分 1.1 导数和微分 微分就是求导&#xff1a; %matplotlib inline import numpy as np from matplotlib_inline import backend_inline from d2l import torch as d2l def f(x):return 3 * x ** 2 - 4 * x 定义&#xff1a; 然后求 f(x) 在 x 1 时的导数&#xff…
阅读更多...
掌握人工智能：人工智能工程师必须了解的顶级编程语言

掌握人工智能：人工智能工程师必须了解的顶级编程语言

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
Linux-centos如何搭建yum源仓库

Linux-centos如何搭建yum源仓库

1.本地搭建&#xff08;无需连接外网&#xff09; 1.1检查网络配置&#xff0c;及网络连接 打开虚拟机&#xff0c;点击【编辑——虚拟网络编辑器】 点击【仅主机模式】查看子网段是否和局内IP匹配 进入局内&#xff0c;查看网络IP是否在你上述设置的网段内&#xff0c;如果不…
阅读更多...
Linux操作系统-汇编LED驱动程序基础

Linux操作系统-汇编LED驱动程序基础

一、汇编LED原理分析 IMX6ULL-LED灯硬件原理分析&#xff1a; 1、使能时钟&#xff0c;CCGR0-CCGR6这7个寄存器控制着IMX6ULL所有外设时钟的使能。为了简单&#xff0c;设置CCGR0-CCGR6这7个寄存器全部为0XFFFFFFFF&#xff0c;相当于使能全部外设时钟。&#xff08;在IMX6ULL芯…
阅读更多...
学习数据结构和算法的第16天

学习数据结构和算法的第16天

单链表的实现 链表的基本结构 #pragma once #include<stdio.h> #include<stlib.h> typedf int SLTDataType; typedy struct SListNode {SLTDataType data;struct SListNode*next; }SLTNode;void Slisprint(SLTNode*phead); void SListPushBack(SLTNode**pphead,S…
阅读更多...
SQLiteC/C++接口详细介绍之sqlite3类（十三）

SQLiteC/C++接口详细介绍之sqlite3类（十三）

返回目录&#xff1a;SQLite—免费开源数据库系列文章目录 上一篇&#xff1a;SQLiteC/C接口详细介绍之sqlite3类&#xff08;十二&#xff09; 下一篇&#xff1a;SQLiteC/C接口详细介绍之sqlite3类&#xff08;十四&#xff09;&#xff08;未发表&#xff09; 40.sqlite3…
阅读更多...
相机拍照与摄影学基础

相机拍照与摄影学基础

1.相机拍照 相机可能形状和大小不同&#xff0c;但基本功能相同&#xff0c;包括快门速度、光圈和感光度&#xff0c;这些是摄影的通用概念。即使是一次性相机也是基于这三个理念工作的。不同类型相机在这三个概念上的唯一区别是你可以控制这些功能的程度。这三个参数被称为相…
阅读更多...
HCIP—OSPF课后练习一

HCIP—OSPF课后练习一

本实验模拟了一个企业网络场景&#xff0c;R1、R2、R3为公司总部网络的路由器&#xff0c;R4、R5分别为企业分支机构1和分支机构2的路由器&#xff0c;并且都采用双上行方式与企业总部相连。整个网络都运行OSPF协议&#xff0c;R1、R2、R3之间的链路位于区域0&#xff0c;R4与R…
阅读更多...
计算机设计大赛 题目：基于大数据的用户画像分析系统 数据分析 开题

计算机设计大赛 题目：基于大数据的用户画像分析系统 数据分析 开题

文章目录 1 前言2 用户画像分析概述2.1 用户画像构建的相关技术2.2 标签体系2.3 标签优先级 3 实站 - 百货商场用户画像描述与价值分析3.1 数据格式3.2 数据预处理3.3 会员年龄构成3.4 订单占比 消费画像3.5 季度偏好画像3.6 会员用户画像与特征3.6.1 构建会员用户业务特征标签…
阅读更多...
波奇学Linux：线程安全和自选锁和读写锁

波奇学Linux：线程安全和自选锁和读写锁

STL不是线程安全的 单例模式的线程安全 自选锁&#xff1a;当线程申请锁失败时&#xff0c;不是挂起&#xff0c;而是一直申请 挂起等待锁 &#xff1a;当线程申请锁失败时&#xff0c;把锁挂起 一般临界区时间短的适合自选锁&#xff0c;长的适合挂起等待锁
阅读更多...
Linux系统——Session ID（负载均衡如何保持会话）

Linux系统——Session ID（负载均衡如何保持会话）

目录 一、实验环境搭建 二、部署Nginx代理服务器配置 三、部署后端真是服务器Tomcat配置 四、配置Tomcat的Session ID会话保持 五、测试 此次实验是Tomcat后端服务器如何做Session ID会话保持 一、实验环境搭建 [rootlocalhost ~]#systemctl stop firewalld [rootlocalho…
阅读更多...
Qt QTableWidget 实现行选中及行悬浮高亮

Qt QTableWidget 实现行选中及行悬浮高亮

表格整行的 selected、hover 高亮需求很常见&#xff0c;但使用 Qt 提供的开箱即用的方法根本无法实现这个需求&#xff08;至少在当前的时间节点是不行的&#xff09;&#xff1b;想要实现这个效果必须要费一点点力气&#xff0c;我们尽量选择较为简单的方法。 话不多说&…
阅读更多...
“import ... =“ 只能在 TypeScript 文件中使用

“import ... =“ 只能在 TypeScript 文件中使用

当你遇到这个问题很苦恼。 可以按照以下解决办法 使用ctrlshiftP 修改"javascript.validate.enable": false
阅读更多...
从大模型到Agentscope——分布式Multi-Agent应用开发与部署

从大模型到Agentscope——分布式Multi-Agent应用开发与部署

目录 Why需要分布式 案例 多进程的分布书版本能快速提升速度 分布式的挑战 AgentScope分布式解决 方案 实现RPC Agent 基于Actor模式的并行调度缺点&#xff1a;需要Agent内部决定消息传递目标 被调用的Agent立即返回占位符placeholder to_dist: 开启自动将单机进行扩展…
阅读更多...
android中单例模式为什么会引起内存泄漏？

android中单例模式为什么会引起内存泄漏？

单例模式使用不恰当会造成内存泄漏。因为单例的静态特性使得单例的生命周期和应用的生命周期一样长&#xff0c; 如果一个对象已经不需要使用了&#xff0c;但是单例对象还持有该对象的引用&#xff0c;那么这个对象就不能被正常回收&#xff0c;因此会导致内存泄漏。 举个例子…
阅读更多...
＜Linux＞ 线程的同步与互斥

＜Linux＞ 线程的同步与互斥

目录 前言&#xff1a; 一、资源共享问题 &#xff08;一&#xff09;多线程并发访问 &#xff08;二&#xff09;临界资源与临界区 &#xff08;三&#xff09;“锁” 是什么 二、多线程抢票场景 &#xff08;一&#xff09;并发抢票 &#xff08;二&#xff09;并发访…
阅读更多...
学习笔记--强化学习（1）

学习笔记--强化学习（1）

参考&#xff1a;https://blog.csdn.net/koulongxin123/article/details/122676149 1.什么是强化学习&#xff1f; (1)定义 基于环境的反馈而行动&#xff0c;通过不断与环境的交互、试错&#xff0c;最终完成特定目的或者使得整体行动收益最大化&#xff08;是一种通过与环境…
阅读更多...
YOLOv9改进策略：注意力机制 | SimAM（无参Attention），效果秒杀CBAM、SE

YOLOv9改进策略：注意力机制 | SimAM（无参Attention），效果秒杀CBAM、SE

&#x1f4a1;&#x1f4a1;&#x1f4a1;本文改进内容&#xff1a;SimAM是一种轻量级的自注意力机制&#xff0c;其网络结构与Transformer类似&#xff0c;但是在计算注意力权重时使用的是线性层而不是点积 yolov9-c-CoordAtt summary: 972 layers, 51024476 parameters, 510…
阅读更多...
L4 级自动驾驶汽车发展综述

L4 级自动驾驶汽车发展综述

摘要：为了减小交通事故概率、降低运营成本、提高运营效率，实现安全、环保的出行，自动驾驶 技术的发展已成为大势所趋，而搭配有L4 级自动驾驶系统的车辆是将车辆驾驶全部交给系统。据此，介绍了自动驾驶汽车的主流技术解决方案；分析了国内外L4 级自动驾驶汽车的已发布车型、…
阅读更多...
最新文章

Copyright @ 2022~2023