BBS登录页面的设置
目录
- 登录页面搭建
- 验证码
- 点击刷新验证码
- 登录功能前后端
- 首页页面搭建
-
登录页面搭建
login.py "en"> "UTF-8">登录页面 "stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">class="container-fluid">class="row">class="col-md-4 col-md-offset-4">class="panel panel-primary" style="margin-top: 70px">class="panel-heading">class="panel-title">登录功能
class="panel-body">
-
验证码
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 "en"> "UTF-8">登录页面 "stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">class="container-fluid">class="row">class="col-md-4 col-md-offset-4">class="panel panel-primary" style="margin-top: 70px">class="panel-heading">class="panel-title">登录功能
class="panel-body">
后端
#登录 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)