一：froms组件的作用
在我们进行web端的开发的时候，常常用到对表单的数据的获取并发送给后台，无论是对通过from表单提交还是通过ajax提交。我们都免不了对表单输入框的数据进行获取，在后端对数据进行验证并把验证结果再返回前端页面。常常有些验证逻辑很繁琐，一个不小心可能会出错，大费心力。而djingo自带的from组件，可以对表单自动生成，表单数据验证等功能。
二：froms组件的表单验证（以注册用户表单的来说明）
1:userInfo模型
#coding:utf-8 from django.db import models from django.contrib.auth.models import AbstractUser,User # Create your models here. class UserInfo(AbstractUser): nid = models.AutoField(primary_key=True) telephone=models.CharField(max_length=11,null=True,unique=True) avatar=models.FileField(upload_to='avatar/',default="")#upload_to 代表着文件上传到服务器的位置 默认跟目录。可以通过设置media blog=models.OneToOneField(to='Bolg',to_field='nid',null=True,on_delete=None) def __str__(self): return self.username
2:froms 组件的定制
class UserForms(forms.Form): user = forms.CharField(max_length=32,label='用户名',error_messages={'required': '用户名不能为空'},widget=widgets.TextInput(attrs={'class':'form-control'})) pwd = forms.CharField(max_length=32,label='密码',error_messages={'required': '密码不能为空', },widget=widgets.PasswordInput(attrs={'class':'form-control'})) re_pwd = forms.CharField(max_length=32,label='重复密码',error_messages={'required': '密码不能为空',},widget=widgets.PasswordInput(attrs={'class':'form-control'})) email = forms.EmailField(max_length=32,label='邮件',error_messages={ 'required': '邮件不能为空','invalid': '邮件格式错误'},widget=widgets.EmailInput(attrs={'class':'form-control'})) def clean_user(self): #局部钩子 方法命名规则 clean_name name 被验证的字段 user=UserInfo.objects.filter(username=self.cleaned_data['user']).first()#验证userInfo是否存在该名字 if user: raise ValidationError('用户名已存在') return self.cleaned_data['user'] def clean(self): #全局钩子 会和字段一起验证 pwd=self.cleaned_data.get('pwd') re_pwd=self.cleaned_data.get('re_pwd') if pwd==re_pwd: return self.cleaned_data else: self.add_error('re_pwd', '两次密码不一致!!!!') raise ValidationError('两次输入的密码不一致')
说明：这里说明下，forms组件和需要验证的对应模型没有什么必然的联系，所以字段的个数，名字通常不会完全吻合。这也好理解，我们从前段传来的值，只是当参数的值传递给model类的字段进行数据验证，但是为了保证代码的可读性，所以我们需要对字段进行规范的命名。
三：views.py
def regester(request): data = {'user': None, 'msg': None} if request.is_ajax(): #判断是不是ajax请求 ， 也可以用 reques.method=='POST'来判断 # print(request.POST) form=UserForms(request.POST)#验证标端正确 if form.is_valid(): username=form.cleaned_data.get('user') pwd=form.cleaned_data.get('pwd') #所有验证通过的数据添加到 email=form.cleaned_data.get('email') avatar=request.FILES['avatar'] UserInfo.objects.create(username=username,password=pwd,email=email,avatar=avatar) data['user'] = username else: #form.cleaned_data #所有验证通过的数据添加到 form_cleaned_data中 data['msg'] = form.errors #所有的验证失败的数据添加到 form.errors中 return JsonResponse(data) file = UserForms() #get请求 生成 from表单 return render(request,'regester.html',{'file':file})
注意，如果后台传送有对应文件的时候，获取文件对象 avatar=request.FILES['avatar'] 并把对象传入作为实参，
四：模板文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 可选的 Bootstrap 主题文件（一般不用引入） --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <style> #avatar{ display: none; } </style> </head> <body> <div class="row"> <div class="col-md-6 col-md-offset-3"> <form action="/login/" method="post"> {% csrf_token %} {% for i in file%} <div class="form-group"> <label for="{{ i.auto_id }}">{{ i.label }}</label> {{ i }} <span class="errors" style="color: red"> </span> </div> {% endfor %} <div class="form-group"> <label for="avatar">头像 <img id='avatar_img' width="60" height="60" src="/static/img/defult.jpg"> </label> <input type="file" class="a" id="avatar" name="avatar"> </div> <button id='sub' type="button" class="btn btn-default">注册</button> </form> </div> </div> </body> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script> $('#avatar').change( //发生转变的时候，触发该函数 function () { var file_name=$('#avatar')[0].files[0] //获取选中文件对象 var file_obj=new FileReader() //创建读取文件对象 file_obj.readAsDataURL(file_name)//读取文件路径 file_obj.onload=function () { $('#avatar_img').attr('src',file_obj.result) }; } ) $('#sub').click( function () { //需要传递文件的时候，data数据，需要 var formdata=new FormData() var formList=$('form').serializeArray() //当传递文件的必须传递 fromdata对象给ajax $.each(formList,function(i,value) { formdata.append(value.name,value.value) }) formdata.append('avatar',$('#avatar')[0].files[0])//文件存储在files的文件属性中 $.ajax({ url:'', type:'post', async: false, //设置为同步上传方式 必须存在 cache: false, //不需要缓存 contentType: false, processData: false, //这里上传的是formdata,不需要对数据进行处理,必须存在 data:formdata, success:function (data) { if (data.user){ location.href='/login/' } else { $('form div input').next().text(' ') msg=data.msg $.each(msg,function (key,value) { if (msg.re_pwd && key=='re_pwd'){ value=msg.re_pwd[0] } $('#id_'+key).next().text(value) }) } } } ) } ) </script> </html>
五：media和static
1:media和static的区别
static是用来保存和工程相关的静态文件，比如css , js，默认头像等
media通常用来保存又客户端上传的文件。比如头像，文件等
2:media配置setting
MEDIA_ROOT=os.path.join(BASE_DIR,'media')#设置文件上传的静态文件
不配置默认系统的根目录
六：froms字段参数的意义
Field required=True, 是否允许为空 widget=None, HTML插件 label=None, 用于生成Label标签或显示内容 initial=None, 初始值 help_text='', 帮助信息(在标签旁边显示) error_messages=None, 错误信息 {'required': '不能为空', 'invalid': '格式错误'} show_hidden_initial=False, 是否在当前插件后面再加一个隐藏的且具有默认值的插件（可用于检验两次输入是否一直） validators=[], 自定义验证规则 localize=False, 是否支持本地化 disabled=False, 是否可以编辑 label_suffix=None Label内容后缀 CharField(Field) max_length=None, 最大长度 min_length=None, 最小长度 strip=True 是否移除用户输入空白 IntegerField(Field) max_value=None, 最大值 min_value=None, 最小值 FloatField(IntegerField) ... DecimalField(IntegerField) max_value=None, 最大值 min_value=None, 最小值 max_digits=None, 总长度 decimal_places=None, 小数位长度 BaseTemporalField(Field) input_formats=None 时间格式化 DateField(BaseTemporalField) 格式：2015-09-01 TimeField(BaseTemporalField) 格式：11:12 DateTimeField(BaseTemporalField)格式：2015-09-01 11:12 DurationField(Field) 时间间隔：%d %H:%M:%S.%f ... RegexField(CharField) regex, 自定制正则表达式 max_length=None, 最大长度 min_length=None, 最小长度 error_message=None, 忽略，错误信息使用 error_messages={'invalid': '...'} EmailField(CharField) ... FileField(Field) allow_empty_file=False 是否允许空文件 ImageField(FileField) ... 注：需要PIL模块，pip3 install Pillow 以上两个字典使用时，需要注意两点： - form表单中 enctype="multipart/form-data" - view函数中 obj = MyForm(request.POST, request.FILES) URLField(Field) ... BooleanField(Field) ... NullBooleanField(BooleanField) ... ChoiceField(Field) ... choices=(), 选项，如：choices = ((0,'上海'),(1,'北京'),) required=True, 是否必填 widget=None, 插件，默认select插件 label=None, Label内容 initial=None, 初始值 help_text='', 帮助提示 ModelChoiceField(ChoiceField) ... django.forms.models.ModelChoiceField queryset, # 查询数据库中的数据 empty_label="---------", # 默认空显示内容 to_field_name=None, # HTML中value的值对应的字段 limit_choices_to=None # ModelForm中对queryset二次筛选 ModelMultipleChoiceField(ModelChoiceField) ... django.forms.models.ModelMultipleChoiceField TypedChoiceField(ChoiceField) coerce = lambda val: val 对选中的值进行一次转换 empty_value= '' 空值的默认值 MultipleChoiceField(ChoiceField) ... TypedMultipleChoiceField(MultipleChoiceField) coerce = lambda val: val 对选中的每一个值进行一次转换 empty_value= '' 空值的默认值 ComboField(Field) fields=() 使用多个验证，如下：即验证最大长度20，又验证邮箱格式 fields.ComboField(fields=[fields.CharField(max_length=20), fields.EmailField(),]) MultiValueField(Field) PS: 抽象类，子类中可以实现聚合多个字典去匹配一个值，要配合MultiWidget使用 SplitDateTimeField(MultiValueField) input_date_formats=None, 格式列表：['%Y--%m--%d', '%m%d/%Y', '%m/%d/%y'] input_time_formats=None 格式列表：['%H:%M:%S', '%H:%M:%S.%f', '%H:%M'] FilePathField(ChoiceField) 文件选项，目录下文件显示在页面中 path, 文件夹路径 match=None, 正则匹配 recursive=False, 递归下面的文件夹 allow_files=True, 允许文件 allow_folders=False, 允许文件夹 required=True, widget=None, label=None, initial=None, help_text='' GenericIPAddressField protocol='both', both,ipv4,ipv6支持的IP格式 unpack_ipv4=False 解析ipv4地址，如果是::ffff:192.0.2.1时候，可解析为192.0.2.1， PS：protocol必须为both才能启用 SlugField(CharField) 数字，字母，下划线，减号（连字符） ... UUIDField(CharField) uuid类型 ...