<! 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) 
