博客园项目
day 1
基于ajax，PIL实现随机图片验证码 以及geetest插件实现滑动验证码 的登录功能。
1）生成随机验证码
怎么实现呢？
前端html代码
贴上代码
<div class="row"> <div class="col-md-6"> <label for="id_valid">验证码</label> <input type="text" class="form-control" id="id_valid" placeholder="验证码"> </div> <div class="col-md-6"> <img src="/get_valid_code/" width="250px" height="50px" alt=""> //<img src='//'>src跟一个视图函数，走这个函数，拿到一个图片，会将页面重新渲染。 </div> </div>
点击实现刷新
<script> $('img').click(function () { console.log($(this)); // console.log r.fn.init [img] console.log($(this)[0]); // console.log <img src="http://127.0.0.1:8000/get_valid_code/?" width="250px" height="50px" alt> $(this)[0].src+='?' .src方法是DOM对象的方法 }) </script>
视图函数
def get_valid_code(request): from PIL import Image,ImageDraw,ImageFont from io import BytesIO def get_color(): return (random.randint(0,255),random.randint(0,255),random.randint(0,255)) def get_char(): random_num=str(random.randint(0,9)) random_upper=chr(random.randint(65,90)) random_lower=chr(random.randint(97,122)) return random.choice([random_num,random_upper,random_lower]) height=50 width=250 image=Image.new(mode='RGB',size=(width,height),color=get_color()) print('image',image,type(image)) #image <PIL.Image.Image image mode=RGB size=250x50 at 0x1E20FE94BA8> <class 'PIL.Image.Image'> draw=ImageDraw.Draw(image,mode='RGB') print('draw',draw,type(draw)) #draw <PIL.ImageDraw.ImageDraw object at 0x000001E20FE94CF8> <class 'PIL.ImageDraw.ImageDraw'> font=ImageFont.truetype('app01/static/kumo.ttf',40) valid_code='' for i in range(6): char=get_char() valid_code+=char draw.text([i*40,5],char,get_color(),font=font) f=BytesIO() image.save(f,'png') data=f.getvalue() print('data',data,type(data)) #data b'\x89PNG\...' <class 'bytes'>
request.session["valid_code"]=valid_code #将验证码放在session中
return HttpResponse(data)
2)点击登录，触发ajax提交事件
前端代码
$('#id_login').click(function () { $.ajax({ url:'/login/', type:'post', data:{username:$('#id_username').val(), password:$('#id_password').val(), csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(), valid_code:$('#id_valid').val() }, success:function (data) { if (data.status){ location.href='/index/' } else{ $('#id_login').next().text(data.error_msg); setTimeout(function () { $('#id_login').next().text('') },1000) } } }) })
后端代码
def login(request): if request.is_ajax(): username=request.POST.get('username') password=request.POST.get('password') valid_code=request.POST.get('valid_code') valid_CODE=request.session.get('valid_CODE') print(valid_CODE,valid_code) data={'status':None,'error_msg':None} if valid_code.lower()==valid_CODE.lower(): user=auth.authenticate(username=username,password=password) #验证有没有用户用auth.authenticate方法 print(user) if user: data['status']=1 else: data['status']=0 data['error_msg']='用户名或密码不存在！' else: data['status']=0 data['error_msg']='验证码不正确！' return JsonResponse(data) return render(request,'login.html')
day2
1 图像上传
前端
html代码
PS label标签的妙用
将<img>标签放在label标签内。这样在点击img标签的时候，就会触发label标签的事件，找到for='xx'，在这里是找到<input type='file'>，会直接跳出其窗口。
’
<div class="form-group">
<label for="id_avator" class="col-sm-2 control-label">头像<img style="margin-left: 80px" width="50px" height="50px" class="pull-left" id='id_img_avator' src="/static/default.png"></label> <div class="col-sm-10"> <input type="file" class="form-control" id="id_avator" placeholder="" style="display:None"> </div> </div>
js代码
PS
FileReader():读取文件，从文件中读取数据和保存在js变量中。
参考知识网址：http://www.iunbug.com/archives/2012/06/04/220.html
用FileReader():从文件中读取数据，存储到JS变量中
<script> $('#id_avator').change(function () { //上传图片，change时间。 var file=$(this)[0].files[0]; var reader=new FileReader(); reader.readAsDataURL(file); reader.onload=function () { console.log(this); //FileReader {readyState: 2, result: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD…oJDI5wRnHrmsm6kX3/OlSprsZj1Fwy/SevrSpUqeMLD//2Q==", error: null, onloadstart: null, onprogress: null, …} console.log(typeof this); //object $('#id_img_avator').attr('src',this.result) } }) </script>
test：测试 file，reader，this.result到底是什么东西。
$('#id_avator').change(function () { var file=$(this)[0].files[0]; console.log(file); console.log(typeof file); var reader=new FileReader(); console.log(reader); console.log(typeof reader); reader.readAsDataURL(file); reader.onload=function () { console.log(this.result); $('#id_img_avator')[0].src=this.result} });
输出：
File(17989) {name: "th.jpg", lastModified: 1513684937519, lastModifiedDate: Tue Dec 19 2017 20:02:17 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 17989, …}
(index):116 object
(index):118 FileReader {readyState: 0, result: null, error: null, onloadstart: null, onprogress: null, …}
(index):119 object
(index):122 data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8...
2 $.each()方法
在js代码中
success:function (data) { if (data.user){ location.href='/index/' } else{ console.log(data.error_msg); $('span').text(''); $('.form-control').removeClass('has-error'); $.each(data.error_msg,function (i,j) { $('#id_'+i).next().addClass('pull-right').css('color','red').text(j[0]); if (i=='__all__'){ $('#id_re_password').next().addClass('pull-right').css('color','red').html(j[0]) } }) } }
data.error_msg是正宗的字典。
function（i，j） i 会取到key值，j会取到value值。value值是一个列表。
if i=='__all__'，判断全局钩子，密码与确认密码是否一致。
3
$('#id_register').click(function () { var formdate=new FormData(); formdate.append('username',$('#id_username').val()); formdate.append('password',$('#id_password').val()); formdate.append('re_password',$('#id_re_password').val()); formdate.append('email',$('#id_email').val()); formdate.append('valid_code',$('#id_valid_code').val()); formdate.append('file_img',$('#id_avator')[0].files[0]); formdate.append("csrfmiddlewaretoken",$("[name='csrfmiddlewaretoken']").val()); $.ajax({ url:'/register/', type:'post', processData:false, contentType:false, data:formdate,
$('#id_avator')[0].files[0]是一个DOM对象，文件内容。
需要将它发送给后端，用到了FormData类。
后端代码
接收FormData，都在request.POST中。
经过is_valid()方法处理完后，数据都在cleaned_data和errors中。
文件是一个特殊的存在，它的发送和取出都与其他不一样。
def register(request): if request.is_ajax(): formregister = FormRegister(request,request.POST) regResponse={'user':None,'error_msg':None} if formregister.is_valid(): username=formregister.cleaned_data.get('username') password=formregister.cleaned_data.get('password') re_password=formregister.cleaned_data.get('re_password') email=formregister.cleaned_data.get('email') file_img=request.FILES.get('file_img') print('file_img',file_img,type(file_img)) UserInfo.objects.create_user(username=username,password=password,email=email,avatar=file_img) regResponse['user']=1
输出：
file_img th.jpg <class 'django.core.files.uploadedfile.InMemoryUploadedFile'>
4 Form组件继承request
forms.py 视为view.py 服务的
在views.py中，视图函数
def xxx(request):
formreg=FormReg(request,request.POST):
在form.py中
class FormReg（forms.Form）
def__init__(request,*args,**kwargs)
super().__init__(*args,**kwargs)
self.request=request
username=forms.Charfileld(..)
....
这样 在form组件中，利用钩子可以去到保存在request.session中的验证码，可以在钩子里对验证码进行判定。
解决了一个什么问题呢？
form组件本身是单纯的帮助建立form表单的，除此之外好像并无别的高端用法。
但form组件本质上是class类，类可以继承，在__init__的时候可以传参。
so，form组件在views.py文件中实例化 的时候便可以传参，传各种需要的参数。
将request传给form类，实例化的对象拿到request.session中的验证码。
ajax提交，用户输入的验证码在request.POST中，经过is_valid(),在cleaned_data或者errors中。搞定！这样便可以验证了。
高端的用法！
