flask笔记:4:web表单

处理web表单表单需要Flask-WTF

在根目录创建一个配置文件

myblog/config.py

CSRF_ENABLED=True
SECRET_KEY='you-will-never-guess'

CSRF_ENABLED配置是为了激活跨站点请求伪造保护

SECRET_KEY是当CSRF激活后,建立一个加密令牌,用于验证表单

修改app/__init__.py

from flask import Flask
app=Flask(__name__)
app.config.from_object('config')
from app import views
#读取配置文件

编写第一个表单

app/forms.py

from flask.ext.wtf import Form
from wtforms import StringField,BooleanField
from wtforms.validators import DataRequired
class LoginForm(Form):
    openid = StringField('openid',validators=[DataRequired()])
    remember_me = BooleanField('remember_me',default=False)

导入所需的模块

创建一个Form类

定义一个openid文本框(StringField),名字是openid,需要验证是否为空validators=[DataRequired()]

定义一个remember_me选择框(BooleanField ),名字remember_me,默认是False

创建表单模板

app/templates/login.html

{% extends "base.html" %}
{% block content %}
<h1>Sigh In</h1>
<form method="post" action="" name="login">
    {{form.hidden_tag()}}
    <p>
        Please enter your OpenID:<br>
        {{form.openid(size=80)}}<br>
    </p>
    <p>{{form.remember_me}} Remember Me</p>
    <p><input type="submit" value="Sign In"></p>
</form>
{% endblock %}

{{form.hidden_tag()}} 用来实现在配置中的CSRF保护,如果已经激活CSRF,这个字段要出现在所有表单中

{{form.openid(size=80)}} form表单的openid字段,输入框大小80

表单视图

修改 app/views.py

from flask import render_template
from app import app
from .forms import LoginForm

@app.route('/')
@app.route('/index')
def index ():
    user={'nickname':'Bob'}
    posts=[
            {'author':{'nickname':'John'},
             'body':'Beautiful day in Portland!'},
            {'author':{'nickname':'Susan'},
             'body':'The Avengers movie was so cool!'}
           ]
    return render_template("index.html",
    title="Home",
    user=user,
    posts=posts)

@app.route('/login',methods=['GET','POST'])
def login ():
    form = LoginForm()
    return render_template("login.html",
    title = "Sign In",
    form = form)
#导入LoginForm,视图接受GET和POST请求
#实例化一个LoginForm

接收表单数据

修改 app/views.py

from flask import render_template,flash,redirect
from app import app
from .forms import LoginForm

@app.route('/')
@app.route('/index')
def index ():
    user={'nickname':'Bob'}
    posts=[
            {'author':{'nickname':'John'},
             'body':'Beautiful day in Portland!'},
            {'author':{'nickname':'Susan'},
             'body':'The Avengers movie was so cool!'}
           ]
    return render_template("index.html",
    title="Home",
    user=user,
    posts=posts)

@app.route('/login',methods=['GET','POST'])
def login ():
    form = LoginForm()
    if form.validate_on_submit():
        flash('login requested for OpenID="'+form.openid.data+'",remember_me='+str(form.remember_me.data))
        return redirect('/index')
    return render_template("login.html",
    title = "Sign In",
    form = form)
#form.validate_on_submit()判断是否提交
#提交后用flash( )传递数据
#redirect( )是url跳转

修改 app/templates/base.html

<html>
    <head>
        {% if title %}
        <title>{{title}} - myblog</title>
        {% else %}
        <title>Welcome - myblog</title>
        {% endif %}
    </head>
    <body>
        <div>MyBlog:<a href="/index">Home</a></div>
        <hr>
        {% with messages = get_flashed_messages() %}
        {% if messages %}
        <ul>
            {% for message in messages %}
            <li>{{ message }}</li>
            {% endfor %}
        </ul>
        {% endif %}
        {% endwith %}
        {% block content %}
        {% endblock%}
    </body>
</html>

修改 app/templates/login.html

{% extends "base.html" %}
{% block content %}
<h1>Sigh In</h1>
<form method="post" action="" name="login">
    {{form.hidden_tag()}}
    <p>
        Please enter your OpenID:<br>
        {{form.openid(size=80)}}<br>
        {% for error in form.openid.errors %}
        <span style="color:red;">[{{ error }}]</span>
        {% endfor %}<br>
    </p>
    <p>{{form.remember_me}} Remember Me</p>
    <p><input type="submit" value="Sign In"></p>
</form>
{% endblock %}

显示:

不输入直接提交会显示错误,这个是程序自带的错误提示,就是form.openid.errors

在输入框输入bob,选中remember_me

在index页面显示出提交的内容

时间: 2024-11-07 12:50:08

flask笔记:4:web表单的相关文章

Flask学习之三 web表单

本部分Miguel Grinberg教程的翻译地址:http://www.pythondoc.com/flask-mega-tutorial/webforms.html 开源中国的:http://www.oschina.net/translate/the-flask-mega-tutorial-part-iii-web-forms 英文原文地址:http://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-iii-web-for

Flask学习之三——Web表单

1. CSRF 保护 from flask import Flask app = Flask(__name__) app.config['SECRET_KEY'] = 'secret_key string' app.config字典可用来存储框架.扩展和程序本身的配置变量.使用标准的字典语法就能把配置值添加到app.config对象中SECRET_KEY配置变量是通用密钥 ps:为了增强安全性,密钥不应该直接写入代码,而要保存在环境变量中 2.  表单类 When using Flask-WTF

Flask 里的WEB表单应用

它是HTML页面中负责数据采集的部件.表单有三个部分组成:表单标签.表单域.表单按钮.表单允许用户输入数据,负责HTML页面数据采集,通过表单将用户输入的数据提交给服务器. 创建模板文件 login.html,在其中直接写form表单: <form method="post"> <label>用户名:</label><input type="text" name="username" placeholde

读书笔记:《HTML5开发手册》Web表单

这是补充HTML5基础知识的第五篇内容,其他为: 一.HTML5-- 新的结构元素 二.HTML5-- figure.time.details.mark 三.HTML5-- details活学活用 四.HTML5-- 现存元素的变化 在之前的笔记中记录了HTML5标签元素的语义以及新定义,本周开始进入Web表单部分的学习,该章节已经读过一遍,很多表单验证的工作都可以通过HTML5完成!现在整理笔记,再次进入Web表单的神奇地域. 因该书出版较早,很多东西已经更改,我会在文中进行更正. 一.表单验

Flask教程 —— Web表单(上)

第二章中介绍的request对象公开了所有客户端发送的请求信息.特别是request.form可以访问POST请求提交的表单数据. 尽管Flask的request对象提供的支持足以处理web表单,但依然有许多任务会变得单调且重复.表单的HTML代码生成和验证提交的表单数据就是两个很好的例子. Flask-WTF扩展使得处理web表单能获得更愉快的体验.该扩展是一个封装了与框架无关的WTForms包的Flask集成. Flask-WTF和它的依赖集可以通过pip来安装: (venv) $ pip

基于Extjs的web表单设计器 第七节——取数公式设计之取数公式的使用

基于Extjs的web表单设计器 基于Extjs的web表单设计器 第一节 基于Extjs的web表单设计器 第二节——表单控件设计 基于Extjs的web表单设计器 第三节——控件拖放 基于Extjs的web表单设计器 第四节——控件拖放 基于Extjs的web表单设计器 第五节——数据库设计 基于Extjs的web表单设计器 第六节——界面框架设计 基于Extjs的web表单设计器 第七节——取数公式设计之取数公式定义 基于Extjs的web表单设计器 第七节——取数公式设计之取数公式的使用

基于Extjs的web表单设计器 第五节——数据库设计

这里列出表单设计器系列的内容,6.7.8节的内容应该在春节后才有时间出了.因为这周末就请假回老家了,准备我的结婚大事.在此提前祝大家春节快乐! 基于Extjs的web表单设计器 基于Extjs的web表单设计器 第一节 基于Extjs的web表单设计器 第二节——表单控件设计 基于Extjs的web表单设计器 第三节——控件拖放 基于Extjs的web表单设计器 第四节——控件拖放 基于Extjs的web表单设计器 第五节——数据库设计 基于Extjs的web表单设计器 第六节——界面框架设计

【Bootstrap3.0建站笔记一】表单元素排版

1.文字和输入框前后排列: 代码: <div class="row"> <div class="col-lg-12"> <div class="panel panel-default"> <div class="panel-heading"> <h2>条件查找</h2> </div> <div class="panel-body

基于Extjs的web表单设计器 第六节——界面框架设计

基于Extjs的web表单设计器 基于Extjs的web表单设计器 第一节 基于Extjs的web表单设计器 第二节——表单控件设计 基于Extjs的web表单设计器 第三节——控件拖放 基于Extjs的web表单设计器 第四节——控件拖放 基于Extjs的web表单设计器 第五节——数据库设计 基于Extjs的web表单设计器 第六节——界面框架设计 基于Extjs的web表单设计器 第七节——取数公式设计 基于Extjs的web表单设计器 第八节——表单引擎设计 这一节我给大家介绍一下表单设