フラスコへのイントロ：連絡先ページの追加

このミニシリーズの前の記事では、フラスコを使用して、他のフラスコベースのWebアプリに適用できる一般化されたワークフローを使用して、「ホーム」と「約」ページを含むシンプルなWebサイトを構築しました。このレッスンでは、ユーザーがメッセージを送信できるようにする連絡先ページを追加する方法を示します。この記事で使用されているコードはGitHubで見つけることができます。 

フラスコ拡張機能

---

フラスコには、棚から多くの機能が備わっていないため、簡単に習得して学習できます。コンテンツを追加および更新するためのデータベースインタラクションまたは管理インターフェイス用のオブジェクトリレーショナルマッパーはありません。既に使用している2つの関数のみを提供します。Render_template（）

。

追加機能を使用して出荷する代わりに、Flaskの拡張モデルを使用すると、必要に応じて機能を追加できます。 Flask拡張機能は、アプリに特定の機能を追加するパッケージです。たとえば、Flask-Sqlalchemyはアプリにデータベースサポートを追加しますが、Flask-Loginはログイン/ログアウトサポートを追加します。 Flask拡張レジストリに拡張機能の完全なリストを見つけることができます。

連絡先ページを作成するには、Flask-wtfを使用してフォームデータを処理および検証し、Flask-mailをフォームデータをメールで送信してメールでメールで送信します。それはどういう意味ですか？次の図を見てください：

---

ユーザーは、フォームを含むWebページのGETリクエストを発行します。

ユーザーはフォームに記入します。フィールドは検証されません。フォームを含むWebページは、役立つエラーメッセージで再度ロードされ、ユーザーに再試行するように求められます。

すべてのフィールドが検証する場合、フォーム情報はパイプラインの次のステップで使用されます。フラスコでは、フォームを

routes.py
1. 内部の関数に投稿します。この関数はフォームハンドラーと呼ばれます。いくつかの検証チェックを実行します。入力のいずれかがマスターに合格しない場合は、ページを更新してエラーを説明するメッセージを表示します。すべての検証チェックが渡されたら、次のステップにフォームデータを使用します。これは、Webサイトの所有者であるメッセージをメールで送信します。
2. フォームの取り扱いと検証の仕組みです。今、私たちは実際にどこでフォームを定義しますか？ pythonスクリプトへのアクション
属性を使用してHTMLを記述できます。 Pythonスクリプトは、各フォームフィールドをキャプチャし、フォームフィールドデータを検証するためにフォームをミラーリングします。ただし、この戦略を使用すると、本質的にフォームを2回定義します。フロントエンドとバックエンドの場合は1回です。

フォームを一度だけ定義するのは素晴らしいことです：pythonスクリプト。これはまさにFlask-WTFが私たちにできることです。フォームをPythonスクリプトで一度だけ定義し、Flask-WTFにフォームのHTMLを生成させます。このすべてのポイントは、プレゼンテーションをコンテンツから分離することです。コードしましょう。

フォームを作成して、最初のステップとして、前回作成した孤立した開発環境に戻りましょう。すでに

routes.py

があり、機能するようにURLをマッピングしています。無関係なコードでそれを乱雑にしないでください。代わりに、

forms.py

と呼ばれる新しいファイルを作成し、

app/

$ cd flaskapp<br>$ . bin/activate<br>

フォルダーの内側に配置します。私たちは何をしましたか？まず、＆lt; input type = "text"＆gt; name＆lt;/input＆gt;

から継承するFlask-wtf contactform

からいくつかの有用なクラスをインポートしました。スクリプト。

pip install -U Flask-WTF<br>

