登陆功能
需要有登录用户名，密码，动态生成验证码和提交按钮，具体效果如下：
需要先了解的知识点：
- 1.img标签的src属性可以放以下三种：
- 1.图片路径
- 2.url
- 3.图片的二进制数据
- 2.我们的计算机上面致所有能够输出各式各样的字体样式
- 内部其实对应的是一个个.ttf结尾的文件,免费的ttf字体样式可以去下面这个网址下载使用。
- http://www.zhaozi.cn/ai/2019/fontlist.php?ph=1&classid=32&softsq=%E5%85%8D%E8%B4%B9%E5%95%86%E7%94%A8
- 3.介绍一下新的图片相关的模块
- 先安装
- pip3 install pillow
- 再导入
- from PIL import Image,ImageDraw,ImageFont
- Image:生成图片用的
- ImageDraw:能够在图片上乱涂乱画
- ImageFont:控制字体样式
- 4.内存管理器模块
- from io import BytesIO,StringIO
- BytesIO:临时帮你存储数据 返回的时候数据是二进制
- StringIO:临时帮你存储数据 返回的时候数据是字符串
- import random
- from PIL import Image,ImageDraw,ImageFont
- from io import BytesIO,StringIO
- def get_random():
- return random.randint(0,255),random.randint(0,255),random.randint(0,255)
- def get_code(request):
- # 推导步骤1:直接获取后端现成的图片二进制数据发送给前端
- # with open(r'static/img/111.jpg','rb') as f:
- # data = f.read()
- # return HttpResponse(data)
- # 推导步骤2:利用pillow模块动态产生图片
- # img_obj = Image.new('RGB',(430,35),'green')
- # img_obj = Image.new('RGB',(430,35),get_random())
- # # 先将图片对象保存起来
- # with open('xxx.png','wb') as f:
- # img_obj.save(f,'png')
- # # 再将图片对象读取出来
- # with open('xxx.png','rb') as f:
- # data = f.read()
- # return HttpResponse(data)
- # 推导步骤3:文件存储繁琐IO操作效率低 借助于内存管理器模块
- # img_obj = Image.new('RGB', (430, 35), get_random())
- # io_obj = BytesIO() # 生成一个内存管理器对象 你可以看成是文件句柄
- # img_obj.save(io_obj,'png')
- # return HttpResponse(io_obj.getvalue()) # 从内存管理器中读取二进制的图片数据返回给前端
- # 最终步骤4:写图片验证码
- img_obj = Image.new('RGB', (430, 35), get_random())
- img_draw = ImageDraw.Draw(img_obj) # 产生一个画笔对象
- img_font = ImageFont.truetype('static/font/222.ttf',30) # 字体样式 大小
- # 随机验证码 五位数的随机验证码 数字 小写字母 大写字母
- code = ''
- for i in range(5):
- random_upper = chr(random.randint(65,90))
- random_lower = chr(random.randint(97,122))
- random_int = str(random.randint(0,9))
- # 从上面三个里面随机选择一个
- tmp = random.choice([random_lower,random_upper,random_int])
- # 将产生的随机字符串写入到图片上
- """
- 为什么一个个写而不是生成好了之后再写
- 因为一个个写能够控制每个字体的间隙 而生成好之后再写的话
- 间隙就没法控制了
- """
- img_draw.text((i*60+60,-2),tmp,get_random(),img_font)
- # 拼接随机字符串
- code += tmp
- print(code)
- # 随机验证码在登陆的视图函数里面需要用到 要比对 所以要找地方存起来并且其他视图函数也能拿到
- request.session['code'] = code
- io_obj = BytesIO()
- img_obj.save(io_obj,'png')
- return HttpResponse(io_obj.getvalue())
- <body>
-
-
-
- <h1 >登录</h1>
- <label for="id_username">用户名</label>
- <input type="text" id="id_username">
- <label for="id_password">密码</label>
- <input type="password" id="id_password">
-
-
- <label for="">验证码</label>
-
-
- <input type="text" >
-
-
- {# 这里img标签的src属性放的是一个url，访问页面时，会自动向这个地址请求拿到图片数据#}
- <img src="https://www.cnblogs.com/get_code" alt="" width="350" height="35" id="commit">
-
-
-
- <input type="button" value="登录">
-
-
- </body>
|
