Question

当前，使用Flask，我有一个带有一个（长）表格的主页，供用户填写。但是，我想将此表格分成多个部分，并使用“下一步”按钮进行遍历（有点像在网上购买商品时，必须经过不同的页面来填写您的信息）。到目前为止，我已经尝试了以下方法：

在首页html中实现多个“提交”按钮：

{% extends 'layout.html' %}

{% block body %}
    <div class="content-section">
        <form method="POST" action="">
            {{ form.hidden_tag() }}
            <fieldset class="form-group">
                <legend class="border-bottom mb-4">Pipeline Input</legend>
                <div class="form-group required">
                    {{ form.stack_name.label(class="form-control-label") }}
                    {{ form.deploy_bucket(class="form-control form-control-lg") }}
                </div>
                <div class="form-group required">
                    {{ form.key_pair.label(class="form-control-label") }}
                    {{ form.key_pair(class="form-control form-control-lg") }}
                </div>
                <div class="form-group required">
                    {{ form.start_point.label(class="form-control-label") }}
                    {{ form.start_point(class="form-control form-control-lg") }}
                </div>
                <div class="form-group">
                    {{ form.qc.label(class="form-control-label") }}
                    {{ form.qc(class="form-control form-control-lg") }}
                </div>
                    {{ form.submit_1(class="btn btn-outline-info") }}
                <div class="form-group required">
                    {{ form.input_uri.label(class="form-control-label") }}
                    {{ form.input_uri(class="form-control form-control-lg") }}
                </div>
                <div class="form-group required">
                    {{ form.output_uri.label(class="form-control-label") }}
                    {{ form.output_uri(class="form-control form-control-lg") }}
                </div>
                <div class="form-group required">
                    {{ form.ref_uri.label(class="form-control-label") }}
                    {{ form.ref_uri(class="form-control form-control-lg") }}
                </div>
                <div class="form-group required">
                    {{ form.user_assets_uri.label(class="form-control-label") }}
                    {{ form.user_assets_uri(class="form-control form-control-lg") }}
                </div>
                    {{ form.submit_2(class="btn btn-outline-info") }}
                <div class="form-group">
                    {{ form.target.label(class="form-control-label") }}
                    {{ form.target(class="form-control form-control-lg") }}
                </div>
                <div class="form-group required">
                    {{ form.package_name.label(class="form-control-label") }}
                    {{ form.package_name(class="form-control form-control-lg") }}
                </div>
                <div class="form-group required">
                    {{ form.license_name.label(class="form-control-label") }}
                    {{ form.license_name(class="form-control form-control-lg") }}
                </div>
                {{ form.submit_final(class="btn btn-outline-info") }}
            </div>
            </fieldset>
            </div class="form-group">
            </div>  
        </form>
        <p>{{ error }}</p>
    </div>

{% endblock %}

在此处定义表单输入：

from flask_wtf import FlaskForm
from wtforms import StringField, TextField, SubmitField, IntegerField, SelectField, validators

class InputForm(FlaskForm):

    stack_name = StringField('STACK NAME', validators=[validators.required()])
    deploy_bucket = SelectField('DEPLOYMENT BUCKET', validators=[validators.required()])
    key_pair = SelectField('KEY PAIR', validators=[validators.required()])
    start_point = SelectField('START POINT', validators=[validators.required()], choices=[("", "---"), ("", "fastq"), ("", "bam"), ("", "hdof"), ("", "gvcf"), ("", "vcf")])
    qc = SelectField('QC', choices=[("", "---"), ("","BAM"), ("","VCF")])

    submit_1 = SubmitField('Next')

    input_uri = StringField('INPUT BUCKET', validators=[validators.required()])
    output_uri = StringField('OUTPUT BUCKET', validators=[validators.required()])
    ref_uri = SelectField('REFERENCE BUCKET', validators=[validators.required()])
    user_assets_uri = StringField('USER ASSETS BUCKET', validators=[validators.required()])

    submit_2 = SubmitField('Next')

    target = StringField('TARGET')
    package_name = StringField('PACKAGE NAME', validators=[validators.required()])
    license_name = StringField('LICENSE NAME', validators=[validators.required()])

    submit_final = SubmitField('Execute Pipeline')

这是我的app.py，用于处理表单数据。目前仍只设置一个提交按钮，因此我不确定如何在此处处理“下一个”按钮/分页：

@app.route('/', methods=['GET', 'POST'])
def pipeline():
    form = InputForm(request.form)
    form.deploy_bucket.choices = [("", "---")] + [("", bucket["Name"]) for bucket in app.config['S3_CLIENT'].list_buckets()["Buckets"]]
    form.ref_uri.choices = [("", "---")] + [("", bucket["Name"]) for bucket in app.config['S3_CLIENT'].list_buckets()["Buckets"]]
    form.key_pair.choices = [("", "---")] + [("", pair["KeyName"]) for pair in app.config['EC2_CLIENT'].describe_key_pairs()["KeyPairs"]]

    if request.method == 'POST':
        STACK_NAME = form.stack_name.data
        DEPLOY_BUCKET = form.deploy_bucket.data
        KEY_PAIR = form.key_pair.data
        START_POINT = form.start_point.data
        QC = form.qc.data
        INPUT_URI = form.input_uri.data
        OUTPUT_URI = form.output_uri.data
        REF_URI = form.ref_uri.data
        USER_ASSETS_URI = form.user_assets_uri.data
        TARGET = form.target.data
        PACKAGE_NAME = form.package_name.data
        LICENSE_NAME = form.license_name.data

        flash('The pipeline has been executed!', 'success')

        dic = {
                "STACK_NAME": STACK_NAME, 
                "DEPLOY_BUCKET": DEPLOY_BUCKET,
                "KEY_PAIR": KEY_PAIR,
                "START_POINT": START_POINT,
                "QC": QC,
                "INPUT_URI": INPUT_URI,
                "OUTPUT_URI": OUTPUT_URI,
                "REF_URI": REF_URI,
                "USER_ASSETS_URI": USER_ASSETS_URI,
                "LOCAL_ASSETS_DIR": LOCAL_ASSETS_DIR,
                "SAMPLE_FILE": SAMPLE_FILE,
                "TARGET": TARGET,
                "PACKAGE_NAME": PACKAGE_NAME,
                "LICENSE_NAME": LICENSE_NAME,
              }

        proc = subprocess.Popen('pwd', shell=True, stdout=subprocess.PIPE)

        with open("input.json", 'w') as f:
            json.dump(dic, f)

        proc = subprocess.Popen('python pipeline.py -p', shell=True, stdout=subprocess.PIPE)

        return redirect(url_for('dashboard'))

    return render_template('pipeline.html', title='Pipeline Input', form=form)

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

Answer 1

如果您坚持要使用Flask来完成此任务，那么最简单的方法就是将您的表单分成多个表单，也许是按类别。处理完表单后，您的flask代码将重定向到下一个表单。

但是，尤其是在2018年，这应该在客户端而不是服务器端完成。原因是您的问题实际上与负责处理表单的Flask无关，而与负责显示表单的前端无关。

优点很多。首先，您可以一次加载整个表单，但是可以对每次显示的内容进行分块处理。这样一来，您只需提交一个表格即可使Flask代码保持简单，但可以精确控制显示给用户的内容。此外，您还将减少从客户端到服务器的往返次数，这将为您的用户提供更好的性能。

如果您希望避免编写字体结尾的分页代码，则可以使用一些解决方案将其集成到表单中。我个人已经成功使用Bootstrap's Pagination功能。

如何使用“下一步”按钮对烧瓶形式进行分页？

1 个答案: