本案例通过实现一个注册页面的编写,来带你了解FLASK-WTF的运用.
主要功能为表单基础的功能--手机号码必须为11位数,且通过数据库查找不能有已经注册的了,密码要求输入两遍且必须一样,且所有内容不能为空的提示等内容.那么现在就开始把!
一.创建表单类.
首先运用flask-wtf你必须确保你的环境中已经安装wtf,如果你是python3的环境,我们可以通过 pip3 install Flask-WTF 来进行安装.
安装好了之后我们来进行导入:
from flask_wtf import Form
from wtforms import StringField, SubmitField, PasswordField, ValidationError
from wtforms.validators import DataRequired, EqualTo, Length
from models import USER
让我们一步步来理解!!
第一行代码我们从 falsk-wtf 中导入了 Form 类,以后我们创建的所有表单类都要继承自这个类.
第二行代码我们从 wtforms 中导入了 StringField,SubmitField,PasswordField,ValidationError ,那么这些东西是用来干什么的呢?我相信如果稍微过一些HTML的人应该都认识HTML表单中<input>元素的type="text",type="submit",type="password"这类属性吧.原理是一样的.
第三行代码我们又从 wtforms.validators 中导入了 DataRequired,EqualTo,Length ,其中 DataRequired用来验证表单数据不能为空, EqualTo 常用来比较两个代码是不是相等, Length 用来限制字符长度.
第四行代码是导入数据库模型的USER类,用来查询数据库中是不是已经注册了手机号.如果已经注册了,再用第二行代码的 ValidationError 来抛出警告.
实例如下:
class Regist(Form):
phone = StringField("请输入手机号", validators=[DataRequired(), Length(min=11, max=11, message="手机号码是11位数")])
name = StringField("请输入用户名", validators=[DataRequired()])
password = PasswordField("请输入密码", validators=[DataRequired()])
password1 = PasswordField("请重复密码", validators=[DataRequired(), EqualTo("password", "密码必须一样")])
submit = SubmitField("立即提交") def validate_phone(self, field):
if USER.query.filter_by(phone=field.data).first():
raise ValidationError("*,你的手机号码被注册了!!")
如此一个注册表单类就建立成功了!!
二.视图函数中编写逻辑
我先直接把代码列出来:
# 注册界面
@app.route("/regist/", methods=["GET", "POST"])
def regist():
form = Regist()
if form.validate_on_submit():
telephone = form.phone.data
username = form.name.data
password = form.password.data
if form.validate_phone():
user = USER(phone=telephone, name=username, password=password)
db.session.add(user)
db.session.commit()
return redirect(url_for("login"))
else:
return render_template("regist.html", form=form)
我们先用 form=Regist() 实例化一个表单类的对象,后面紧跟着一个条件语句, validate_on_submit 意思是判断表单内的数据是不是为空,最大长度是不是....等先前设置的限制条件以及判断表单内容是不是提交过了.如果是,那么就意味着我们提交了表单数据,并且进行后面的操作,如果不是.就意味着我们只是打开了这个注册页面,用 return render_template("regist.html", form=form) 渲染模板,并且把实例化的对象form作为参数传递到模板中.
我们接着继续提交表单后的代码理解 telephone = form.phone.data username = form.name.data password = form.password.data 这三行代码是获取用户填写的手机号,用户名,密码这些数据.
获取之后,我们在进行判断.调用注册表单类的validate_phone()函数,如果忘记内容可以再看看上面.如果为true,就代表着这个手机号没有被注册,继续进行后面的把用户填写的数据存进数据库的操作.
user = USER(phone=telephone, name=username, password=password)
这段代码的意思是USER用户表中有phone,name,password的属性.我们把获取的用户数据telephone,username,password赋值给它,在通过 db.session.add(user) db.session.commit() 这两行代码提交到数据库中.
数据库中是用到了flask-sqlalchemy,这里不做具体讲解,以后有机会再讲.我把代码贴出来:
lass USER(db.Model):
__tablename__="user"
id=db.Column(db.Integer,primary_key=True,autoincrement=True)
phone=db.Column(db.String(11),nullable=False)
name=db.Column(db.String(50),nullable=False)
password=db.Column(db.String(100),nullable=False)
三.在模板中运用
第三步也是最后一步.如果你的项目运用了flask-bootstrap的话,可以通过:
{% import "bootstrap/wtf.html" as wtf %}
<form action="" method="post">
{% block page_content %}
{{ wtf.quick_form(form) }}
{% endblock %}
</form>
wtf.quick_form(form)直接生成表单,是不是很方便?当然没有样式,如果你要添加样式的话可以这样:
<form method="POST">
{{ form.hidden_tag() }}
{{ form.name.label }} {{ form.name(id='my-text-field') }}
{{ form.submit() }}
</form>
好了,到这里就结束了.如果你把这些全弄懂了,你还可以直接阅读它的中文文档.
待续..........