《Flask Web开发实战》—— 表单

2020-01-05 本文已影响0人北邮郭大宝

Flask关于表单处理的部分，使用Flask-WTF库，首先安装

pip install flask-wtf

1. 表单的基本处理

Flask中表单的基本处理步骤有：

定义表单类，并验证表单数据
渲染表单
处理表单数据

1.1 定义表单类form.py

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


class LoginForm(FlaskForm):
    username = StringField('Username', validators=[DataRequired(message=u'名字不能为空')])
    password = PasswordField('Password', validators=[DataRequired(), Length(6, 128)])
    remember = BooleanField('Remember me')
    submit = SubmitField('Log in')

通过继承FlaskForm类，可以定义自己的表单；此外validators可以添加常见的数据验证工具，比如DataRequired，Length等。

1.2 1.2 渲染表单basic.html

{% extends 'base.html' %}

{% block content %}
<div class="basic-body">
    <form method="post">
        {{ form.csrf_token }}
        <div class="form-group">
            {{ form.username.label }} {{ form.username }}
            {% for message in form.username.errors %}
                <small class="error">{{ message }}</small><br>
            {% endfor %}
        </div>
        <div class="form-group">
            {{ form.password.label }} {{ form.password }}
            {% for message in form.password.errors %}
                <small class="error">{{ message }}</small><br>
            {% endfor %}
        </div>
        <div class="form-check">
           {{ form.remember }} {{ form.remember.label }}
        </div>
        <div>
            {{ form.submit(class='btn btn-primary') }}
        </div>
    </form>
</div>
{% endblock content %}

1.3 处理表单数据app.py

@app.route('/basic', methods=['GET', 'POST'])
def basic():
    form = LoginForm()
    if form.validate_on_submit():
        username = form.username.data
        flash('Welcome home %s' % username)
        return redirect(url_for('index'))
    return render_template('basic.html', form=form)

1.4 效果

1578040441420.jpg

2. 使用宏渲染表单

使用宏可以简化渲染的过程，新建macors.html，定义宏

{% macro form_field(field) %}
    {{ field.label }}<br>
    {{ field(**kwargs) }}<br>
    {% if field.errors %}
        {% for error in field.errors %}
            <small class="error">{{ error }}</small><br>
        {% endfor %}
    {% endif %}
{% endmacro %}

在basic.html里渲染

{% extends 'base.html' %}
{% from 'macros.html' import form_field %}

{% block content %}
<h2>Basic BootStrap Style Form Example</h2>
<div class="basic-body">
    <form method="post">
        {{ form.csrf_token }}
        <div class="form-group">
            {{ form_field(form.username) }}
        </div>
        <div class="form-group">
            {{ form_field(form.password) }}
        </div>
        <div class="form-check">
            {{ form.remember }} {{ form.remember.label }}
        </div>
        <div>
             {{ form.submit(class='btn btn-primary') }}
        </div>
    </form>
</div>
{% endblock content %}

3. 自定义验证器

验证器除了validators提供的外，还这次自定义，比如定义is_42这个函数作为全局的验证器。

def is_42(message=None):
    if message is None:
        message = 'Must be 42'

    def _is_42(form, field):
        if field.data != 42:
            raise ValidationError(message)

    return _is_42


class FortyTwoForm(FlaskForm):
    answer = IntegerField('The Number', validators=[is_42()])
    submit = SubmitField()

4. 上传单文件

通过FileField实现，在form.py中定义UploadForm表单

from flask_wtf.file import FileField, FileRequired, FileAllowed

class UploadForm(FlaskForm):
    photo = FileField('Upload Image', validators=[FileRequired(), FileAllowed(['jpg', 'jpeg', 'png', 'gif'])])
    submit = SubmitField()

app.py中数据处理逻辑

#   上传单文件
@app.route('/upload', methods=['GET', 'POST'])
def upload():
    form = UploadForm()
    if form.validate_on_submit():
        f = form.photo.data
        filename = random_filename(f.filename)
        f.save(os.path.join(app.config['UPLOAD_PATH'], filename))
        flash('Upload success!')
        session['filenames'] = [filename]
        return redirect(url_for('show_images'))
    return render_template('upload.html', form=form)
    
def random_filename(filename):
    ext = os.path.splitext(filename)[1]
    new_filename = uuid.uuid4().hex + ext
    return new_filename

upload.html中与之前的无疑，需要加的是enctype="multipart/form-data"

<form method="post", enctype="multipart/form-data">

5. 上传多文件

与单文件上传区别不大，改动有：

{{ form.photos(multiple="multiple") }}
request.files.getlist('photos') 获取文件列表

6. 单表单多按钮

