BBS登录页面的设置
BBS项目（三）
目录
login.py <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录页面</title> <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"> <script src="/static/jquery-3.3.1.js"></script> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-4 col-md-offset-4"> <div class="panel panel-primary" style="margin-top: 70px"> <div class="panel-heading"> <h3 class="panel-title">登录功能</h3> </div> <div class="panel-body"> <form id="my_form"> {% csrf_token %} <div class="form-group"> <label for="">用户名</label> <input type="text" id="id_username" class="form-control"> <span class="danger pull-right error"></span> </div> <div class="form-group"> <label for="">密码</label> <input type="password" id="id_password" class="form-control"> <span class="danger pull-right error"></span> </div> <div class="form-group"> <label for="">验证码</label> <div class="row"> <div class="col-md-6"> <input type="text" id="id_code" class="form-control"> </div> <div class="col-md-6"> <img src="/get_code/" alt="" height="35px" width="250px" id="id_img"> </div> </div> </div> <div class="text-center"> <input type="button" value="登录" class="btn btn-warning" id="id_submit"><span class="danger error" id="id_error" style="margin-left: 10px"></span> </div> </form> </div> </div> </div> </div> </div> </body> <script> $('#id_img').click(function () { let img_url = $('#id_img')[0].src $('#id_img')[0].src = img_url + '?' }) $('#id_submit').click(function () { $.ajax({ url: '/login/', method: 'post', data: { username: $('#id_username').val(), password: $('#id_password').val(), code: $('#id_code').val(), csrfmiddlewaretoken:'{{ csrf_token }}' }, success:function (data) { if(data.status==100){ //location.href='/index/' location.href=data.url }else{ $('#id_error').html(data.msg) } } }) }) </script> </html>
views.py
生成验证码的模块：https://www.jb51.net/article/153863.html 集成第三方，极验滑动验证，腾讯验证码（sdk） 手写验证码 '''手写验证码模板''' def get_code(request): # 第一种方案 # with open('./avatar/1.jpg','rb') as f: # res=f.read() # return HttpResponse(res) # 第二种：自己生成图片 pillow 图片处理模块 # img=Image.new('RGB',(300,30),(100,0,0)) # with open('code.png','wb') as f: # img.save(f) # # with open('./code.png','rb') as f: # res=f.read() # return HttpResponse(res) # 第三步：在图片上写文字 # img=Image.new('RGB',(300,30),(100,0,0)) # # #拿到一个画板对象，把图片放到画板上 # img_draw=ImageDraw.Draw(img) # #在画板上写文字 # img_draw.text((0,0),'python') # with open('code.png','wb') as f: # img.save(f) # # with open('./code.png','rb') as f: # res=f.read() # return HttpResponse(res) # 第四步 # img=Image.new('RGB',(300,30),(100,0,0)) # # #拿到一个画板对象，把图片放到画板上 # img_draw=ImageDraw.Draw(img) # #在画板上写文字 # img_draw.text((0,0),'lqz') # # bytes_io=BytesIO() # img.save(bytes_io,'png') #写到内存中,需要传format，图片格式 # return HttpResponse(bytes_io.getvalue()) #把内容读出来 # 第五步 # img = Image.new('RGB', (300, 30), (100, 0, 0)) # # 第一个参数，是文字格式的文件，ttf格式，第二个参数是文字大小 # img_font=ImageFont.truetype('./static/font/xgdl.ttf',20) # # 拿到一个画板对象，把图片放到画板上，指定写的字的字体是什么 # img_draw = ImageDraw.Draw(img) # # 在画板上写文字 # img_draw.text((0, 0), '12384dasasfd',font=img_font) # # # # # bytes_io = BytesIO() # img.save(bytes_io, 'png') # 写到内存中,需要传format，图片格式 # return HttpResponse(bytes_io.getvalue()) # 把内容读出来 # 最终方案 # img = Image.new('RGB', (300, 30), get_random()) img = Image.new('RGB', (250, 30), (250, 250, 250)) # 第一个参数，是文字格式的文件，ttf格式，第二个参数是文字大小 img_font = ImageFont.truetype('./static/font/ss.TTF', 20) # 拿到一个画板对象，把图片放到画板上，指定写的字的字体是什么 img_draw = ImageDraw.Draw(img) # 在画板上写文字 # 随机生成5位 小写字母，大写字母，和数字 code = '' for i in range(5): low_char = chr(random.randint(97, 122)) up_char = chr(random.randint(65, 90)) number_char = str(random.randint(0, 9)) res = random.choice([low_char, up_char, number_char]) code += res img_draw.text((20 + i * 40, 0), res, fill=get_random(), font=img_font) print(code) request.session['code'] = code # 画点和线 # 画线和点圈 width = 250 height = 30 for i in range(5): x1 = random.randint(0, width) x2 = random.randint(0, width) y1 = random.randint(0, height) y2 = random.randint(0, height) # 在图片上画线 img_draw.line((x1, y1, x2, y2), fill=get_random()) for i in range(20): # 画点 img_draw.point([random.randint(0, width), random.randint(0, height)], fill=get_random()) x = random.randint(0, width) y = random.randint(0, height) # 画弧形 img_draw.arc((x, y, x + 4, y + 4), 0, 90, fill=get_random()) bytes_io = BytesIO() img.save(bytes_io, 'png') # 写到内存中,需要传format，图片格式 return HttpResponse(bytes_io.getvalue()) # 把内容读出来
login.py $('#id_img').click(function () { let img_url = $('#id_img')[0].src $('#id_img')[0].src = img_url + '?' })
-
登录功能前后端
-
前端
login.py <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录页面</title> <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"> <script src="/static/jquery-3.3.1.js"></script> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-4 col-md-offset-4"> <div class="panel panel-primary" style="margin-top: 70px"> <div class="panel-heading"> <h3 class="panel-title">登录功能</h3> </div> <div class="panel-body"> <form id="my_form"> {% csrf_token %} <div class="form-group"> <label for="">用户名</label> <input type="text" id="id_username" class="form-control"> <span class="danger pull-right error"></span> </div> <div class="form-group"> <label for="">密码</label> <input type="password" id="id_password" class="form-control"> <span class="danger pull-right error"></span> </div> <div class="form-group"> <label for="">验证码</label> <div class="row"> <div class="col-md-6"> <input type="text" id="id_code" class="form-control"> </div> <div class="col-md-6"> <img src="/get_code/" alt="" height="35px" width="250px" id="id_img"> </div> </div> </div> {#提交使用form表单 类型要写成button 如果是submit的话会触发表单提交#} <div class="text-center"> <input type="button" value="登录" class="btn btn-warning" id="id_submit"><span class="danger error" id="id_error" style="margin-left: 10px"></span> </div> </form> </div> </div> </div> </div> </div> </body> <script> $('#id_img').click(function () { let img_url = $('#id_img')[0].src $('#id_img')[0].src = img_url + '?' }) $('#id_submit').click(function () { $.ajax({ url: '/login/', method: 'post', data: { username: $('#id_username').val(), password: $('#id_password').val(), code: $('#id_code').val(), csrfmiddlewaretoken:'{{ csrf_token }}' }, success:function (data) { if(data.status==100){ //location.href='/index/' location.href=data.url }else{ $('#id_error').html(data.msg) } } }) }) </script> </html>
后端
#登录 def login(request): if request.method == 'GET': return render(request, 'login.html') else: response = {'status': 100, 'msg': None} username = request.POST.get('username') password = request.POST.get('password') code = request.POST.get('code') if code.upper() == request.session.get('code').upper(): user = authenticate(username=username, password=password) if user: auth.login(request, user) response['msg'] = '登录成功' response['url'] = '/index/' else: response['status'] = 102 response['msg'] = '用户名或密码错误' else: response['status'] = 101 response['msg'] = '验证码错误' return JsonResponse(response)
浙公网安备 33010602011771号