BBS登入頁面的設定 BBS專案（三）
阿新 • • 發佈：2022-03-17
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)
目錄
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)