Flask框架学习笔记之表单基础介绍与表单提交方式

Flask是Python语言中一个非常流行的轻量级Web应用框架，适合搭建小型项目或者功能简单的应用，下面是关于Flask表单基础的介绍和表单提交方式的攻略。

一、表单基础介绍

Web应用中表单是一种常见的接口元素。表单允许用户通过交互式方式输入信息并向服务器提交数据。在Flask中，可以使用Flask-WTF插件来构建和处理表单。

首先需要安装Flask-WTF插件，可以通过pip来进行安装：

pip install Flask-WTF

接下来需要导入扩展，并创建一个表单类。表单类需要继承自FlaskForm类，同时需要定义表单中的字段（Field）。

例如，下面是一个包含用户名和密码的表单：

from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired

class LoginForm(FlaskForm):
    username = StringField('Username', validators=[DataRequired()])
    password = PasswordField('Password', validators=[DataRequired()])
    submit = SubmitField('Log In')

这个表单定义了三个字段，其中username和password分别是字符串类型的文本框，submit是一个提交按钮。

二、表单提交方式

在Flask中，表单的提交方式有两种：

GET方法：数据通过URL的查询字符串提交。
POST方法：数据通过HTTP请求正文提交。

普遍情况下，表单使用POST方法来提交。

下面是一个使用GET方法提交表单的示例代码：

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/search')
def search():
    query = request.args.get('q')
    return f'Search query: {query}'

if __name__ == '__main__':
    app.run(debug=True)

这段代码中，定义了两个路由，一个用于渲染表单的页面，另一个用于处理表单提交。

表单页面：

<!doctype html>
<html>
  <body>
    <form action="{{ url_for('search') }}" method="get">
      <input type="text" name="q" placeholder="Search...">
      <button type="submit">Search</button>
    </form>
  </body>
</html>

在表单页面中，需要定义一个GET方法的表单，通过action属性来指定表单提交的路由。

表单提交路由：

@app.route('/search')
def search():
    query = request.args.get('q')
    return f'Search query: {query}'

在表单提交路由中，使用request.args.get()方法来获取表单数据。

下面是一个使用POST方法提交表单的示例代码：

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/login', methods=['GET', 'POST'])
def login():
    form = LoginForm()
    if form.validate_on_submit():
        return f'Username: {form.username.data}, Password: {form.password.data}'
    return render_template('login.html', form=form)

if __name__ == '__main__':
    app.run(debug=True)

这段代码中，同样定义了两个路由，一个用于渲染表单页面，另一个用于处理表单提交。

表单页面：

<!doctype html>
<html>
  <body>
    <form action="{{ url_for('login') }}" method="post">
      {{ form.hidden_tag() }}
      <p>
        {{ form.username.label }}<br>
        {{ form.username() }}
      </p>
      <p>
        {{ form.password.label }}<br>
        {{ form.password() }}
      </p>
      <p>{{ form.submit() }}</p>
    </form>
  </body>
</html>

在表单页面中，定义了一个POST方法的表单，并使用action和method属性指定表单提交的路由和提交方式。同时通过hidden_tag()函数渲染一个隐藏的表单字段，以防止跨站请求伪造（CSRF）攻击。

表单提交路由：

@app.route('/login', methods=['GET', 'POST'])
def login():
    form = LoginForm()
    if form.validate_on_submit():
        return f'Username: {form.username.data}, Password: {form.password.data}'
    return render_template('login.html', form=form)

在表单提交路由中，同样需要指定POST方法。接下来，使用form.validate_on_submit()函数来判断是否提交了表单。如果表单提交成功，使用form.username.data和form.password.data属性获取表单字段的值，否则继续渲染表单页面。