ここまで一部最初のurlの部分でページを切り替える以外は静的なコンテンツ表示方法をやってきた。
データベースと連携していくにはどうしてもこっちから検索ワードを投げて、結果を返してもらう等、サーバーとクライアントでデータをやり取りする必要が出てくる。
なので次はクライアントからデータを投げて、なにかしらレスポンスを返すという例を作っていく。
flask-WTF
$ pip3 install flask-wtf
hello.py
from flask_wtf import FlaskForm from wtforms import StringField, SubmitField from wtforms.validators import Required
と３つインポートする。
FlaskFormがFormの機能に必要なもの
StringFieldはテキストを入れる枠
SubmitFieldが投稿するボタン
そのほか使いそうなものとしては
PasswordField パスワード入力
RadioField ラジオボタン
SelectField ドロップダウンリスト
SelectMultipleField 複数の項目のドロップダウンリスト
FileField ファイルアップロード窓
などがあるようだ。
validatorsはその名の通り認証関連
Requiredはfieldにちゃんと入力されているかをチェックするもの
なにも入れずにsubmitボタンを押したら
こんな感じ。
index.html
{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block title %}Flasky{% endblock %}
{% block page_content %}
<div class="page-header">
<h1>Hello, {% if name %}{{ name }}{% else %}Stranger{% endif %}!</h1>
</div>
{{ wtf.quick_form(form) }}
{% endblock %} <h1>Hello, {% if name %}{{ name }}{% else %}Stranger{% endif %}!</h1>ここでhello.pyに渡されたnameを受け取る最初のアクセスではnameがFalseなのでStrangerがひょうじされるのだね。
formの部分を表示するのが
{% import "bootstrap/wtf.html" as wtf %}の部分で、
venv3/lib/python3.6/site-packages/flask_bootstrap/templates/bootstrap/wtf.html
をみると結構長いファイル。この中の一部分を利用しているわけだな。
{{ wtf.quick_form(form) }}
ここに相当する部分だから
{% macro quick_form(form,
action="",
method="post",
extra_classes=None,
role="form",
form_type="basic",
horizontal_columns=('lg', 2, 10),
enctype=None,
button_map={},
id="",
novalidate=False) %}
{#-
action="" is what we want, from http://www.ietf.org/rfc/rfc2396.txt:
4.2. Same-document References
A URI reference that does not contain a URI is a reference to the
current document. In other words, an empty URI reference within a
document is interpreted as a reference to the start of that document,
and a reference containing only a fragment identifier is a reference
to the identified fragment of that document. Traversal of such a
reference should not result in an additional retrieval action.
However, if the URI reference occurs in a context that is always
intended to result in a new request, as in the case of HTML's FORM
element, then an empty URI reference represents the base URI of the
current document and should be replaced by that URI when transformed
into a request.
-#}
{#- if any file fields are inside the form and enctype is automatic, adjust
if file fields are found. could really use the equalto test of jinja2
here, but latter is not available until 2.8
warning: the code below is guaranteed to make you cry =(
#}
{%- set _enctype = [] %}
{%- if enctype is none -%}
{%- for field in form %}
{%- if field.type == 'FileField' %}
{#- for loops come with a fairly watertight scope, so this list-hack is
used to be able to set values outside of it #}
{%- set _ = _enctype.append('multipart/form-data') -%}
{%- endif %}
{%- endfor %}
{%- else %}
{% set _ = _enctype.append(enctype) %}
{%- endif %}
<form
{%- if action != None %} action="{{action}}"{% endif -%}
{%- if id %} id="{{id}}"{% endif -%}
{%- if method %} method="{{method}}"{% endif %}
class="form
{%- if extra_classes %} {{extra_classes}}{% endif -%}
{%- if form_type == "horizontal" %} form-horizontal
{%- elif form_type == "inline" %} form-inline
{%- endif -%}
"
{%- if _enctype[0] %} enctype="{{_enctype[0]}}"{% endif -%}
{%- if role %} role="{{role}}"{% endif -%}
{%- if novalidate %} novalidate{% endif -%}
>
{{ form.hidden_tag() }}
{{ form_errors(form, hiddens='only') }}
{%- for field in form %}
{% if not bootstrap_is_hidden_field(field) -%}
{{ form_field(field,
form_type=form_type,
horizontal_columns=horizontal_columns,
button_map=button_map) }}
{%- endif %}
{%- endfor %}
</form>
{%- endmacro %}ここだよな。
この組み合わせでうまく表示されるみたい。何をやっているのかはわからなくても使えるというタイプのものなんだろうか。
class NameForm(FlaskForm):
name = StringField('What is your name?', validators=[Required()])
submit = SubmitField('Submit')
#NameFormという名前でクラスを設定
# StringFieldからnameを、SubmitFieldを押したらsubmitが返る@app.route('/', methods=['GET', 'POST'])
def index():
name = None
#初期値は空欄
form = NameForm()
#NameForm()の結果をformに入れる
if form.validate_on_submit():
#formの中のvalidate_on_submit()がTrueなら
name = form.name.data
#formからname.dataを取り出してnameに入れる
form.name.data = ''
#formのname.dataを消す（読み込んだあとは元の空欄に戻る）
return render_template('index.html', form=form, name=name)
#index.htmlにformとnameを渡してrenderingといった感じかな。
