BBS论坛 登录功能
四、登录功能
前端页面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> login.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_codeprint(code)# 将code存放到sessionrequst.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())get_code 获取验证码
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'] = 102back_dic['msg'] = '用户名或密码错误！'else:back_dic['code'] = 103back_dic['msg'] = '验证码错误！'return JsonResponse(back_dic)return render(request, 'login.html')login 视图函数
有可能会有更新......
转载于:https://www.cnblogs.com/xt12321/p/11079597.html
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！