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, account

urlpatterns = [

    # 部门管理
    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, redirect


class 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, account

urlpatterns = [

    # 部门管理
    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):
    """用户注销"""

    # 清除session
    request.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, account

urlpatterns = [

    # 部门管理
    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 random

def 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()

    # 写入自己的session
    request.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://www.mfbz.cn/a/463062.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【机器学习-02】矩阵基础运算---numpy操作

【机器学习-02】矩阵基础运算---numpy操作

在机器学习-01中&#xff0c;我们介绍了关于机器学习的一般建模流程&#xff0c;并且在基本没有数学公式和代码的情况下&#xff0c;简单介绍了关于线性回归的一般实现形式。不过这只是在初学阶段、为了不增加基础概念理解难度所采取的方法&#xff0c;但所有的技术最终都是为了…
阅读更多...
【01】htmlcssgit

【01】htmlcssgit

01-前端干货-html&css 防脱发神器 一图胜千言 使用border-box控制尺寸更加直观，因此，很多网站都会加入下面的代码 * {margin: 0;padding: 0;box-sizing: border-box; }颜色的 alpha 通道 颜色的 alpha 通道标识了色彩的透明度，它是一个 0~1 之间的取值，0 标识完全…
阅读更多...
C语言之快速排序

C语言之快速排序

目录 一 简介 二 代码实现 快速排序基本原理&#xff1a; C语言实现快速排序的核心函数&#xff1a; 三 时空复杂度 A.时间复杂度 B.空间复杂度 C.总结&#xff1a; 一 简介 快速排序是一种高效的、基于分治策略的比较排序算法&#xff0c;由英国计算机科学家C.A.R. H…
阅读更多...
【Machine Learning】Suitable Learning Rate in Machine Learning

【Machine Learning】Suitable Learning Rate in Machine Learning

一、The cases of different learning rates: In the gradient descent algorithm model: is the learning rate of the demand, how to determine the learning rate, and what impact does it have if it is too large or too small? We will analyze it through the follow…
阅读更多...
HCIP—OSPF课后练习一

HCIP—OSPF课后练习一

本实验模拟了一个企业网络场景&#xff0c;R1、R2、R3为公司总部网络的路由器&#xff0c;R4、R5分别为企业分支机构1和分支机构2的路由器&#xff0c;并且都采用双上行方式与企业总部相连。整个网络都运行OSPF协议&#xff0c;R1、R2、R3之间的链路位于区域0&#xff0c;R4与R…
阅读更多...
Redis和Mysql的数据一致性问题

Redis和Mysql的数据一致性问题

在高并发的场景下&#xff0c;大量的请求直接访问Mysql很容易造成性能问题。所以我们都会用Redis来做数据的缓存&#xff0c;削减对数据库的请求的频率。 但是&#xff0c;Mysql和Redis是两种不同的数据库&#xff0c;如何保证不同数据库之间数据的一致性就非常关键了。 1、导…
阅读更多...
并查集Disjoint Set

并查集Disjoint Set

并查集的概念 并查集是一种简单的集合表示&#xff0c;它支持以下三种操作 1. make_set(x)&#xff0c;建立一个新集合&#xff0c;唯一的元素是x 2. find_set(x)&#xff0c;返回一个指针&#xff0c;该指针指向包含x的唯一集合的代表&#xff0c;也就是x的根节点 3. union_…
阅读更多...
Echo框架：高性能的Golang Web框架

Echo框架：高性能的Golang Web框架

Echo框架&#xff1a;高性能的Golang Web框架 在Golang的Web开发领域&#xff0c;选择一个适合的框架是构建高性能和可扩展应用程序的关键。Echo是一个备受推崇的Golang Web框架&#xff0c;以其简洁高效和强大功能而广受欢迎。本文将介绍Echo框架的基本特点、使用方式及其优势…
阅读更多...
学习shell脚本

学习shell脚本

文章目录 什么是shell脚本为什么要学习shell脚本第一个脚本编写与执行 简单的shell脚本练习简单案例脚本的执行方式差异(source、sh script、./script) 如何使用shell脚本的判断式利用test命令的测试功能利用判断符号[ ]shell脚本的默认变量($0、$1...) shell脚本的条件判断式利…
阅读更多...
MySQL安装(Mac系统)

MySQL安装(Mac系统)

首先要删除本机原有的mysql 停止MySQL服务 sudo /usr/local/mysql/support-files/mysql.server stop不放心可以使用以下命令查询并杀死进程 ps aux | grep mysqld sudo kill <PID>再次尝试停止服务 sudo /usr/local/mysql/support-files/mysql.server stop卸载MySQL&…
阅读更多...
多租户平台前端存储结构的选择

多租户平台前端存储结构的选择

下图来源于cookie、localStorage 和 sessionStorage的区别及应用实例 既然localstorage无有效期&#xff0c;关闭浏览器还存在&#xff0c;那么用来存储用户的身份信息并不是太合适&#xff0c;先看一下B站中localstorage都存在了啥&#xff0c;原来把我搜索的记录都存在了下来…
阅读更多...
第十二届蓝桥杯EDA省赛真题分析

第十二届蓝桥杯EDA省赛真题分析

前言&#xff1a; 第十二届蓝桥杯EDA比赛用的是AD软件&#xff0c;从第十四届起都是使用嘉立创EDA专业版&#xff0c;所以在这里我用嘉立创EDA专业版实现题目要求。 一、省赛第一套真题题目 主观题整套题目如下&#xff1a; 试题一&#xff1a;库文件设计&#xff08;5分&am…
阅读更多...
【类脑智能】脑网络通信模型分类及量化指标(附思维导图)

【类脑智能】脑网络通信模型分类及量化指标(附思维导图)

脑网络通信模型分类及量化指标(附思维导图) 参考论文&#xff1a;Brain network communication_ concepts, models and applications 概念 脑网络通信模型是一种使用图论和网络科学概念来描述和量化大脑结构中信息传递的模型。这种模型可以帮助研究人员理解神经信号在大脑内…
阅读更多...
P1881 绳子对折

P1881 绳子对折

题目描述 FJ 有一个长度为 L&#xff08;1≤L≤10,000&#xff09;的绳子。这个绳子上有 N&#xff08;1≤N≤100&#xff09;个结&#xff0c;包括两个端点。FJ 想将绳子对折&#xff0c;并使较短一边的绳子上的结与较长一边绳子上的结完全重合&#xff0c;如图所示&#xff…
阅读更多...
知名Web3投资基金a16z合伙人Jane Lippencott确认出席Hack.Summit() 2024区块链开发者大会

知名Web3投资基金a16z合伙人Jane Lippencott确认出席Hack.Summit() 2024区块链开发者大会

在区块链技术的风起云涌和Web3生态的蓬勃发展中&#xff0c;知名a16z Crypto的合伙人Jane Lippencott已确认出席即将于2024年4月9日至10日在香港数码港举行的Hack.Summit() 2024区块链开发者大会。作为亚洲首次举办的Hack.Summit()&#xff0c;此次大会将为全球区块链开发者及业…
阅读更多...
本地用AIGC生成图像与视频

本地用AIGC生成图像与视频

最近AI界最火的话题&#xff0c;当属Sora了。遗憾的是&#xff0c;Sora目前还没开源或提供模型下载&#xff0c;所以没法在本地跑起来。但是&#xff0c;业界有一些开源的图像与视频生成模型。虽然效果上还没那么惊艳&#xff0c;但还是值得我们体验与学习下的。 Stable Diffu…
阅读更多...
深度学习-基于机器学习的情绪分析研究

深度学习-基于机器学习的情绪分析研究

概要 互联网技术的迅速发展使得社交平台逐渐成为热点事件中社会情感的枢纽。社会热点事件的舆论监管的其中一个重要环节就是能够准确分析民众的社会情绪。本文旨在探索可以基于文本大数据彻底分析民众对热点事件的社会情绪的模型和方法。先是从社交平台上借助文本大数据、对数据…
阅读更多...
计算机网络 ｜内网穿透

计算机网络 ｜内网穿透

其实内网穿透&#xff0c;也挺好玩的&#xff0c;如果在大学的时候&#xff0c;那个时候讲计算机网络的老师能横向延展&#xff0c;估计课也会更有趣不少&#xff0c;本来计算机网络这门课就是计算机课程中可玩性最搞的。 只能说&#xff0c;怪可惜的 回到正题&#xff0c;内网…
阅读更多...
【Stable Diffusion】入门-04：不同模型分类+代表作品+常用下载网站+使用技巧

【Stable Diffusion】入门-04：不同模型分类+代表作品+常用下载网站+使用技巧

目录 1 模型简介2 模型文件构成和加载位置2.1 存储位置2.2 加载模型 3 模型下载渠道3.1 HuggingFace3.2 Civitai 4 模型分类4.1 二次元模型4.2 写实模型4.3 2.5D模型 1 模型简介 拿图片给模型训练的这个过程&#xff0c;通常被叫做“喂图”。模型学习的内容不仅包括对具体事物…
阅读更多...
数据结构的概念大合集03（栈）

数据结构的概念大合集03（栈）

概念大合集03 1、栈1.1 栈的定义和特点1.2 栈的基础操作1.3 栈的顺序存储1.3.1 顺序栈1.3.2 栈空&#xff0c;栈满&#xff0c;进栈&#xff0c;出栈的基本思想1.3.3 共享栈1.3.3.1 共享栈的4要素 1.4 栈的链式存储1.4.1 链栈的实现1.4.2 链栈的4个要素 1、栈 1.1 栈的定义和特…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站