【052】Python全栈日记-Django(六)

版权声明:作者:人学物理死的早 出处:https://blog.csdn.net/weixin_39561473 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。 https://blog.csdn.net/weixin_39561473/article/details/86599275

一、Django表单类

之前通过ajax get做过前端的表单验证,但是如果不管邮箱重复的提醒,继续注册,还是能注册成功的。普通表单只能做到前端验证,为了安全,我们不得不编写对应的后端验证,但是这样工作量很大。

例如一些:

用户名:符号开头,长度大于

密码:复杂度 

对于邮箱重复不让注册,除了今天要学的,还有一种思路,做两个提交按钮,一个是提交,而另一个只是button,当邮箱验证过后,真正的提交按钮才会显示。

Django为此编写了form表单类,但是在django 1版本之前,form类被称为上帝的类,也就是除了上帝没人会用,后来为了弥补django在1版本之后,1.4之前推出了forms,在1.4之后,二者合并称为现在的forms

之前通过django提供的admin管理系统来添加学院数据,今天要自己做一个,首先从简单的老师表单开始:

注册页面一共有姓名,年龄、邮箱,密码和学科。单独创建一个html页。 可以使用之前创建的模板为老师注册页布局,并通过添加bootstrap 提供的class名添加样式。

1、定义form类

首先创建一个form.py文件,定义form类,自定义的form也需要继承django的类才能使用。

调用form类,依旧是确定字段,常用字段有:

[1]字符串字段:CharField(Field):必须定义最大长度

max_length=None,:最大长度

min_length=None,:最小长度

strip=True:是否移除用户输入空白

[2]整型字段:IntegerField(Field):选填做大最小

max_value=None,最大值

min_value=None,最小值

[3] 邮件字段EmailField(CharField)

[4]文件字段FilePathField(ChoiceField):文件选项,目录下文件显示在页面中

在form类的字段,有一个属性是label,就是为这个字段设置一个别名的意思。

定义老师的form类:

2、在视图中导入form类并创建试图函数,

在试图中通过实例化teacher类来获取其中字段,并将数据传入新建的页面中

3、Form类的基础操作

注意:form表单不会携带form头部和提交按钮,是为了提供纯粹的form数据,为了更灵活的前端样式。

所以在页面中需要先写form标签和提交按钮。

As_p、as_ul的样式如下,目前as_table已经失效,

但是这样并不利于我们操作样式,因为标签只能在控制台看见,所以还有另外的一种修改方式,手写table标签,然后通过循环把表单写在页面。别忘记在最后加上提交按钮。

二、form校验

使用Form表单类的最大优势就是,django会把字段所设置的限制条件自动放在前端,例如:当你输入的用户名大于8字节,而在form中设置的最大长度为8,这时浏览器就会提醒你过长。

当然,form校验更厉害的就是你可以在form类中定义方法,通过方法来对数据进行校验筛选,例如:

那如何使用又如何验证form表单呢?这就需要试图函数进行操作了

三、学生添加页

试图函数可以对表单进行表单调用和表单校验

将post数据传入表单实例,我们之前做了学员列表,今天来做一个学员添加页

1、建立学生form表单

学生表有两个特殊的字段,一个是学科,一个是图片

学科是一个多对一的字段,多对一字段在form表单中必须使用外链链接的表中存在的的东西,例如学生form表单的学科字段,所填信息必须为学科表粗壮乃的,一般使用id来进行匹配,所以使用字段类型为整型。

图片字段是一个文件字段,使用FileField字段进行设置。

建立学生form表单:在form.py中:

编写视图函数并配置url:

视图函数

添加路由:

新建一个学生添加的html页面,并继承之前的base模板:

用循环把视图中获取的数据写在页面上,添加form和推荐按钮,并加上csrf防御

Form标签在原有的action和method属性上,需要在添加一个enctype="multipart/form-data"属性,这是用来接收提交的文件的,本例子中文件是图片。不加这个视图函数中无法获取图片。

在学生列表页添加一个跳转到学生添加页的按钮,学生添加页效果如下:样式是使用的bootstrap自带样式。Form表单会自动在页面生成带有约束的表单控件