class NewPostForm(FlaskForm):
    title = StringField('Title', validators=[DataRequired(), Length(1, 50)])
    body = TextAreaField('Body', validators=[DataRequired()])
    save = SubmitField('Save')
    publish = SubmitField('Publish')

#  单个表单多个提交按钮
@app.route('/two-submits', methods=['GET', 'POST'])
def two_submit():
    form = NewPostForm()
    if form.validate_on_submit():
        if form.save.data:
            flash("You click the save button.")
        elif form.publish.data:
            flash('You click the publis button')
        return redirect(url_for('index'))
    return render_template('2submit.html', form=form)

7. 单页面多表单

即一个页面中包含多个表单，处理方法有两种

7.1 单视图处理

处理逻辑是在定义表单类时，通过命名区别，比如submit1，submit2等

class SigninForm(FlaskForm):
    username = StringField('Username', validators=[DataRequired(), Length(1, 20)])
    password = PasswordField('Password', validators=[DataRequired(), Length(8, 128)])
    submit1 = SubmitField('Sign in')


class RegisterForm(FlaskForm):
    username = StringField('Username', validators=[DataRequired(), Length(1, 20)])
    email = StringField('Emails', validators=[DataRequired(), Length(1, 254), Email()])
    password = PasswordField('Password', validators=[DataRequired(), Length(8, 128)])
    submit2 = SubmitField('Register')

#  单个页面多个表单----单视图处理
@app.route('/multi-form', methods=['GET', 'POST'])
def multi_form():
    signin_form = SigninForm()
    register_form = RegisterForm()

    if signin_form.submit1.data and signin_form.validate_on_submit():
        username = signin_form.username.data
        flash('%s, you just submit sign in button' % username)
        return redirect(url_for('index'))

    if register_form.submit2.data and register_form.validate_on_submit():
        username = signin_form.username.data
        flash('%s, you just submit register button' % username)
        return redirect(url_for('index'))

    return render_template('2form.html', signin_form=signin_form, register_form=register_form)

7.2 多视图处理

处理逻辑是分离表单的渲染和验证实现。


class SigninForm2(FlaskForm):
    username = StringField('Username', validators=[DataRequired(), Length(1, 20)])
    password = PasswordField('Password', validators=[DataRequired(), Length(8, 128)])
    submit = SubmitField('Sign in')


class RegisterForm2(FlaskForm):
    username = StringField('Username', validators=[DataRequired(), Length(1, 20)])
    email = StringField('Emails', validators=[DataRequired(), Length(1, 254), Email()])
    password = PasswordField('Password', validators=[DataRequired(), Length(8, 128)])
    submit = SubmitField('Register')

#  单个页面多个表单----多视图处理
@app.route('/multi-form-multi-view')
def multi_form_multi_view():
    signin_form = SigninForm2()
    register_form = RegisterForm2()
    return render_template('2form2view.html', signin_form=signin_form, register_form=register_form)


@app.route('/handle-signin', methods=['POST'])
def handle_signin():
    signin_form = SigninForm2()
    register_form = RegisterForm2()

    if signin_form.validate_on_submit():
        username = signin_form.username.data
        flash('%s, you just submit sign in button' % username)
        return redirect(url_for('index'))

    return render_template('2form2view.html', signin_form=signin_form, register_form=register_form)


@app.route('/handle-register', methods=['POST'])
def handle_register():
    signin_form = SigninForm2()
    register_form = RegisterForm2()

    if register_form.validate_on_submit():
        username = register_form.username.data
        flash('%s, you just submit register button' % username)
        return redirect(url_for('index'))

    return render_template('2form2view.html', signin_form=signin_form, register_form=register_form)

<div class="basic-body">
    <h3>Sign In Form</h3>
    <form method="post", action="{{ url_for('handle_signin') }}">
        {{ signin_form.csrf_token }}
        <div class="form-group">
            {{ form_field(signin_form.username) }}
        </div>
        <div class="form-group">
            {{ form_field(signin_form.password) }}
        </div>
        <div>
             {{ signin_form.submit(class='btn btn-primary') }}
        </div>
    </form>
</div>
<div class="basic-body">
    <h3>Register Form</h3>
    <form method="post", action="{{ url_for('handle_register') }}">
        {{ register_form.csrf_token }}
        <div class="form-group">
            {{ form_field(register_form.username) }}
        </div>
        <div class="form-group">
            {{ form_field(register_form.email) }}
        </div>
        <div class="form-group">
            {{ form_field(register_form.password) }}
        </div>
        <div>
            {{ register_form.submit(class='btn btn-primary') }}
        </div>
    </form>
</div>

8. 总结

详细代码，请参考GitHub