Flask WTF

웹 애플리케이션의 중요한 측면 중 하나는 사용자에게 사용자 인터페이스를 제공하는 것입니다. HTML은 <form> 태그를 제공하여 인터페이스를 설계할 수 있으며, 텍스트 입력, 라디오 버튼, 선택 등의 표单 요소를 적절히 사용할 수 있습니다.

GET이나 POST 메서드를 사용하여 사용자 입력 데이터를 HTTP 요청 메시지로 서버 측 스크립트에 제출합니다.

서버 측 스크립트는 HTTP 요청에서 데이터를 가져와 표单 요소를 다시 생성해야 합니다. 따라서 실제로는 표单 요소가 두 번 정의되어야 합니다. - 하나는 HTML, 다른 하나는 서버 측 스크립트입니다. HTML 표单의 또 다른 단점은 표单 요소를 동적으로 표시하는 것이 어렵거나 불가능하기 때문입니다. HTML 자체는 사용자 입력을 검증할 수 없습니다.

이것이 WTForms입니다. 유연한 표单, 렌더링 및 검증 라이브러리를 쉽게 사용할 수 있는 Flask입니다.-WTF 확장은 WTForms 라이브러리에 간단한 인터페이스를 제공합니다.

Flask를 사용하여-WTF는 Python 스크립트에서 표单 필드를 정의하고 HTML 템플릿을 사용하여 표시할 수 있으며, 또한 WTForms 필드에 대한 검증을 적용할 수 있습니다.

이제 이 동적 HTML 생성 방식이 어떻게 작동하는지 확인해 보겠습니다.

먼저, Flask를 설치해야 합니다.-WTF 확장.

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　ko.oldtoolbag.com
#　Date　:　2020-08-08
pip install flask-WTF

설치된 소프트웨어 패키지에는 Form 클래스가 포함되어 있으며, 이 클래스는 사용자 정의 표单의 부모로 사용해야 합니다. WTforms 패키지는 다양한 표单 필드 정의를 포함하고 있습니다. 다음은 몇 가지 표준 표单 필드를 나열했습니다.

예를 들어, 다음과 같은 텍스트 필드를 포함한 폼을 설계할 수 있습니다 -

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　ko.oldtoolbag.com
#　Date　:　2020-08-08
from flask_wtf import Form
　from wtforms import TextField
　class ContactForm(Form):
　　　　　name = TextField("학생 이름")

name 필드 외에도, CSRF 토큰의 숨겨진 필드도 자동으로 생성됩니다. 이는 XSS 공격을 방지하기 위해 필요합니다.

렌더링 시, 이는 다음과 같은等效 HTML 스크립트를 생성합니다.

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　ko.oldtoolbag.com
#　Date　:　2020-08-08
<input id="csrf_token" name="csrf_token" type="hidden">　/>
　<label for="name">학생 이름/label><br>
　<input id="name" name="name" type="text" value="">　/>

사용자 정의 폼 클래스는 Flask 애플리케이션에서 사용되며, 폼은 템플릿으로 표시됩니다.

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　ko.oldtoolbag.com
#　Date　:　2020-08-08
from flask import Flask, render_template
　from　forms　import　ContactForm
　app　=　Flask(__name__)
　app.secret_key　=　'development　key'
　@app.route('/contact')
　def　contact():
　　　　　form　=　ContactForm()
　　　　　return　render_template('contact.html',　form　=　form)
　if　__name__　==　'__main__':
　　　　　app.run(debug　=　True)

WTForms 패키지는 입력 필드를 검증할 때 매우 유용한 Validator 클래스를 포함합니다. 다음은 일반적으로 사용되는 Validator 목록입니다.

연락처 양식의 name 필드에 'DataRequired' 검증 규칙을 적용합니다.

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　ko.oldtoolbag.com
#　Date　:　2020-08-08
name = TextField("Name Of Student", [validators.Required("Please enter your name.")])

양식 객체의 validate() 함수는 양식 데이터를 검증하고, 검증 실패 시 검증 오류를 발생시킵니다. 오류 메시지는 템플릿으로 전달됩니다. HTML 템플릿에서 오류 메시지는 동적으로 표시됩니다.

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　ko.oldtoolbag.com
#　Date　:　2020-08-08
{%　for　message　in　form.name.errors　%}
　　　　{{ message }}
　{%　endfor　%}

아래는 위에서 제공된 개념을 시연한 예제입니다. 연락처 양식 코드는 다음과 같습니다 ( forms.py)。

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　ko.oldtoolbag.com
#　Date　:　2020-08-08
from flask_wtf import Form
　from wtforms import TextField, IntegerField, TextAreaField, SubmitField, RadioField, SelectField
　from wtforms import validators, ValidationError
　class ContactForm(Form):
　　　　　name = TextField("학생 이름", [validators.Required("Please enter your name.")])
　　　　　Gender = RadioField('성별', choices = [('M', 'Male'), ('F', 'Female')])
　　　　　Address = TextAreaField("주소")
　　　　　email = TextField("Email", [validators.Required("Please enter your email address.")])
　　　　　　　validators.Email("Please enter your email address.")])
　　　　　Age = IntegerField("연령")
　　　　　language = SelectField('언어', choices = [('cpp', 'C'))++'), ('py', 'Python')])
　　　　　submit = SubmitField("提交")

버스터가 이름과 이메일 필드에 적용됩니다. 아래는 Flask 애플리케이션 스크립트입니다 ( formexample.py)。

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　ko.oldtoolbag.com
#　Date　:　2020-08-08
from　flask　import　Flask,　render_template,　request,　flash
　from　forms　import　ContactForm
　app　=　Flask(__name__)
　app.secret_key　=　'development　key'
　@app.route('/contact',　methods　=　['GET',　'POST'])
　def　contact():
　　　　　form　=　ContactForm()
　　　　　if　request.method　==　'POST':
　　　　　　　　if　form.validate()　==　False:
　　　　　　　　　　　flash('All　fields　are　required.')
　　　　　　　　　　　return　render_template('contact.html',　form　=　form)
　　　　　　　　else:
　　　　　　　　　　　return　render_template('success.html')
　　　　　elif　request.method　==　'GET':
　　　　　　　　　　　return　render_template('contact.html',　form　=　form)
　if　__name__　==　'__main__':
　　　　　app.run(debug　=　True)

템플릿의 스크립트( contact.html)如下所示 -

#　Filename　:　example.py
#　Copyright　:　2020　By　w3codebox
#　Author　by　:　ko.oldtoolbag.com
#　Date　:　2020-08-08
<html>
　<head>
　<meta　http-equiv="Content-Type"　content="text/html;　charset=utf-8"　/>
　<title>Flask 예제</title>
　</head>
　　　　<body>
　　　　　　<h2　style　=　"text-align:　center;">연락처 양식</h2>
　　　　　　　{%　for　message　in　form.name.errors　%}
　　　　　　　　　　<div>{{　message　}}</div>
　　　　　　　{%　endfor　%}
　　　　　　　{%　for　message　in　form.email.errors　%}
　　　　　　　　　　<div>{{　message　}}</div>
　　　　　　　{%　endfor　%}
　　　　　　　<form　action　=　"http://localhost:5000/contact"　method　=　post>
　　　　　　　　　　<fieldset>
　　　　　　　　　　　　　<legend>填写项</legend>
　　　　　　　　　　　　　{{　form.hidden_tag()　}}
　　　　　　　　　　　　　<div　style　=　font-size:20px;　font-weight:bold;　margin-left:150px;>
　　　　　　　　　　　　　　　　{{　form.name.label　}}<br>
　　　　　　　　　　　　　　　　{{　form.name　}}
　　　　　　　　　　　　　　　　<br>
　　　　　　　　　　　　　　　　{{　form.Gender.label　}}　{{　form.Gender　}}
　　　　　　　　　　　　　　　　{{　form.Address.label　}}<br>
　　　　　　　　　　　　　　　　{{　form.Address　}}
　　　　　　　　　　　　　　　　<br>
　　　　　　　　　　　　　　　　{{　form.email.label　}}<br>
　　　　　　　　　　　　　　　　{{　form.email　}}
　　　　　　　　　　　　　　　　<br>
　　　　　　　　　　　　　　　　{{　form.Age.label　}}<br>
　　　　　　　　　　　　　　　　{{　form.Age　}}
　　　　　　　　　　　　　　　　<br>
　　　　　　　　　　　　　　　　{{　form.language.label　}}<br>
　　　　　　　　　　　　　　　　{{　form.language　}}
　　　　　　　　　　　　　　　　<br>
　　　　　　　　　　　　　　　　{{　form.submit　}}
　　　　　　　　　　　　　</div>
　　　　　　　　　　</fieldset>
　　　　　　　</form>
　　　　</body>
　</html>

Python 셸에서 실행 formexample.py에 접근하여 URL => http://localhost:5000/contact. 연락처 양식은 다음과 같이 표시됩니다

에러 메시지가 있으면 페이지는 다음과 같이 표시됩니다 -

에러가 없으면 다음과 같이 표시됩니다 success.html페이지의 내용은 다음과 같습니다 -