djingo之froms组件

Posted yingjp

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了djingo之froms组件相关的知识,希望对你有一定的参考价值。

一: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
View Code

      

  

  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})
View Code

注意,如果后台传送有对应文件的时候,获取文件对象 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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 javascript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
View Code

五: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类型
    ...

 

     

以上是关于djingo之froms组件的主要内容,如果未能解决你的问题,请参考以下文章

djingo之登陆验证,cookie,session

python在pychram中利用djingo开发helloword

疯狂一晚上搭建Djingo项目 眼疼

Jmeter组件之-Test Fragment(测试片段)

Vue组件之全局组件与局部组件

Vue组件之全局组件与局部组件