<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " {% static 'js/jquery.min.js' %}" > </ script> < linkhref = " {% static 'bootstrap/css/bootstrap.min.css' %}" rel = " stylesheet" > < scriptsrc = " {% static 'bootstrap/js/bootstrap.min.js' %}" > </ script> < scriptsrc = " {% static 'layer/layer.js' %}" > </ script> < style> body { font-family : Arial, sans-serif; margin : 0; padding : 0; background-image : url ( 'https://pegasus.epweike.com/Public/uploads/introduce/55dc0c8c010df.jpg' ) ; background-size : cover; background-repeat : no-repeat; background-position : center; min-height : 100vh; display : flex; justify-content : center; align-items : center; } .container { background-color : rgba ( 255, 255, 255, 0.9) ; border-radius : 10px; box-shadow : 0px 0px 10px rgba ( 0, 0, 0, 0.1) ; padding : 20px; text-align : center; width : 100%; max-width : 600px; } h1 { margin-top : 0; } .form-group { margin-bottom : 20px; } label { display : block; font-weight : bold; } .form-control { width : 100%; padding : 10px; border : 1px solid #ccc; border-radius : 5px; } .btn { background-color : #007bff; color : #fff; padding : 10px 20px; border : none; border-radius : 5px; cursor : pointer; width : 100%; } .btn:hover { background-color : #0056b3; } </ style> </ head> < body> < divclass = " container" > < divclass = " row" > < divclass = " col-md-8 col-md-offset-2" > < h1class = " text-center" > </ h1> < divclass = " form-group" > < labelfor = " username" > </ label> < inputtype = " text" id = " username" class = " form-control" msg = " 用戶名必須填寫" > </ div> < divclass = " form-group" > < labelfor = " username" > </ label> < inputtype = " password" id = " password" class = " form-control" msg = " 密碼必須填寫" > </ div> < divclass = " form-group" > < labelfor = " username" > </ label> < inputtype = " password" id = " re_password" class = " form-control" msg = " 確認密碼必須填寫" > </ div> < divclass = " form-group" > < labelfor = " username" > </ label> < inputtype = " text" id = " email" class = " form-control" msg = " 郵箱必須填寫" > </ div> < divclass = " form-group" > < labelfor = " myfile" > < imgsrc = " /static/img/default.png" id = " myImg" width = " 100" alt = " " > </ label> < inputtype = " file" id = " myfile" style = " display : none" class = " form-control" > </ div> < divclass = " form-group" > < inputtype = " button" value = " 提交" class = " btn btn-primary btn-block" > </ div> </ div> </ div> </ div> < script> $ ( "#myfile" ) . change ( function ( ) { let myFileReaderObj = new FileReader ( ) ; { #var myFileDataObj = $ ( "#myfile" ) [ 0 ] . files[ 0 ] ; #} var myFileDataObj = $ ( this ) [ 0 ] . files[ 0 ] ; myFileReaderObj. readAsDataURL ( myFileDataObj) ; myFileReaderObj. onload = function ( ) { $ ( "#myImg" ) . attr ( 'src' , myFileReaderObj. result) ; } } ) ; $ ( ".btn" ) . click ( function ( ) { let username = $ ( "#username" ) . val ( ) ; let password = $ ( "#password" ) . val ( ) ; let re_password = $ ( "#re_password" ) . val ( ) ; let email = $ ( "#email" ) . val ( ) ; let myImg = $ ( "#myfile" ) [ 0 ] . files[ 0 ] ; console. log ( myImg) var ids = [ 'username' , 'password' , 're_password' , 'email' ] ; $. each ( ids, function ( index, value ) { if ( ! $ ( '#' + value) . val ( ) ) { layer. msg ( $ ( "#" + value) . attr ( 'msg' ) ) ; return ; } } ) ; if ( re_password !== password) { layer. msg ( '兩次密碼不一致' ) ; return ; } let formData = new FormData ( ) ; formData. append ( 'username' , username) ; formData. append ( 'password' , password) ; formData. append ( 're_password' , re_password) ; formData. append ( 'email' , email) ; formData. append ( 'myfile' , myImg) ; formData. append ( 'csrfmiddlewaretoken' , '{{ csrf_token }}' ) ; $. ajax ( { url : '' , type : 'post' , data : formData, contentType : false , processData : false , success : function ( res ) { if ( res. code === 200 ) { { #layer. msg ( res. msg, { 'icon' : 1 } , function ( ) { #} layer. msg ( res. msg, { } , function ( ) { location. href = res. url; } ) ; } else { layer. msg ( res. msg) ; } } , } ) ; } ) ;
</ script> </ body> </ html> def register ( request) : if request. method == 'POST' : back_dict = { 'code' : 200 , 'msg' : '注冊成功' , 'data' : [ ] } username = request. POST. get( 'username' ) password = request. POST. get( 'password' ) re_password = request. POST. get( 're_password' ) email = request. POST. get( 'email' ) myfile = request. FILES. get( 'myfile' ) if not username: back_dict[ 'code' ] = 1001 back_dict[ 'msg' ] = '用戶名必填' return JsonResponse( back_dict) if not password: back_dict[ 'code' ] = 1003 back_dict[ 'msg' ] = '密碼必填' return JsonResponse( back_dict) if not re_password: back_dict[ 'code' ] = 1004 back_dict[ 'msg' ] = '確認密碼必填' return JsonResponse( back_dict) if password != re_password: back_dict[ 'code' ] = 1002 back_dict[ 'msg' ] = '兩次密碼不一致' return JsonResponse( back_dict) if not email: back_dict[ 'code' ] = 1005 back_dict[ 'msg' ] = '郵箱必填' return JsonResponse( back_dict) new_pwd = get_md5( password) data_dict = { } data_dict[ 'username' ] = usernamedata_dict[ 'password' ] = new_pwd[ : 16 ] data_dict[ 'email' ] = emailif myfile: data_dict[ 'avatar' ] = myfilemodels. UserInfo. objects. create( ** data_dict) back_dict[ 'url' ] = '/login/' return JsonResponse( back_dict) return render( request, 'register.html' , locals ( ) )
from django. conf import settings
import hashlibdef get_md5 ( password) : m = hashlib. md5( ) pwd = password + settings. SECRET_KEYm. update( pwd. encode( 'utf8' ) ) return m. hexdigest( ) <! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " {% static 'js/jquery.min.js' %}" > </ script> < linkhref = " {% static 'bootstrap/css/bootstrap.min.css' %}" rel = " stylesheet" > < scriptsrc = " {% static 'bootstrap/js/bootstrap.min.js' %}" > </ script> < scriptsrc = " {% static 'layer/layer.js' %}" > </ script> < style> body { font-family : Arial, sans-serif; margin : 0; padding : 0; background-image : url ( 'https://pegasus.epweike.com/Public/uploads/introduce/55dc0c8c010df.jpg' ) ; background-size : cover; background-repeat : no-repeat; background-position : center; min-height : 100vh; display : flex; justify-content : center; align-items : center; } .container { background-color : rgba ( 255, 255, 255, 0.9) ; border-radius : 10px; box-shadow : 0px 0px 10px rgba ( 0, 0, 0, 0.1) ; padding : 20px; text-align : center; width : 100%; max-width : 600px; } h1 { margin-top : 0; } .form-group { margin-bottom : 20px; } label { display : block; font-weight : bold; } .form-control { width : 100%; padding : 10px; border : 1px solid #ccc; border-radius : 5px; } .btn { background-color : #007bff; color : #fff; padding : 10px 20px; border : none; border-radius : 5px; cursor : pointer; width : 100%; } .btn:hover { background-color : #0056b3; } </ style> </ head> < body> < divclass = " container" > < divclass = " row" > < divclass = " col-md-8 col-md-offset-2" > < h1class = " text-center" > </ h1> < divclass = " form-group" > < labelfor = " username" > </ label> < inputtype = " text" id = " username" class = " form-control" msg = " 用戶名必須填寫" > </ div> < divclass = " form-group" > < labelfor = " username" > </ label> < inputtype = " password" id = " password" class = " form-control" msg = " 密碼必須填寫" > </ div> < divclass = " form-group" > < labelfor = " username" > </ label> < divclass = " row" > < divclass = " col-md-6" > < inputtype = " text" id = " code" class = " form-control" msg = " 驗證碼必須填寫" > </ div> < divclass = " col-md-6" > < imgsrc = " /get_code/" style = " width: 160px; height: 35px;" alt = " " > </ div> </ div> </ div> < divclass = " form-group" > < inputtype = " button" value = " 提交" class = " btn btn-primary btn-block" > </ div> </ div> </ div> </ div> < script> $ ( ".btn" ) . click ( function ( ) { let username = $ ( "#username" ) . val ( ) ; let password = $ ( "#password" ) . val ( ) ; let code = $ ( "#code" ) . val ( ) ; var ids = [ 'username' , 'password' , 'code' ] ; $. each ( ids, function ( index, value ) { if ( ! $ ( '#' + value) . val ( ) ) { layer. msg ( $ ( "#" + value) . attr ( 'msg' ) ) ; return ; } } ) ; if ( code. length !== 5 ) { layer. msg ( '驗證碼輸入不正確' ) ; return ; } $. ajax ( { url : '' , type : 'post' , data : { username : username, password : password, code : code, csrfmiddlewaretoken : '{{ csrf_token }}' } , success : function ( res ) { if ( res. code === 200 ) { { #layer. msg ( res. msg, { 'icon' : 1 } , function ( ) { #} layer. msg ( res. msg, { } , function ( ) { location. href = res. url; } ) ; } else { layer. msg ( res. msg, { } ) ; } } , } ) ; } ) ;
</ script> </ body> </ html> def login ( request) : '''驗證碼：一般是圖片驗證碼，短信驗證碼(平臺)滑動驗證碼(平臺)驗證碼的作用：人機識別，防止爬蟲------->一般都需要登錄之后才能訪問:param request::return:''' if request. method == 'POST' : back_dict = { 'code' : 200 , 'msg' : '登錄成功,3s之后自動跳轉' , 'data' : [ ] } username = request. POST. get( 'username' ) password = request. POST. get( 'password' ) code = request. POST. get( 'code' ) if not username: back_dict[ 'code' ] = 1006 back_dict[ 'msg' ] = '用戶名必填' return JsonResponse( back_dict) if not password: back_dict[ 'code' ] = 1007 back_dict[ 'msg' ] = '密碼必填' return JsonResponse( back_dict) if code. upper( ) != request. session. get( 'code' ) . upper( ) : back_dict[ 'code' ] = 1008 back_dict[ 'msg' ] = '驗證碼必填' return JsonResponse( back_dict) new_pwd = get_md5( password) user_obj = models. UserInfo. objects. filter ( username= username, password= new_pwd[ : 16 ] ) . first( ) if not user_obj: back_dict[ 'code' ] = 1009 back_dict[ 'msg' ] = '用戶名或者密碼錯誤' return JsonResponse( back_dict) request. session[ 'username' ] = user_obj. usernamerequest. session[ 'id' ] = user_obj. pkback_dict[ 'url' ] = '/home/' return JsonResponse( back_dict) return render( request, 'login.html' , locals ( ) ) """
圖片相關的模塊pip3 install pillow
"""
from PIL import Image, ImageDraw, ImageFont"""
Image:生成圖片
ImageDraw:能夠在圖片上亂涂亂畫
ImageFont:控制字體樣式
"""
from io import BytesIO, StringIO"""
內存管理器模塊
BytesIO:臨時幫你存儲數據 返回的時候數據是二進制
StringIO:臨時幫你存儲數據 返回的時候數據是字符串
"""
import randomdef get_random ( ) : return random. randint( 0 , 255 ) , random. randint( 0 , 255 ) , random. randint( 0 , 255 ) def get_code ( request) : img_obj = Image. new( 'RGB' , ( 430 , 35 ) , get_random( ) ) img_draw = ImageDraw. Draw( img_obj) img_font = ImageFont. truetype( 'static/font/yun.ttf' , 30 ) code = '' for i in range ( 5 ) : random_upper = chr ( random. randint( 65 , 90 ) ) random_lower = chr ( random. randint( 97 , 122 ) ) random_int = str ( random. randint( 0 , 9 ) ) tmp = random. choice( [ random_lower, random_upper, random_int] ) """為什么一個個寫而不是生成好了之后再寫因為一個個寫能夠控制每個字體的間隙 而生成好之后再寫的話間隙就沒法控制了""" img_draw. text( ( i * 60 + 60 , - 2 ) , tmp, get_random( ) , img_font) code += tmpprint ( code) request. session[ 'code' ] = codeio_obj = BytesIO( ) img_obj. save( io_obj, 'png' ) return HttpResponse( io_obj. getvalue( ) )
<! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < title> </ title> < scriptsrc = " {% static 'js/jquery.min.js' %}" > </ script> < linkhref = " {% static 'bootstrap/css/bootstrap.min.css' %}" rel = " stylesheet" > < scriptsrc = " {% static 'bootstrap/js/bootstrap.min.js' %}" > </ script> < scriptsrc = " {% static 'layer/layer.js' %}" > </ script> </ head> < body> < navclass = " navbar navbar-inverse" > < divclass = " container-fluid" > < divclass = " navbar-header" > < buttontype = " button" class = " navbar-toggle collapsed" data-toggle = " collapse" data-target = " #bs-example-navbar-collapse-1" aria-expanded = " false" > < spanclass = " sr-only" > </ span> < spanclass = " icon-bar" > </ span> < spanclass = " icon-bar" > </ span> < spanclass = " icon-bar" > </ span> </ button> < aclass = " navbar-brand" href = " #" > </ a> </ div> < divclass = " collapse navbar-collapse" id = " bs-example-navbar-collapse-1" > < ulclass = " nav navbar-nav" > < liclass = " active" > < ahref = " #" > < spanclass = " sr-only" > </ span> </ a> </ li> < li> < ahref = " #" > </ a> </ li> < liclass = " dropdown" > < ahref = " #" class = " dropdown-toggle" data-toggle = " dropdown" role = " button" aria-haspopup = " true" aria-expanded = " false" > < spanclass = " caret" > </ span> </ a> < ulclass = " dropdown-menu" > < li> < ahref = " #" > </ a> </ li> < li> < ahref = " #" > </ a> </ li> < li> < ahref = " #" > </ a> </ li> < lirole = " separator" class = " divider" > </ li> < li> < ahref = " #" > </ a> </ li> < lirole = " separator" class = " divider" > </ li> < li> < ahref = " #" > </ a> </ li> </ ul> </ li> </ ul> < formclass = " navbar-form navbar-left" > < divclass = " form-group" > < inputtype = " text" class = " form-control" placeholder = " Search" > </ div> < buttontype = " submit" class = " btn btn-default" > </ button> </ form> < ulclass = " nav navbar-nav navbar-right" > < li> < ahref = " #" > </ a> </ li> < liclass = " dropdown" > < ahref = " #" class = " dropdown-toggle" data-toggle = " dropdown" role = " button" aria-haspopup = " true" aria-expanded = " false" > < spanclass = " caret" > </ span> </ a> < ulclass = " dropdown-menu" > < li> < ahref = " #" data-toggle = " modal" data-target = " .bs-example-modal-lg" > </ a> </ li> < li> < ahref = " #" > </ a> </ li> < li> < ahref = " /logout/" > </ a> </ li> < li> < ahref = " #" > </ a> </ li> </ ul> </ li> < li> < ahref = " /login/" > </ a> </ li> < li> < ahref = " /register/" > </ a> </ li> </ ul> < divclass = " modal fade bs-example-modal-lg" tabindex = " -1" role = " dialog" aria-labelledby = " myLargeModalLabel" > < divclass = " modal-dialog modal-lg" role = " document" > < divclass = " modal-content" > < divclass = " row" > < h1class = " text-center" > </ h1> < divclass = " col-md-8 col-md-offset-2" > < divclass = " form-group" > < inputtype = " text" readonly value = " {{ request.session.username }}" class = " form-control" > </ div> < divclass = " form-group" > < inputtype = " password" id = " old_password" class = " form-control" msg = " 原密碼必須輸入" > </ div> < divclass = " form-group" > < inputtype = " password" id = " new_password" class = " form-control" msg = " 原密碼必須輸入" > </ div> < divclass = " form-group" > < inputtype = " password" id = " re_password" class = " form-control" msg = " 原密碼必須輸入" > </ div> < divclass = " form-group" > < inputtype = " button" value = " 修改密碼" class = " btn btn-primary btn-block" > </ div> </ div> </ div> </ div> </ div> </ div> </ div> </ div> </ nav> < script> $ ( ".btn" ) . click ( function ( ) { let old_password = $ ( "#old_password" ) . val ( ) ; let new_password = $ ( "#new_password" ) . val ( ) ; let re_password = $ ( "#re_password" ) . val ( ) ; let ids = [ 'old_password' , 'new_password' , 're_password' ] ; $. each ( ids, function ( index, value ) { if ( ! $ ( '#' + value) . val ( ) ) { layer. msg ( $ ( '#' + value) . attr ( 'msg' ) ) ; return ; } } ) ; $. ajax ( { url : '/set_password/' , type : 'post' , data : { old_password : old_password, new_password : new_password, re_password : re_password, csrfmiddlewaretoken : '{{ csrf_token }}' } , success : function ( res ) { if ( res. code == 200 ) { layer. msg ( res. msg, { } , function ( ) { location. reload ( ) ; } ) ; } else { layer. msg ( res. msg, { } ) ; } } } ) ; } ) ;
</ script> </ body> </ html>
def set_password ( request) : if request. method == 'POST' : back_dict = { 'code' : 200 , 'msg' : '修改密碼成功，3s后自動跳轉' , 'data' : [ ] } old_password = request. POST. get( 'old_password' ) new_password = request. POST. get( 'new_password' ) re_password = request. POST. get( 're_password' ) if new_password != re_password: back_dict[ 'code' ] = 1200 back_dict[ 'msg' ] = '兩次密碼輸入不一致' return JsonResponse( back_dict) old_pwd = get_md5( old_password) user_obj = models. UserInfo. objects. filter ( username= request. session. get( 'username' ) , password= old_pwd[ : 16 ] ) . first( ) if not user_obj: back_dict[ 'code' ] = 1201 back_dict[ 'msg' ] = '原密碼不正確' return JsonResponse( back_dict) new_pwd = get_md5( new_password) print ( new_pwd) models. UserInfo. objects. filter ( pk= request. session. get( 'id' ) ) . update( password= new_pwd[ : 16 ] ) return JsonResponse( back_dict) 
-UI Styler中選擇組件或者實體后設置為工作組件)
