myforms.py(注册部分form组件)
from django import forms from django.forms import widgets from django.core.exceptions import ValidationError from blog import models class RegForm(forms.Form): username = forms.CharField(max_length=18, min_length=2, label='用户名', widget=widgets.TextInput(attrs={'class': 'form-control'}) ) password = forms.CharField(max_length=18, min_length=2, label='密码', widget=widgets.PasswordInput(attrs={'class': 'form-control'})) re_password = forms.CharField(max_length=18, min_length=2, label='确认密码', widget=widgets.PasswordInput(attrs={'class': 'form-control'})) email = forms.EmailField(label='邮箱', widget=widgets.TextInput(attrs={'class': 'form-control'})) # 局部校验钩子函数 def clean_username(self): name = self.cleaned_data.get('username') # 去数据库校验 ret = models.UserInfo.objects.filter(username=name).first() if ret: raise ValidationError('用户名已存在') return name # 全局校验钩子函数 def clean(self): pwd = self.cleaned_data.get('password') re_pwd = self.cleaned_data.get('re_password') if pwd and re_pwd: if pwd == re_pwd: return self.cleaned_data else: raise ValidationError('两次密码不一致')
视图层
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"> <script src="/static/jquery-3.3.1.js"></script> <title>注册</title> <style> {# 把文件空间隐藏#} #my_file{ display: none; } </style> {# <script>#} {# //等文档加载完毕之后,再进行操作#} {# window.onload = function () {#} {# //$("#id_name").val('lqz')#} {# }#} {##} {# </script>#} </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <h1>注册</h1> <form id="form"> {% csrf_token %} {% for foo in my_form %} <div class="form-group"> <label for="{{ foo.auto_id }}">{{ foo.label }}</label> {{ foo }} </div> {% endfor %} {# 加一个上传文件的控件#} <div class="form-group"> <label for="my_file">头像 <img src="/static/img/default.png" id="img_file" alt="" width="80" height="80" style="margin-left: 10px"> </label> <input type="file" id="my_file"> </div> <input type="button" value="注册" class="btn btn-primary " id="btn"><span class="error"></span> </form> </div> </div> </div> </body> <script> //这个控件值发生变化的事件 $("#my_file").change(function () { //alert(111) //先取出文件(图片) var file_obj = $("#my_file")[0].files[0]; //通过文件阅读器,把图片放到img标签上 //生成一个文件阅读器对象 var filereader = new FileReader() //把图片对象,读到filereader对象中 filereader.readAsDataURL(file_obj) //filereader.result 这是filereader对象的值 //把文件对象渲染到img标签上(这样不行.需要加载完成才能操作) {#$("#img_file").attr('src', filereader.result)#} {#alert(1)#} //等加载完成,在操作 filereader.onload=function () { $("#img_file").attr('src', filereader.result) } }) $("#btn").click(function () { //因为要上传文件,生成formdata对象 var formdata=new FormData() /*第一种方式 formdata.append('name',$("#id_name").val()) formdata.append('pwd',$("#id_pwd").val()) formdata.append('re_pwd',$("#id_re_pwd").val()) formdata.append('email',$("#id_email").val()) formdata.append('csrfmiddlewaretoken',$('[name="csrfmiddlewaretoken"]').val()) //把文件放到formdata中 formdata.append('my_file',$('#my_file')[0].files[0]) */ //$("#form").serializeArray()把form表单打包,转成对象(列表套字典) var arr=$("#form").serializeArray() //第二种方式 //jquery 的循环,传参数:第一个参数是要循环的对象,第二个参数是一个匿名函数 $.each(arr,function (key,obj) { //obj对应的是:{name: "name", value: "sfdae"} console.log(key) console.log(obj) formdata.append(obj.name,obj.value) }) //把文件放到formdata中 formdata.append('my_file',$('#my_file')[0].files[0]) console.log(arr) $.ajax({ url:'/register/', type:'post', //写什么来? processData:false, contentType:false, data:formdata, success:function (data) { console.log(data) } }) }) </script> {# <script>#} {# //等文档加载完毕之后,再进行操作#} {# $("#id_name").val('lqz')#} {# </script>#} </html>
views.py
from django.shortcuts import render, HttpResponse from PIL import Image, ImageDraw, ImageFont import random from io import BytesIO from django.contrib import auth from django.http import JsonResponse from blog import myforms from blog import models # random_code='' # Create your views here. def login(request): if request.method == 'GET': dic={'name':'lqz','age':18} return render(request, 'login.html',locals()) # elif request.method=='POST': # 判断前台发的请求是不是ajax的请求 elif request.is_ajax(): response = {'user': None, 'msg': None} name = request.POST.get('name') pwd = request.POST.get('pwd') valid_code = request.POST.get('valid_code') # 判断传过来的验证码是否正确 # 从session中取出来 if valid_code.upper() == request.session.get('valid_code').upper(): user = auth.authenticate(request, username=name, password=pwd) if user: # ajax请求,不能再返回render页面,或者redirect,只能返回字符串 # 校验通过,一定要登录 auth.login(request, user) response['user'] = name response['msg'] = '登录成功' else: # 用户名密码错误 response['msg'] = '用户名密码错误' else: response['msg'] = '验证码错误' return JsonResponse(response) from BBS import settings def get_random_color(): return ( random.randint(0, 255), random.randint(0, 255), random.randint(0, 255) ) def get_valid_code(request): # 第一种方式 # with open('static/img/lhf.jpg','rb') as f: # # 图片二进制 # data=f.read() # return HttpResponse(data) # 第二种方式:随机生成一张图片 # pip3 install Pillow # pillow 是一个图形处理的模块,功能很强强大 # 生成一张图片,第一个参数是模式:RGB,第二个参数是图片大小,第三个参数是图片颜色 # img = Image.new('RGB', (320, 35), color=get_random_color()) # # 保存到本地 # with open('valid_code.png', 'wb') as f: # # 直接用img的save方法,第一个参数是空文件,第二个参数图片格式 # img.save(f, 'png') # # 打开文件,再返回 # with open('valid_code.png', 'rb') as f: # data = f.read() # return HttpResponse(data) # 第三种方式 # 在内存中生成一个空文件(把它想象成 open('valid_code.png', 'wb') as f:) # 一个是在硬盘上,一个是在内存中 # img = Image.new('RGB', (320, 35), color=get_random_color()) # f = BytesIO() # # 把图片保存到f中 # # 放到内存中,存取比较快,而且有自动清理 # img.save(f, 'png') # # data = f.getvalue() # return HttpResponse(data) # 第四种方式,在图片上写文字 # img = Image.new('RGB', (320, 35), color=get_random_color()) # # 拿到画笔,把图片传入画笔 # img_draw=ImageDraw.Draw(img) # # 生成一个字体对象,第一个参数是字体文件的路径,第二个参数是字体大小 # font=ImageFont.truetype('static/font/ss.TTF',size=25) # # # 第一个参数,xy的坐标,第二个参数:要写的文字,第三个参数:写文字的颜色,第四个参数:字体 # # 不同的字体是不同的ttf文件 # img_draw.text((0,0),'python',get_random_color(),font=font) # # f = BytesIO() # # 把图片保存到f中 # # 放到内存中,存取比较快,而且有自动清理 # img.save(f, 'png') # # data = f.getvalue() img = Image.new('RGB', (320, 35), color=get_random_color()) # 拿到画笔,把图片传入画笔 img_draw = ImageDraw.Draw(img) # 生成一个字体对象,第一个参数是字体文件的路径,第二个参数是字体大小 font = ImageFont.truetype('static/font/ss.TTF', size=25) # 第一个参数,xy的坐标,第二个参数:要写的文字,第三个参数:写文字的颜色,第四个参数:字体 # 不同的字体是不同的ttf文件 random_code = '' # 弄一个循环,循环5次,每次随机写一个(数字,大写,小写字母) for i in range(5): char_num = random.randint(0, 9) # 生成一个97到122的数字,然后用chr转成字符 char_lower = chr(random.randint(97, 122)) char_upper = chr(random.randint(65, 90)) char_str = str(random.choice([char_num, char_lower, char_upper])) img_draw.text((i * 30 + 20, 0), char_str, get_random_color(), font=font) random_code += char_str # 把验证码保存到session中 print(random_code) request.session['valid_code'] = random_code ''' 1 生成一个随机字符串:ddddsfassda 2 在session表中插入一条数据 3 在cook中写入 :sessionid=ddddsfassda ''' # width = 320 # height = 35 # for i in range(10): # 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_color()) # # for i in range(100): # # 画点 # img_draw.point([random.randint(0, width), random.randint(0, height)], fill=get_random_color()) # x = random.randint(0, width) # y = random.randint(0, height) # # 画弧形 # img_draw.arc((x, y, x + 4, y + 4), 0, 90, fill=get_random_color()) f = BytesIO() # 把图片保存到f中 # 放到内存中,存取比较快,而且有自动清理 img.save(f, 'png') data = f.getvalue() return HttpResponse(data) def register(request): if request.method=='GET': my_form=myforms.RegForm() return render(request,'register.html',{'my_form':my_form}) elif request.is_ajax(): response={'status':100,'msg':None} print(request.POST) my_form = myforms.RegForm(request.POST) if my_form.is_valid(): # 存数据,返回正确信息 # 得用create_user,回忆一下为什么 # 定义一个字典,把清理的数据赋给它 dic=my_form.cleaned_data # 移除掉确认密码字段 dic.pop('re_password') # 取出上传的文件对象 my_file=request.FILES.get('my_file') # 如果上传的文件为空,这个字段不传,数据库里存默认值 if my_file: # 放到字典中 dic['avatar']=my_file # 存数据的时候,多肯定不行,少,可以能行(null=True),它是可以的 user=models.UserInfo.objects.create_user(**dic) ''' models.FileField 有了这个字段,存文件,以及往数据库放文件路径,统统不需要自己做了 只需要把文件对象赋给它就可以了 ''' # user=models.UserInfo.objects.create_user(username=name,password=pwd,avatar=文件对象) # 看看存没存进去 print(user.username) else: # 返回错误信息 response['status']=101 response['msg']=my_form.errors return JsonResponse(response)