app/routes.py 次に、クロスサイトリクエスト偽造（CSRF）として知られるセキュリティエクスプロイトを処理するようにFlask-wtfを構成します。完璧な世界では、サーバーはWebアプリに属する​​フォームのみを処理します。言い換えれば、サーバーは作成したフォームのみを処理および検証します。ただし、攻撃者が自分のウェブサイトでフォームを作成し、悪意のある情報を入力し、サーバーに送信することができます。サーバーがこの悪意のある情報を受け入れると、あらゆる種類の悪いことが次に発生する可能性があります。

フォームの提出がWebアプリから発生することを確認することにより、CSRF攻撃を防ぐことができます。これを行う1つの方法は、HTML /連絡先の内部に隠された一意のトークンを保持することです。このWebテンプレートはまもなく作成します。 ここでは、まだやるべきことがあります。上の図は、GETリクエストがサーバーに送信された場合、フォームを含むWebページを取得してブラウザにロードする必要があることを示しました。サーバーがPOSTリクエストを受信した場合、関数はフォームフィールドデータをキャプチャし、有効かどうかを確認する必要があります。 Pythonの用語では、このロジックは、前の記事でrender_template（）

のif ... else

from flask_wtf import FlaskForm<br>from wtforms import StringField, TextAreaField, SubmitField<br><br><br><br>class ContactForm(FlaskForm):<br>  name = StringField("Name")<br>  email = StringField("Email")<br>  subject = StringField("Subject")<br>  message = TextAreaField("Message")<br>  submit = SubmitField("Send") <br>

ロジックで表現できます。したがって、ここでは、現在のHTTPメソッドがGETまたは投稿であるかどうかを決定します。次は、contact（）

function（行9-13）です。 POSTリクエストの場合、フォームが投稿されたことを示す文字列が返されます。

この文字列は一時的なプレースホルダーであり、この記事の最終ステップで実際のコードに置き換えます。それ以外の場合、リクエストがgetを使用した場合、フォームを含むWebテンプレートcontact.html。フォルダー。

app/templates/contact.html

home.htmland

about.html

$ cd flaskapp<br>$ . bin/activate<br>

、extends へのアクション属性を設定することにより、送信に関するフォームデータを送信する場所を指定します。 contact（）executesにマッピングされます。 html。レンダリングされたhtmlはroutes.pyroutes.pyに送り返されます。ボタン。しかし、ユーザーがフォームに適切に記入しない場合はどうなりますか？ユーザーの入力を検証する必要があります。これにより、後の手順で問題が発生しないようにします。フォーム検証は、フォームバリデーターを使用して実行されます。幸いなことに、Flask-WTFには、すぐに使用できる多くの便利な組み込みのバリデーターが付属しています。これらのバリデーターは、[validators = datarequired（）]から各フォームフィールドに[validators = datarequired（）]
3. から内蔵されたバリデーターに入力して、その存在を検証します。このバリデーターがPythonリスト内にあることに注意してください。つまり、このリストにさらにバリデーターを簡単に追加できることに注意してください。次に、パターン電子メール（） validatorのインストールを必要とするために電子メールアドレスが必要になるため、次のようにPIPをインストールする必要があります。次のとおりです。
4. フォームの検証に役立ちます。
5. エラーメッセージの点滅元の図を振り返ると、検証チェックが失敗した場合は、ユーザーがミスを修正してもう一度試してみることができます。このエラーメッセージは、誤りが修正されたときに検証が失敗し、消えるときにのみ表示される必要があります。 Flaskは、スクリプトの先頭にFlash（）
関数を使用することにより、これを非常に簡単にします。

$ cd flaskapp<br>$ . bin/activate<br>

連絡先フォームがサーバーに投稿した後、検証障害はフォームを役立つエラーメッセージでリロードする必要があります。それ以外の場合、入力データは将来の処理に使用できます。繰り返しになりますが、このロジックは、ifのifロジックのif request.method == 'post'：

app/routes.py

pip install -U Flask-WTF<br>

で検証チェックが失敗した場合、False

で表現できます。フォームが正常に送信されたことを示しているに掲載されている

を示します。次に、これらの一時的なエラーメッセージを受信および表示できるように、

