利用Ajax完成手撸获取验证码、校验功能
# 登录功能1、自己手动搭建获取用户名、密码、验证码前端标签代码
2、图片验证码如何自己完成
ps:
img标签src属性后谜案可以写的内容
1、直接写网络图片地址
2、仅仅一个url 后缀（自动朝该url发送get请求获取数据）
3、图片二进制
1、需要借助pillow模块
Image、ImageDraw、ImageFont
2、需要借助于内存管理器io模块
BytesIo,StringIo
3、字体的样式其实是受.ttf结尾的文件控制的
4、需要手动产生随机验证码(搜狗的笔试题)
random模块方法
chr内置方法
保存在session中的验证码
5、验证码的校验
[前端代码]
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="text-center">登录</h1>
<div class="form-group">
<label for="username">用户名</label>
<input type="text" name="username" id="username" class="form-control">
</div>
<div class="form-group">
<label for="passowrd"></label>
<input type="password" name="password" id="password" class="form-control">
</div>
<div class="form-group">
<label for="">验证码</label>
<div class="row">
<div class="col-md-6 ">
<input type="text" name="code" id="id-code" class="form-control">
</div>
<div class="col-md-6">
<img src="/get_code/" alt="" width="380" height="35" id="id_img">
</div>
</div>
</div>
<input type="button" class="btn btn-success" value="登录" id="login">
<span style="color: red" id="error"></span>
</div>
</div>
</div>
<script>
// 实时获取验证码
$('#id_img').click(function (){
// 先获取到标签的src
let img_obj = $(this).attr('src');
// 在src后面加任意字符
$(this).attr('src',img_obj+='?')
})
//像狗段发送ajax请求，并处理返回结果
$('#login').click(function (){
$.ajax({
url:'',
type:'post',
data:{
'username':$('#username').val(),
'password':$('#password').val(),
'code':$('#id-code').val(),
// 自己结合自己需求 合理选择
'csrfmiddlewaretoken':'{{ csrf_token }}'
},
success:function (args){
if(args.code==1000){
window.location.href =args.url
}else{
// 渲染错误信息
$('#error').text(args.msg)
}
}
})
})
</script>
[后端代码def login(request):
if request.method == 'POST':# 可以用request.ajax方法
back_dic = {'code': 1000, 'msg': ''} # 注意用ajax方法一定要定义一个全局标志位
username = request.POST.get('username')
password = request.POST.get('password')
code = request.POST.get('code')
# 1 先校验验证码是否正确 自己决定是否忽略 统一转大写或者小写再比较
if request.session.get('code').upper() == code.upper(): # 后端代码发送给session，从session中获取验证码比对
user_obj = auth.authenticate(request, username=username, password=password)
if user_obj:
# 保存用户登录状态
auth.login(request,user_obj)
back_dic['url'] = '/home/'
else:
back_dic['code'] = 2000
back_dic['msg'] = '用户名或密码错误'
else:
back_dic['code'] = 3000
back_dic['msg'] = '验证码错误'
return JsonResponse(back_dic)
return render(request, 'login.html')
页:
[1]