从一个实例学习----FLASK-WTF

2018-02-22 10:48:49来源:cnblogs.com作者:海中灯塔人点击

分享

  本案例通过实现一个注册页面的编写,来带你了解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>

      

      好了,到这里就结束了.如果你把这些全弄懂了,你还可以直接阅读它的中文文档. 

                                                              待续..........

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台