WTF Flask

Un aspetto importante di un'applicazione web è fornire un'interfaccia utente all'utente. HTML fornisce un etichetta <form> per progettare un'interfaccia. È possibile utilizzare opportunamente gli elementi del modulo, come input di testo, pulsanti di opzione, selezioni, ecc.

I dati di input dell'utente devono essere inviati allo script di server in forma di messaggio di richiesta HTTP tramite metodo GET o POST.

Lo script di server deve ricreare gli elementi del modulo dal dati della richiesta http. Di conseguenza, gli elementi del modulo devono essere definiti due volte - una volta in HTML e una volta nello script di server. Un altro svantaggio degli HTML di modulo è che è difficile (se non impossibile) rappresentare dinamicamente gli elementi del modulo. HTML stesso non può convalidare l'inserimento dell'utente.

Questo è WTForms, un comodo repository per librerie flessibili di rendering e convalida dei moduli. L'estensione Flask-WTF fornisce un'interfaccia semplice per questa libreria WTForms.

Con Flask-WTF, è possibile definire campi di modulo in uno script Python e rappresentarli utilizzando un template HTML. È anche possibile applicare la convalida ai campi WTF.

Ora vediamo come funziona la generazione dinamica di HTML.

Prima di tutto, è necessario installare l'estensione Flask-WTF.

# Nome file: example.py
# Copyright: 2020 Da w3codebox
# Autore: it.oldtoolbag.com
# Data: 2020-08-08
pip install flask-WTF

Il pacchetto di software installato contiene una classe Form, che deve essere utilizzata come superclasse per i moduli definiti dall'utente. Il pacchetto WTforms contiene definizioni di vari campi di modulo. Di seguito è riportato un elenco di campi di modulo standard.

Numero	Campo di modulo standard	Descrizione
1	TextField	Rappresenta l'elemento HTML di modulo <input type='text'>
2	CampoBooleano	Rappresenta l'elemento del modulo HTML<input type='checkbox'>
3	DecimalField	Campo di testo per visualizzare numeri decimali
4	IntegerField	Campo di testo per visualizzare numeri interi
5	RadioField	Rappresenta l'elemento del modulo HTML<input type='radio'>
6	SelectField	Rappresenta l'elemento del modulo
7	TextAreaField	Rappresenta l'elemento del modulo HTML<testarea>
8	PasswordField	Rappresenta l'elemento del modulo HTML<input type='password'>
9	SubmitField	Rappresenta l'elemento del modulo<input type='submit'>

Ad esempio, è possibile progettare un modulo che contiene campi di testo, come segue -

Esempio

# Nome file: example.py
# Copyright: 2020 Da w3codebox
# Autore: it.oldtoolbag.com
# Data: 2020-08-08
from flask_wtf import Form
　from wtforms import TextField
　class ContactForm(Form):
　　　　　name = TextField("Nome dello Studente")

Oltre al campo name, verrà automaticamente creato un campo nascosto per il token CSRF. Questo è per prevenire gli attacchi di frode XSS.

Durante la rendering, questo genererà uno script HTML equivalente, come segue.

# Nome file: example.py
# Copyright: 2020 Da w3codebox
# Autore: it.oldtoolbag.com
# Data: 2020-08-08
<input id="csrf_token" name="csrf_token" type="hidden" />
　<label for="name">Nome dello Studente</label><br>
　<input id="name" name="name" type="text" value="" />

Le classi di modulo definite dall'utente vengono utilizzate negli applicativi Flask, i moduli vengono presentati tramite modelli.

Esempio

# Nome file: example.py
# Copyright: 2020 Da w3codebox
# Autore: it.oldtoolbag.com
# Data: 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)

Il pacchetto WTForms contiene anche classi validator, molto utili per la validazione dei campi del modulo. Di seguito è riportata una lista dei validatori più comuni.

Numero	Classe validator	Descrizione
1	DataRequired	Controlla se il campo di input è vuoto
2	Email	Controlla se il testo nel campo segue le convenzioni dell'ID email
3	IPAddress	Verifica l'indirizzo IP nel campo di input
4	Length	Verifica la lunghezza della stringa nel campo di input nell'intervallo specificato
5	NumberRange	Verifica un numero nell'intervallo specificato nel campo di input
6	URL	Verifica l'URL inserito nel campo di input

Applica la regola di validazione 'DataRequired' al campo name della forma di contatto.

# Nome file: example.py
# Copyright: 2020 Da w3codebox
# Autore: it.oldtoolbag.com
# Data: 2020-08-08
name = TextField("Nome dello Studente",[validators.Required("Per favore, inserisci il tuo nome.")])

La funzione validate() dell'oggetto del modulo verifica i dati del modulo e lancia un errore di validazione quando fallisce. I messaggi di errore vengono inviati al template. Nei template HTML, i messaggi di errore vengono visualizzati dinamicamente.

# Nome file: example.py
# Copyright: 2020 Da w3codebox
# Autore: it.oldtoolbag.com
# Data: 2020-08-08
{% for message in form.name.errors %}
　　　　{{ message }}
　{% endfor %}

Esempio seguente che dimostra i concetti forniti. Il codice della forma di contatto è il seguente: forms.py)。

Esempio

# Nome file: example.py
# Copyright: 2020 Da w3codebox
# Autore: it.oldtoolbag.com
# Data: 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("Nome dello Studente",[validators.Required("Per favore, inserisci il tuo nome.")])
　　　　　Gender = RadioField('Sesso', choices = [('M','Maschio'),('F','Femmina')])
　　　　　Address = TextAreaField("Indirizzo")
　　　　　email = TextField("Email",[validators.Required("Per favore, inserisci il tuo indirizzo email.")])
　　　　　　　validators.Email("Per favore, inserisci il tuo indirizzo email.")])
　　　　　Age = IntegerField("Età")
　　　　　language = SelectField('Lingua', choices = [('cpp', 'C++'), ('py', 'Python')])
　　　　　submit = SubmitField("Invia")

Il validatore viene applicato ai campi nome e email. Di seguito è riportato lo script dell'applicazione Flask: formexample.py)。

Esempio

# Nome file: example.py
# Copyright: 2020 Da w3codebox
# Autore: it.oldtoolbag.com
# Data: 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('Tutti i campi sono obbligatori.')
　　　　　　　　　　　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)

Script del modello ( contact.html) come indicato di seguito -

# Nome file: example.py
# Copyright: 2020 Da w3codebox
# Autore: it.oldtoolbag.com
# Data: 2020-08-08
<html>
　<head>
　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
　<title>Esempio Flask</title>
　</head>
　　　　<body>
　　　　　　<h2 style="text-align: center;">Modulo di contatto</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>Seleziona</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>

Esegui in Python shell formexample.pye accedi all'URL => http://localhost:5000/contact. Il modulo di contatto sarà visualizzato come segue.

Se ci sono informazioni di errore, la pagina sarà come segue -

Se non ci sono errori, verrà visualizzato success.htmlIl contenuto della pagina, come segue -

SQLite Flask Invio email Flask

Guida Flask

WTF Flask