BBS项目之登陆功能

 

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取消自动编码

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