首页 > 其他 > 详细

BBS项目之登录功能

时间:2019-06-20 23:53:14      阅读:251      评论:0      收藏:0      [点我收藏+]

 

1.路由层添加一个登录的路由:

技术分享图片

2.视图层写login函数:

分析返回的login.html页面需要哪些字段,

用户名,密码,验证码,考虑到验证码刷新是局部刷新,采用ajax的方式提交数据到后端

技术分享图片

验证码那一行需要分成两段,左边是input标签,右边img标签

技术分享图片

 验证码的背景图片需要动态生成,而且图片上面要写字,字体样式也要导入,因此用到pillow模块

技术分享图片

图片的颜色需要随机变化,用random模块

技术分享图片

技术分享图片

然后生成画笔对象和字体对象,字体对象需要百度ttf下载一个字体然后放入本地,第二个参数表示字体高度,不超过图片高度

技术分享图片

采用for循环生成5个随机验证码(数字+小写字母+大写字母)

code = ‘‘ # 定义一个变量存储最终验证码
for i in range(5):
  random_int = str(random.randint(0,9))
  random_lower = chr(random.randint(97,122))
  random_upper = chr(random.randint(65,90))
  temp_code = random.choice([random_int,random_lower,random_upper])
# 将产生的字一个一个的写到图片上
  img_draw.text((60+i*45,0),temp_code,get_random(),img_font)  #位置,字体值,颜色,样式
# code记录
  code += temp_code
print(code)

request.session[‘code‘] = code

from io import BytesIO
# 能够帮你保存数据 并且在取的时候会以二进制的形式返回给你

# 生成io对象
io_obj = BytesIO()

#通过io对象保存图片对象

img_obj.save(io_obj,‘png‘)

#最后取出来返回

return HttpResponse(io_obj.getvalue())

验证码局部刷新,点击验证码那个图片就可以实现刷新功能

需要给img标签添加一个点击事件

$(‘#id_img‘).click(function () {
let oldPath = $(this).attr(‘src‘);
$(this).attr(‘src‘,oldPath += ‘?‘)
});

接下来是登录功能的操作

先前端ajax方式点击提交按钮的操作获取录入的信息:

技术分享图片

后端校验的时候先判断验证码是否一致(忽略大小写),然后通过auth模块生成对象

技术分享图片

如果验证码一致且user_obj存在说明输入无误,登录成功

技术分享图片

反之:

技术分享图片

技术分享图片

back_dic是记录编码和信息的一个字典,信息包含中文,因此返回需要用JsonResponse取消自动编码

技术分享图片

前端页面也需要根据返回的字典进行渲染

 技术分享图片

 

BBS项目之登录功能

原文:https://www.cnblogs.com/zhangdajin/p/11061846.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!