四、登录功能
前端页面html代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BBS论坛</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css"> <script src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-lg-4 col-md-offset-4 "> <h1 class="text-center">登录</h1> <hr> {% csrf_token %} <div class="form-group"> <label for="id_username">用户名</label> <input type="text" id="id_username" name="username" class="form-control"> </div> <div class="form-group"> <label for="id_password">密码</label> <input type="password" id="id_password" name="password" class="form-control"> </div> <div class="form-group"> <label for="id_code">验证码</label> <div class="row"> <div class="col-md-6"> <input type="text" class="form-control" id="id_code"> </div> <div class="col-md-6"> <img src="/get_code/" alt="" width="200" height="30" id="id_img"> </div> </div> </div> <button class="btn-success btn " id="id_button">登录</button> <span class="errors" style="color: red" id="id_error"></span> </div> </div> </div> <script> $('#id_img').click(function () { // 获取图片src旧的路径 let oldPath = $(this).attr('src'); // 修改图片的src属性 $(this).attr('src',oldPath += '?') }); // ajax发送数据 $('#id_button').click(function () { $.ajax({ url:'', type:'post', data:{ 'username':$('#id_username').val(), 'password':$('#id_password').val(), 'code':$('#id_code').val(), // 'csrfmiddlewaretoken':$('[name="csrfmiddlewaretoken"]').val(), 'csrfmiddlewaretoken':'{{ csrf_token }}', }, success:function (data) { if(data.code === 100){ location.href = data.url }else{ $('#id_error').html(data.msg) } } }) }) </script> </body> </html>
后端逻辑代码：
def get_code(requst): img_obj = Image.new('RGB', (310, 35), get_random()) # 生成一个画笔对象 img_draw = ImageDraw.Draw(img_obj) # 生成一个字体对象 img_font = ImageFont.truetype('static/font/akbar.ttf', 35) # 随机验证码：由数字、小写字母、大写字母 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 * 30, 0), temp_code, get_random(), img_font) # code记录 code += temp_code print(code) # 将code存放到session requst.session['code'] = code # 生成io对象 io_obj = BytesIO() # 图片模糊 # img_obj = img_obj.filter(ImaggeFilter.BLUR) img_obj.save(io_obj, 'png') return HttpResponse(io_obj.getvalue())
def login(request): back_dic = {'code': 100, 'msg': ''} if request.method == 'POST': username = request.POST.get('username') password = request.POST.get('password') code = request.POST.get('code') # 先校验验证码（可以区分大小写，也可以不区分） if request.session.get('code').upper() == code.upper(): user_obj = auth.authenticate(username=username, password=password) if user_obj: # 登录成功，记录当前用户状态 auth.login(request, user_obj) back_dic['msg'] = '登录成功！' back_dic['url'] = '/home/' else: back_dic['code'] = 102 back_dic['msg'] = '用户名或密码错误！' else: back_dic['code'] = 103 back_dic['msg'] = '验证码错误！' return JsonResponse(back_dic) return render(request, 'login.html')
有可能会有更新......