zdppy+vue3+onllyoffice开发文档管理系统实战 20240814上课笔记验证码功能的进一步优化

news2024/9/22 15:31:57

遗留问题

1、实现验证码的功能
2、要记录登录的Token和用户名，跳转到首页
3、注册功能
4、用户管理
5、角色管理
6、权限管理
7、分享功能

当前进度

目前我们已经封装了zdppy_captcha这个框架，这个框架是专门用来生成验证码的。

缺少一些功能：

1、如何通过接口的方法，能够拿到这个验证码
2、如何定制验证码图片的大小
3、如何校验验证码是否正确
4、将验证码生成base64字符串

下一步计划

1、如何通过接口的方法，能够拿到这个验证码
2、如何定制验证码图片的大小
3、如何校验验证码是否正确
4、将验证码生成base64字符串
5、要记录登录的Token和用户名，跳转到首页
6、注册功能
7、用户管理
8、角色管理
9、权限管理
10、分享功能

如何通过接口的方法，能够拿到这个验证码

想法1

将bytesio转换为base64字符串，往前端传递，前端通过src显示base64字符串。

要解决的问题：

1、怎么转base64？python自带了一个库
2、前端怎么渲染base64图片？有个js库能转回来

想法2

将bytesio以文件流的形式往前端传递，浏览器访问一个URL地址，直接得到验证码图片。

前端的src访问这个地址，能够直接渲染这张图片？

要解决的问题：

1、如何返回文件流？

Python将bytes转换为base64字符串

代码实现：

import random
import base64

from zdppy_captcha.image import ImageCaptcha

# 生成随机字符串
code = random.sample('abcdefghijklmnopqrstuvwxyz1234567890', 4)  # 随机选取4个不重复字符串，返回一个列表

# 生成图片验证码对象
image = ImageCaptcha()

# 第三种使用方式：生成图片验证码BytesIO
data = image.generate(code)
print(data, type(data))

# 转换为base
print(base64.b64encode(data.getvalue()).decode('utf8'))

测试地址：https://www.lddgo.net/convert/base64-to-image

测试结果：
在这里插入图片描述

封装为便捷的方法

目标就是通过调用一个函数，能够直接得到这个验证码的真实值，以及图片base64字符串。

这个真实值，可以用来缓存，在前端传递验证码过来的时候，用来比对，前端传递过来的验证码是否正确。

前端拿到的应该是base64字符串，它拿着这个字符串在页面中渲染，让用户根据验证码图片的内容，填写验证码，再将这个验证码发送到后端接口，进行比对。

最终，我们封装了如下方法：

import zdppy_captcha as captcha

# 获取验证码以及base64图片
code, img = captcha.get_base64(6)
print(code)
print(img)

这个方法支持如下参数：

def get_base64(width=160, height=60, num=4):
    """
    生成base64格式的随机字符串
    建议校验的时候不区分大小写
    :param width: 验证码图片的宽度
    :param height: 验证码图片的高度
    :param num: 字符串中验证码的个数
    :return: 真实值，base64图片字符串
    """