Django开发 员工管理系统：图片验证码：Pillow实现（初学，第三天）（5）-CSDN博客文章浏览阅读170次。Django开发 员工管理系统：图片验证码：Pillow实现（初学，第三天）（5）https://blog.csdn.net/m0_65788436/article/details/145821437?fromshare=blogdetail&sharetype=blogdetail&sharerId=145821437&sharerefer=PC&sharesource=m0_65788436&sharefrom=from_link通过上节课的学习，我借助deepseek工具，用新方法实现图片验证码

1.安装 django-simple-captcha

2.配置 django-simple-captcha 

运行迁移命令以创建验证码所需的数据库表：

python manage.py migrate

数据库中新增了数据表

3. 修改 LoginForm 表单

4.修改 login.html 模板

<style>
        .account {
            width: 90%;
            max-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;
        }

        /* 调整验证码容器 */
        .captcha-container {
            display: flex;           /* 使用 flex 布局 */
            align-items: center;     /* 垂直居中 */
            gap: 10px;              /* 输入框和图片间距 */
        }

        /* 调整输入框 */
        .captcha-container input[type="text"] {
            width: 150px !important; /* 输入框宽度 */
            flex-shrink: 0;          /* 防止输入框被压缩 */
            order: 1;               /* 输入框放在左边 */
        }

        /* 调整图片 */
        .captcha-container img {
            height: 40px;           /* 图片高度 */
            border-radius: 4px;     /* 圆角 */
            box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 阴影 */
            cursor: pointer;        /* 鼠标指针 */
            order: 2;              /* 图片放在右边 */
        }


    </style>

<!-- 验证码部分 -->
        <div class="mb-3">
            <label class="form-label" for="id_captcha">验证码</label>
            <div class="captcha-container">  <!-- 容器 -->
                {{ form.captcha }}  <!-- 渲染整个 captcha 字段 -->
            </div>
            <span class="text-danger">{{ form.captcha.errors.0 }}</span>
        </div>

5. 修改 login 视图

在 login 视图中，移除自定义验证码的校验逻辑，因为 django-simple-captcha 会自动处理验证码的校验。

6.修改中间件

最最最最重要的一步，如果你编写了中间件，一定要把captcha设置为白名单，且是以captcha开头的都设置为白名单，否则不会显示出图片！！！

7.编写样式（可选）

在setting.py文件中，加入下面的

高级主题 — Django Simple Captcha 0.6.1 文档

# 验证码默认样式
CAPTCHA_IMAGE_SIZE = (150, 50)  # 图片尺寸
CAPTCHA_LENGTH = 6  # 字符数
CAPTCHA_FONT_SIZE = 30  # 字体大小
CAPTCHA_BACKGROUND_COLOR = '#FFFFFF'  # 背景色
CAPTCHA_FOREGROUND_COLOR = '#000000'  # 文字颜色

# # 高级样式
# # 噪点 + 旋转字符
# CAPTCHA_NOISE_FUNCTIONS = (
#     'captcha.helpers.noise_dots',  # 添加噪点
# )
# CAPTCHA_LETTER_ROTATION = (-30, 30)  # 字符旋转角度范围

# # 数学公式挑战
# CAPTCHA_CHALLENGE_FUNCT = 'captcha.helpers.math_challenge'  # 使用数学公式作为挑战
#
# # 字体选择
# CAPTCHA_FONT_PATH = 'path/to/custom/font.ttf'  # 自定义字体路径

效果