from flask_wtf import FlaskForm<br>from wtforms import StringField, TextAreaField, SubmitField<br><br><br><br>class ContactForm(FlaskForm):<br>  name = StringField("Name")<br>  email = StringField("Email")<br>  subject = StringField("Subject")<br>  message = TextAreaField("Message")<br>  submit = SubmitField("Send") <br>

contact.htmlを変更しましょう。次のブロックを参照してください：

ループの関数。このコードブロックを

contact.htmlafter＆lt; form＆gt;タグに追加します。プリティ。

from flask import Flask, render_template<br>from forms import ContactForm<br>

Main.CSS ]をクリックして、フォームの検証とエラーメッセージの点滅作業をテストしてください。検証チェックが失敗した場合、連絡先フォームにエラーメッセージを正常に送信しました。私たちは実際に少しうまくやることができます。すべての失敗した検証チェックに対して1つの一般的なエラーメッセージを持つ代わりに、失敗した検証チェックごとに特定のエラーメッセージがあることをお勧めします。たとえば、ユーザーがサブジェクトフィールドに入力するのを忘れた場合、名前を入力してくださいを入力してください。これを非常に簡単に達成できますので、各バリデーター内に

フォームに特定のエラーメッセージを書き込むことから始めましょう。次に、これらの特定のエラーメッセージを受信および表示するために、

contact.htmlを変更しましょう。以前は、各フォームフィールドの関数エラー属性に依存して、特定のエラーメッセージをプルし、jinja2メッセージ

とメッセージ

{% extends "layout.html" %}<br>{% block content %}<br><br>  <h2 id="Contact">Contact</h2><br>  <br>  


{{ form.hidden_tag() }}
{{ form.name.label }}
{{ form.name }}
{{ form.email.label }}
{{ form.email }}
{{ form.subject.label }}
{{ form.subject }}
{{ form.message.label }}
{{ form.message }}
{{ form.submit }}


{% endblock %}
クラスを使用してそれらの上にループし、新しい電子メールとapp.config ["mail_username"]

おそらく、グループがsupport@example.comのような連絡先メールアドレスを使用しているのを見たことがあります。独自のドメインを所有していて、新しい連絡先メールアドレスを作成できる場合は、先に進んで、そのメールアドレスをrequest.method == 'post'：ブロックに入れてください。フォーム内にロジックを既に追加しています。validate（）は他のブロックになります。したがって、メッセージの内部にロジックを追加して、クラスに件名、「from」アドレス、および "アドレスを取ります。次に、app.config ["mail_username"]を使用して、連絡先フォームのサブジェクトフィールドデータを収集します。電子メールは個人のメールアドレスに送信され、新しいメッセージを受信して​​応答できます。

次に、メール自体（11〜14行目）を書きます。ユーザーの名前、電子メール、メッセージを含めます。 Pythonの文字列フォーマットオペレーターMail.send（MSG）を使用して、電子メールを送信します（15行目）。 http：// localhost：5000/contactにアクセスし、各フィールドに記入し、[送信]をクリックします。すべてがうまくいけば、Flaskアプリから新しい電子メールが届きます。

contact.html

。

true

を配置します。ありがとうメッセージを表示します。それ以外の場合は、連絡先フォームを表示します。

routes.py

で開始しました。 ％}は、routes.pyから送信した成功フラグが＆lt; p＆gt;あなたのメッセージに感謝している場合を意味します。まもなくご連絡いたします。それ以外の場合は、＆lt; header＆gt;要素を使用して... else

ステートメントに従ってください。また、連絡先ページ（8行目）（

フラスコ拡張機能は、フラスコベースのアプリの機能を拡張するシンプルで強力なツールです。

Flask Extensionレジストリをチェックして、アプリに統合できるさらに多くの拡張機能を調査してください。

以上がフラスコへのイントロ：連絡先ページの追加の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。