Flask 学習メモ - Bootstrap フレームワークでの Web フォーム WTF の使用_html/css_WEB-ITnose

フォームの処理は一般に面倒で退屈です。フォームを簡単に使用したい場合は、WTF を Bootstrap に統合して、スタイルの問題を自動的に解決します。 . この記事はこれらを説明するためのものです。

まず第一に、WTF を使用するときは、プログラムで SECRET_KEY を設定する必要があることに注意してください。そうしないと、「csrf を使用するには Secret_key を提供する必要があります」エラーが発生します。

app.config['SECRET_KEY'] = 'xxxx'

Flask-Bootstrap については前の記事で説明したので繰り返しません。

バックエンド WTF エンコーディング

まず例を見てみましょう:

from flask.ext.wtf import Formfrom wtforms import StringField, SubmitField, SelectFieldfrom wtforms.validators import DataRequiredclass BookForm(Form):    name = StringField('姓名', validators=[DataRequired()])    phone = StringField('电话', validators=[DataRequired()])    photoset = SelectField('套系', choices=[('SET1', '1'), ('SET2', '2')])    submit = SubmitField("预定")    @app.route('/book/', methods=['GET', 'POST'])def book_photo():    name = None    phone = None    photoset = None    booker = BookForm()    if booker.validate_on_submit():        name = booker.name.data        phone = booker.phone.data        photoset = booker.photoset.data    return render_template('book_photo.html', form=booker, name=name, phone=phone, photoset=photoset)

BookForm は、2 つのテキスト ボックスとドロップダウン選択ボックスを含む、私たち自身が定義した Form オブジェクトです。

class BookForm(Form):    name = StringField('姓名', validators=[DataRequired()])    phone = StringField('电话', validators=[DataRequired()])    photoset = SelectField('套系', choices=[('SET1', '1'), ('SET2', '2')])    submit = SubmitField("预定")

validators は入力チェック用のコントローラーであり、ここで使用するのは文字長や入力タイプなどのコントローラーも多数ありますが、これらは使用しないでください。そうしないとエラーが報告されますので、この場所はしばらく使用しません（笑）。

book_photo() は /book/ の処理関数であり、テキスト ボックスをデフォルトで空に初期化し、render_template 関数でページとフォーム オブジェクトを指定します。

if booker.validate_on_submit():        name = booker.name.data        phone = booker.phone.data        photoset = booker.photoset.data

この処理はフォーム送信後にパラメータ値を受け取る処理ロジックであると同時に、

return render_template('book_photo.html', form=booker, name=name, phone=phone, photoset=photoset)

を使用して名前、電話番号、写真セットの値を book_photo.html ページに返します。

ページのコードを見てみましょう

フォームページ

{% extends "base.html" %}{% import "bootstrap/wtf.html" as wtf %}{% block page_content %}    <div class="page-header">        数据：        <p>        {% if name %}            {{ name }}        {% endif %}        <br />        {% if phone %}            {{ phone }}        {% endif %}        <br />        {% if photoset %}            {{ photoset }}        {% endif %}        </p>    </div>    {{ wtf.quick_form(form) }}{% endblock %}

bootstrap/wtf.html の基本テンプレートを使用しているため、非常に簡単です。これは bootstrap とうまく組み合わせられています。

重要なポイントは次のとおりです:

{{ wtf.quick_form(form) }}

wtf.quick_form 関数を使用してフォームを自動的に生成しました。これは非常に優れていますね。

    <div class="page-header">        数据：        <p>        {% if name %}            {{ name }}        {% endif %}        <br />        {% if phone %}            {{ phone }}        {% endif %}        <br />        {% if photoset %}            {{ photoset }}        {% endif %}        </p>    </div>

このセクションはフォーム送信後の送信データの表示についてなので、フォームと送信後のデータを 1 ページに表示できます。

結果を表示

かなり良いでしょう?

高度なリダイレクト セッション

フォームを送信した後の最後のリクエストは POST なので、ページを更新するとフォームが再送信されます。この問題はセッションをリダイレクトすることで解決できます (このトリックは「Post/」と呼ばれます)。リダイレクト/取得モード」)、リダイレクト セッションを通じてカスタマイズされたジャンプなどのより柔軟な制御を実現できます。

セッションをリダイレクトするには、セッションメカニズムを使用する必要があります。コードは次のとおりです:

from flask import Flask, render_template, send_from_directory, session, redirect, url_for@app.route('/book/', methods=['GET', 'POST'])def book_photo():    name = None    phone = None    photoset = None    booker = BookForm()    if booker.validate_on_submit():        session['name'] = booker.name.data        session['phone'] = booker.phone.data        session['photoset'] = booker.photoset.data        return redirect(url_for('book_photo'))    return render_template('book_photo.html', form=booker, name=session.get('name'), phone=session.get('phone'), photoset=session.get('photoset'))

Advanced-Flash メッセージ

メッセージをユーザーに通知するページが必要な場合は、Flash メッセージを使用できます。コードも非常に単純です:

from flask import Flask, render_template, send_from_directory, session, redirect, url_for, flash@app.route('/book/', methods=['GET', 'POST'])def book_photo():    name = None    phone = None    photoset = None    booker = BookForm()    if booker.validate_on_submit():        old_name = session.get('name')        if old_name is not None and old_name != booker.name.data:            flash('您的提交发生变化')        session['name'] = booker.name.data        session['phone'] = booker.phone.data        session['photoset'] = booker.photoset.data        return redirect(url_for('book_photo'))    return render_template('book_photo.html', form=booker, name=session.get('name'), phone=session.get('phone'), photoset=session.get('photoset'))

フィールド値の変更、プロンプト情報の設定

        if old_name is not None and old_name != booker.name.data:            flash('您的提交发生变化')

ページ上での処理も必要です:

{% extends "base.html" %}{% import "bootstrap/wtf.html" as wtf %}{% block page_content %}    <div class="page-header">        数据：        <p>        {% if name %}            {{ name }}        {% endif %}        <br />        {% if phone %}            {{ phone }}        {% endif %}        <br />        {% if photoset %}            {{ photoset }}        {% endif %}        </p>    </div>    {% for message in get_flashed_messages() %}    
        ×        {{ message }}    {% endfor %}    
    {{ wtf.quick_form(form) }}{% endblock %}

for/endfor を通じて制御され、ブートストラップ スタイルも使用されます

{% for message in get_flashed_messages() %}<div class="alert alert-warning">    <button type="button" class="close" data-dismiss="alert">&times;</button>    {{ message }}{% endfor %}

効果は次のとおりです: