• Flask表单(Flask-WTF)


    1、request.from获取POST表单数据

    # hello.py

     1 #coding:utf-8
     2 
     3 from flask import Flask,request,render_template
     4 
     5 app = Flask(__name__)
     6 
     7 @app.route('/',methods=['GET']) #methods是一个列表
     8 def home():
     9     return render_template('home.html')
    10 
    11 @app.route('/signin',methods=['GET'])
    12 def signin_form():
    13     return render_template('form.html')
    14 
    15 @app.route('/signin',methods=['POST'])
    16 def signin():
    17     username = request.form['username']
    18     password = request.form['password']
    19     if username == 'admin' and password == 'password':
    20         return render_template('signin-ok.html',username=username)
    21     else:
    22         return render_template('form.html',message='用户名或者密码错误,请重新登陆>>',username=username)
    23 
    24 
    25 if __name__ == '__main__':
    26     app.run()

    # form.html

     1 <!DOCTYPE html>
     2 <html>
     3     <meta charset="utf-8">
     4     <head>
     5         <title>登陆界面</title>
     6     </head>
     7     <body>
     8         {% if message %}
     9             <p style="color:red">{{ message }}</p>
    10         {% endif %}
    11         <form action='/signin' method="post">
    12             <legend>请登陆您的账号:</legend>
    13             <input type="text" name="username" placeholder='Username' value="{{ username }}"><br>
    14             <input type="password" name="password" placeholder="Password" value="{{ password }}"><br>
    15             <button type="submit">登陆</button> 
    16         </form> 
    17     </body>
    18 </html>

    # home.html

     1 <!DOCTYPE html>
     2 <html>
     3     <meta charset="utf-8">
     4     <head>
     5         <title>主页</title>
     6     </head>
     7     <body>
     8         <h1>你好,欢迎来到首页</h1>
     9         <p><a href="/signin">点击登陆</a></p>
    10     </body>
    11 </html>

    #signin-ok.html

     1 <!DOCTYPE html>
     2 <html>
     3     <meta charset="utf-8">
     4     <head>
     5         <title>登陆成功</title>
     6     </head>
     7     <body>
     8         <h1>欢迎你,{{ username }}</h1>
     9     </body>
    10 </html>

    2、使用Flask-WTF扩展

    # hello.py

     1 #coding:utf-8
     2 
     3 from flask import Flask,render_template
     4 from flask.ext.bootstrap import Bootstrap
     5 from flask.ext.wtf import Form
     6 from wtforms import StringField,SubmitField
     7 from wtforms.validators import Required
     8 
     9 app = Flask(__name__)
    10 app.config['SECRET_KEY']='hard to guess string'
    11 bootstrap = Bootstrap(app)
    12 
    13 
    14 class NameForm(Form):
    15     name = StringField('what is your name?',validators=[Required()])
    16     submit = SubmitField('Submit')
    17 
    18 @app.route('/',methods=['GET','POST'])
    19 def index():
    20     name = None
    21     form = NameForm()
    22     if form.validate_on_submit():
    23         name = form.name.data #没有这一步,submit后name=None
    24         form.name.data = ''   #没有这一步,submit后文字框还会遗留上一次输入的文字
    25     return render_template('index.html',form=form,name=name)
    26 
    27 if __name__ == '__main__':
    28     app.run()

    # index.py

     1 {% extends "base.html" %}  
     2 {% import "bootstrap/wtf.html" as wtf %}  
     3   
     4 {% block title %}Flasky{% endblock %}  
     5   
     6 {% block page_content %}  
     7 <div class="page-header">  
     8     <h1>Hello, {% if name %}{{ name }}{% else %}Stranger{% endif %}!</h1>  
     9 </div>  
    10 <!-- 导入wtf.html渲染整个Flsk-WTF表单,参数form是hello.py中传过来的form实例-->  
    11 {{ wtf.quick_form(form) }}  
    12 {% endblock %} 

    附:共同的基模板

    # base.html

     1 {% extends "bootstrap/base.html" %}
     2 {% block title %}Flasky{% endblock %}
     3 
     4 {% block navbar %}
     5 <div class="navbar navbar-inverse" role="navigation">
     6 <div class="container">
     7     <div class="navbar-header">
     8         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
     9             <span class="sr-only">Toggle navigation</span>
    10             <span class="icon-bar"></span>
    11             <span class="icon-bar"></span>
    12             <span class="icon-bar"></span>
    13         </button>
    14         <a class="navbar-brand" href="/">Flasky</a>
    15 
    16     </div>
    17     <div class="navbar-collapse collapse">
    18         <ul class="nav navbar-nav">
    19             <li><a href="/">Home</a></li>
    20             <li><a href="/">Twitter</a></li>
    21             <li><a href="/">Blog</a></li>
    22         </ul>
    23     </div>
    24 </div>
    25 </div>
    26 {% endblock %}
    27 
    28 
    29 {% block content %}
    30 <div class="container">
    31     <div class="page-header">
    32         {% block page_content %}{% endblock %}
    33     </div>
    34 </div>
    35 
    36 {% endblock %}
  • 相关阅读:
    无障碍开发(十五)之好心办坏事
    无障碍开发(十四)之Android /iOS平台无障碍功能
    无障碍开发(十三)之盲人是如何使用手机的之屏幕阅读器Screen Reader
    无障碍开发(十二)之怎样做好信息无障碍?
    LABjs学习(一)之无阻塞动态并行加载脚本文件以及管理执行顺序
    jQuery选择器引入
    面向对象-标准的手机类代码及其测试
    面向对象-this关键字的内存图解
    面向对象-this关键字的概述和应用
    第一个jQuery程序
  • 原文地址:https://www.cnblogs.com/wongbingming/p/6781770.html
Copyright © 2020-2023  润新知