1.图片验证码第一步
# 导入绘图库
from PIL import ImageDraw, Image, ImageFont2.生成图片验证类
# 图片验证类
class ImgCode(BaseHandler):# 定义随机颜色实例方法def get_random_color(self):R = random.randrange(255)G = random.randrange(255)B = random.randrange(255)return (R, G, B)# 生成文件流验证码async def get(self):email = self.get_argument('email', None)if not email:self.finish({"msg": '缺少唯一标识', "errcode": 0})# 定义画布img_size = (120, 50)# 定义画笔image = Image.new("RGB", img_size, self.get_random_color())draw = ImageDraw.Draw(image, 'RGB')# 绘制来源字符串source = "0123456789"# 定义容器code_str = ""# 循环绘制for i in range(4):# 获取一种颜色text_color = self.get_random_color()# 获取随机字符串tmp_num = random.randrange(len(source))random_str = source[tmp_num]# 收集容器中code_str += random_str# 导入系统字体myfont = ImageFont.truetype("C:\\windows\\fonts\\arial.ttf", 20)# 绘制draw.text((10 + 30 * i, 20), random_str, text_color)# 存储图片对象self.application.redis.set(email, code_str)# 获取内存缓冲区buf = io.BytesIO()# 保存图片对象image.save(buf, "png")# 设置头部声明self.set_header("Content-Type", "image/png")# 返回return self.write(buf.getvalue())3.封装验证码
# 视图验证码验证
def check_imgcode(func):async def wrapper(self, *args, **kwargs):email = self.get_argument('email', None)image_code = self.get_argument('image_code', None)redis_code = self.application.redis.get(email)if redis_code != image_code:return self.finish({'msg': '验证码有误', 'errcode': 3})# 执行被装饰方法await func(self, *args, **kwargs)return wrapper4.调用封装方法
@check_imgcodeasync def post(self):pass
5.前端获取
<van-field v-if='isshow' v-model="img_code" placeholder="请输入验证码"><template #button><van-image :src="img" @click="getimg" class='imagecode' v-if='isshow' /> </template></van-field><br/><br/><van-button @click="create_img">生成图片验证码</van-button> export default {data() {return {// 设置表单数据 img:this.baseurl+'imgcode/',img_code:'',isshow:0,}},
}
getimg:function(){// 生成随机数var num =Math.ceil(Math.random()*10)// 添加随机数this.img = this.baseurl+'imgcode/'+"?email="+this.email+'&v='+num},create_img:function(){if(this.email==''){this.$toast.fail('邮箱不能为空')return}if(this.isshow==0){// 增加邮箱参数this.img = this.img +'?email='+this.email// 展示表单和图片验证码this.isshow=1}else{this.getimg()}}