在输入的时候,会根据在form中所规定的字段和规定的长度对控件内容进行限制:

接下来就是通过视图接受post请求,并把数据存入数据库了:

这里要强调一下,图片是以文件的格式上传在请求中的,所以取出来也需要通过文件的方式取出。

将图片存入数据库中分为两部分,一部分存在数据库中的是路径,用于查找图片,而图片文件应该上传到项目的static文件夹中。

图片格式有很多种,例如jpg,png等等,每种格式的区别是使用了不同的编码编写,实际上图片是一堆二进制字符写成的,所以我们可以把上传的图片转为二进制在通过python的with open文件操作进行文件写入,把这些二进制写入在static文件夹中。

解析二进制的方法为 图片.chunks(),而with open使用的方法为wb,wb是以二进制格式打开一个文件只用于写入。

其中if student_valid.is_valid():是对数据进行校验,看看数据是否符合规定的样式,Is_valid 如果校验通过 返回True 否则False

二、Ajax post请求

使用submit按钮进行跳转,如果需要填入大量数据但是却有一个填错了,提交之后,又得从头再来,这就很难受了,这时候ajax pots提交就体现了它的价值。

Ajax post与get不同,post是提交页面中所有的填写的信息,所以需要先获取所有的的数据,为了方便数据传递,所以把所有填写的内容存放在一个jQuery提供的表单容器中。

1、修改提交按钮,和from属性

使用Ajax post会和提交按钮有冲突,所以将提交按钮类型改为button,这是form标签的属性action和method就没有用了,保留上传文件的属性就行。

2、构建提交逻辑,当点击提交按钮时进行提交,所以在jQuery中需要先获取提交按钮然后添加点击事件:别忘添加jquery包

3、点击按钮后获取所有填写的内容,通过网页查看通过from表单展示在网页的文本框的id和name,方便我们在jQuery中获取标签。

4、通过id的name存储数据,先建立表单容器

建立表单容器:Var formData = new FormData();

通过append命令数据写入表单容器。

Append有两个属性name和value,所以传入的数据也是以键值对形式写入:获取输入数据在JavaScript中使用.value()在jQuery中使用.val()

5、获取所有数据,写入表单容器

[1]表单上传的照片属于文件,所以不能用常规的方法进行获取,需要使用:

formData.append(‘photo’,document.getElementById(‘id_pthoto’).files[0])。因为是文件,获取后标签后需要使用.files[0]来获取其中文件信息,如果有兴趣知道文件信息有什么可以使用console.log(document.getElementById(‘id_pthoto’).files[0])在控制台中查看。

[2]为了防止csrf攻击,我们在form下面会添加一句{% csrf_token %},这句话会在html中自动生成一个input框,里面有一个用来校对的码,以用来防止csrf攻击,由于他也是一个input框,所以在收集数据时亦需要把此数据进行收集,返回视图自动进行校验。

键:csrfmiddlewaretoken

值:{{ csrf_token }}

所以收集所有input框的代码如下:

6、发起ajax请求

在原有的url、type、data属性的基础上,又新添加了两个属性

[1]processData:是否严格检查数据格式

[2]contentType:是否严格检查内容类型

通常我们都填写false,因为我们传输的类型既有文件,又有csrf码,类型和内容不统一。

7、定义后端处理传过来的数据

既然数据已经通过Ajax传输到了后端,这时候就需要在视图中写一个方法接收数据并处理,相对与上一种表单提交的方法,ajax处理函数只是多了一个参数用来存储数据比对的情况,并将这个参数返回给Ajax。

复制一份学生注册函数,修改函数名,添加参数result,用来传给ajax。因为使用ajax进行验证,所以之前的from表单验证也可以删除验证部分。

 

 

8、指定路由,ajax发起请求

在子路由中绑定视图中ajax判断函数,在html中补全ajax的代码,url指向路由,路由指向函数,数据传入函数后,通过json返回结果给ajax中的data,解析data变量,判断结果,进行输出。

 

猜你喜欢

转载自blog.csdn.net/weixin_39561473/article/details/86599275
今日推荐