Menú

Plantilla de flascó, formulari, visualització i redirecció amb exemples

  • Principal
  • Altres
  • Plantilla de flascó, formulari, visualització i redirecció amb exemples

flask template form

Proveu El Nostre Instrument Per Eliminar Problemes

Aquest tutorial explica què són les plantilles, formularis, visualitzacions, respostes i redireccions de Flask amb exemples pràctics:

En general, la plantilla s’utilitza a la programació per reutilitzar una part de text amb dades diferents. Pel que fa al desenvolupament web, els dissenyadors utilitzen plantilles per mostrar dades en un formulari llegible i atractiu per als lectors humans.

Un disseny de plantilles implica generalment l’ús d’un llenguatge a causa de la complexitat que suposa la interacció humana.

=> Mireu aquí la guia per a principiants de Flask

Plantilles, visualitzacions i formularis de Flask

Què aprendreu:

Introducció

Flask utilitza un motor de plantilla anomenat Jinja2, que mostra el comportament d’una aplicació en funció del nivell d’interacció de l’usuari. Una plantilla Jinja utilitza variables, expressions i etiquetes.

Les variables i expressions se substitueixen per valors durant el temps d’execució abans de la renderització de pàgines al navegador. Les etiquetes Jinja ajuden a escriure lògiques i controlen sentències a la plantilla Flask.

Visualització de matràs

La noció de vista Flask es deriva d’un patró de disseny d’aplicacions web prevalent anomenat Model-View-Controller. Una vista és un dels tres elements interconnectats d’aquest paradigma, on tracta la lògica d’aplicacions. La vista s'encarrega de la presentació d'informació a l'usuari.

Al nostre tutorial anterior, vam dissenyar una vista subclassant la classe BaseView de Flask-Appbuilder. A la part següent d’aquest tutorial, ampliarem el nostre darrer exemple i presentarem formes de personalitzar les visualitzacions.

Plantilla de matràs

Comencem i escrivim la nostra primera plantilla. Creeu un fitxer anomenat hello.html al directori de plantilles.

Escriviu el codi següent en aquest fitxer i deseu-lo.

Hello World!, from Software Testing Help.

{% for item in greetings %} {% if 'Morning' in item %}

{{item}}

{% else %}

{{item}}

{% endif %} {% endfor %}

Plantilla per a bucle

A la plantilla de Flask anterior, hem utilitzat un bucle for per iterar als elements de la llista. Al nostre controlador o controlador, hem passat una llista amb valors de salutació a la plantilla. Dins de la plantilla, accedim a cada element mitjançant la sintaxi {{item}}.

Plantilla si bloc

A més, anoteu l’ús d’una sentència if. Aquí provem l’element de Morning i el posem en negreta i cursiva.

Ara fem un pas endavant per obtenir més informació sobre els conceptes de Flask Forms.

Formularis de matràs

Un dels aspectes més crucials de la plantilla és prendre entrades dels usuaris i escriure una lògica de backend basada en aquesta entrada. Creem un formulari.

Utilitzem Flask-Appbuilder SimpleFormView per representar el nostre formulari. Tot i això, primer creem un formulari. A més de crear un formulari, hem d’utilitzar l’ordre flask fab create-admin per crear un usuari administrador.

Per tant, utilitzeu l'ordre abans d'iniciar el servidor de desenvolupament perquè les vistes i els formularis creats posteriorment es puguin validar amb un usuari connectat. Iniciem la sessió amb l’usuari administrador i continuem validant que les visualitzacions creades siguin visibles al menú tal com es mostra a les captures de pantalla.

Crea administrador

Utilitzeu l'ordre següent per crear un usuari administrador.

flask fab create-admin

Inicieu la sessió amb les credencials d'administrador

  • Feu clic a Inici de sessió després de navegar a http: // localhost: 8080.
Inicieu la sessió com a administrador
Inicieu la sessió com a administrador
  • Inicieu la sessió amb les credencials d'administrador, creades a la secció anterior.
Feu clic a Inici de sessió
Feu clic a Inicia la sessió
  • Feu clic a la categoria Els meus formularis per accedir a les vostres visualitzacions.
Feu clic al menú
Feu clic al menú

Nota: Només podreu realitzar l'últim pas després d'afegir les vistes al menú per defecte que es mostra a la barra de navegació.

Anem endavant i creem algunes visualitzacions basades en formularis.

Creeu un fitxer anomenat forms.py al directori de l'aplicació i escriviu-hi el codi següent.

from wtforms import Form, StringField from wtforms.validators import DataRequired from flask_appbuilder.fieldwidgets import BS3TextFieldWidget from flask_appbuilder.forms import DynamicForm class GreetingsForm(DynamicForm): greeting1 = StringField(('Morning'), description = ('Your morning Greeting'), validators = (DataRequired()), widget = BS3TextFieldWidget()) greeting2 = StringField(('Afternoon'), description = ('Your Afternoon Greeting'), validators = (DataRequired()), widget = BS3TextFieldWidget()) greeting3 = StringField(('Evening'), description = ('Your Evening Greeting'), widget = BS3TextFieldWidget()) greeting4 = StringField(('Night'), description = ('Your Night Greeting'), widget = BS3TextFieldWidget())

Hem creat un formulari basat en el DynamicForm de Flask-Appbuilder. Hi ha quatre camps de text. Donem exemple de salutació. Dels quatre camps, dos són obligatoris i dos són opcionals perquè, per a les dues primeres salutacions, hem esmentat els valors dels validadors.

Ara creem una vista per a aquest formulari. Escriviu aquestes línies de codi següents al fitxer views.py.

from flask import render_template, flash from flask_appbuilder import SimpleFormView from app.forms import GreetingsForm class GreetingsView(SimpleFormView): form = GreetingsForm form_title = 'This is a Greetings form' message = 'Your Greetings are submitted' def form_get(self, form): form.greeting1.data = 'Your Morning Greeting' form.greeting2.data = 'Your Afternoon Greeting' form.greeting3.data = 'Your Evening Greeting' form.greeting4.data = 'Your Night Greeting' def form_post(self, form): flash(self.message, 'info') greetings = ( form.greeting1.data, form.greeting2.data, form.greeting3.data, form.greeting4.data, ) session('greetings')=greetings return redirect(url_for('HelloWorld.hello_greetings2'))

A la nostra vista anterior, tenim dos mètodes anomenats form_get i form_post per omplir els valors predeterminats als camps dels formularis i llegir els valors introduïts un cop enviat el formulari des del navegador, respectivament.

El GreetingsView mostra el formulari, tal com es mostra a la imatge següent.

Formulari de salutació

També fem ús d’un objecte de sessió Flask per emmagatzemar els valors del camp a form_post de manera que puguem accedir al mateix a la nova visualització corresponent que estem a punt d’escriure.

Ara modificem la classe HelloWorld i afegim un altre mètode per mostrar les felicitacions. L’anomenarem hello_greetings2.

class HelloWorld(BaseView): ## other methods @expose('/greetings2') def hello_greetings2(self): greetings = session('greetings') return render_template('hello.html', greetings=greetings)

En aquesta vista, llegim els valors de l'objecte de sessió i utilitzem la plantilla de renderització de Flask per mostrar aquests valors a l'HTML orientat a l'usuari. Fixeu-vos que hello_greetings2 és una forma alternativa d’aconseguir la mateixa funcionalitat similar a hello_greetings.

L’única diferència és que utilitzant hello_greetings2, mostrem els valors que ha introduït l’usuari i, a hello_greetings, no hem pres cap entrada de l’usuari i les hem codificat mentre escrivim la vista assignada a la ruta respectiva.

Resposta al matràs

És bastant estrany que trobeu l’ús explícit de la resposta de Flask al codi. La classe Response a Flask és només una subclassa de la classe Response de la classe Response de Werkzueg, que al seu torn subclassa la seva classe ResponseBase.

L'objecte Flask Response està format internament per Flask sempre que cridem una declaració return o un mètode com render_template.

A més, podem personalitzar el codi de resposta i el tipus de contingut si es requereix com a part de la declaració de retorn a les nostres visualitzacions, tal com es mostra a la vista HelloWorld modificada a continuació.

class HelloWorld(BaseView): ## other methods @expose('/greetings2') def hello_greetings2(self): greetings = session('greetings') return render_template('hello.json', greetings=greetings), 201, {'Content-Type' : 'application/json'

L’ús directe de la classe Response de Flask es pot cobrir en un cas d’ús quan transmetem el contingut en lloc de retornar-ne tot el contingut alhora, a causa de les limitacions de la mida del fitxer i l’amplada de banda de la xarxa.

A continuació, hem mostrat un exemple de transmissió de contingut des d’un CSV gran.

from flask import Response @app.route('https://cdn.softwaretestinghelp.com/largefile.csv') def send_large_csv(): '''A controller to stream the content of a large csv file''' def gen(): for row in iter_all_rows(): yield ','.join(row) + ' ' return Response(gen(), mimetype='text/csv')

Redirecció de matràs

No sempre és possible que una aplicació defineixi prèviament la resposta en funció de les diferents peticions del client.

Utilitzem Flask Redirect, en escenaris, on és possible publicar el contingut que la resta de visualitzacions o ubicacions poden complir en resposta a una sol·licitud. Utilitzem Flask Redirect juntament amb avortar amb els codis de retorn HTTP estàndard.

Per exemple, al codi següent, hem utilitzat Redirecció amb el codi HTTP 301 i l’avortament amb 401.

from flask import Flask, redirect, url_for, request, abort app = Flask(__name__) @app.route('/') def index(): return render_template('log_in.html') # Log In template @app.route('/login',methods = ('POST', 'GET')) def login(): if request.method == 'POST': if request.form('username') == 'admin' : # if user is admin return redirect(url_for('success')), 301 else: abort(401) # stop processing else: return redirect(url_for('index')) # redirect to another view

A més, consulteu GreetingsView on hem fet ús de Flask redirect i url_for per redirigir una sol·licitud internament a una vista diferent emmagatzemant els valors de les salutacions a l'objecte de sessió. La redirecció de Flask sempre retorna un objecte de resposta, amb el codi d'estat de les dades per defecte o a una altra ubicació de l'aplicació.

Barra de depuració de Flask

Ja vam introduir el depurador interactiu de Flask al nostre últim tutorial. En aquest tutorial, fem un pas més per facilitar la depuració de l'aplicació Flask. Un cop instal·lada, la barra d’eines Flask Debug es mostra com a superposició sobre l’aplicació Flask.

Instal·leu la barra d’eines Flask Debug.

pip install flask-debugtoolbar

Per activar la barra de depuració d’obres, obriu el fitxer __init__.py al nostre projecte i modifiqueu el codi afegint les línies de codi següents.

from flask_debugtoolbar import DebugToolbarExtension app.debug = True toolbar = DebugToolbarExtension(app)

Tingueu en compte que la barra d'eines de depuració de Flask només està habilitada en mode de depuració. Un cop activada, quan torneu a carregar la vostra aplicació, observareu dues coses.

# 1) La barra d'eines de depuració apareix a la part dreta del navegador. Feu clic i amplieu-lo per veure les diverses funcions que proporciona la barra d'eines.

Activació de la barra d
Activació de la barra d'eines de depuració

# 2) Sempre que s’envia una nova sol·licitud POST a l’aplicació, aquesta és interceptada per la barra d’eines perquè puguem inspeccionar les variables i els altres paràmetres relatius a la depuració de l’aplicació.

Intercepció de la barra d
Intercepció de la barra d'eines de depuració

Aquesta intercepció per defecte es pot desactivar amb la configuració següent.

app.config('DEBUG_TB_INTERCEPT_REDIRECTS') = False Resultats pitest
Depurar variables de la barra d'eines

Ara anem a escriure algunes proves per provar les nostres opinions de les funcions addicionals que hem introduït a l'aplicació de mostra.

els millors llocs per veure animis en línia gratuïts

Abans de continuar amb la prova, desactiveu la depuració tal com es mostra a continuació a __init__.py. Com a alternativa, podeu comentar la línia següent.

app.debug = False

Provant les vistes de l'aplicació Flask

Hem d’organitzar el codi de proves per fer-lo més manejable. Creeu un fitxer anomenat conftest.py al directori arrel i moveu les línies esmentades a continuació de test_hello.py a aquest fitxer.

from app import appbuilder import pytest @pytest.fixture def client(): ''' A pytest fixture for test client ''' appbuilder.app.config('TESTING') = True with appbuilder.app.test_client() as client: yield client

els accessoris pytest es carreguen per pytest en temps d'execució. Aquests accessoris estan disponibles i es comparteixen amb totes les proves. Definir un conftest.py a la ruta d’arrel de qualsevol projecte es considera una pràctica recomanada, ja que pytest pot reconèixer tots els mòduls del projecte sense especificar un PYTHONPATH explícit.

Afegiu una prova més per al fitxer test_hello. A continuació es dóna un exemple de prova. Truquem al mètode get de l’objecte client i afirmem el valor esperat en les dades de resposta emmagatzemades en dades resp.

De la mateixa manera, podeu escriure més proves apuntant a diverses vistes. Escriurem més proves en els següents tutorials.

def test_greetings(client): ''' A test method to test view hello_greetings''' resp = client.get('/hello/greetings', follow_redirects=True) assert b'Good Morning' in resp.data

Executeu les proves mitjançant l'ordre següent del directori arrel del projecte.

pytest -v

La prova de prova produeix els resultats de la prova a la consola, tal com es mostra a continuació:

Fracàs en pytest
Resultats pitest

Encara no hi ha fallades. Dissenyem una prova més, tal com s’esmenta a continuació.

def test_greetings2(client): ''' A test method to test view hello_greetings2 ''' resp = client.get('/hello/greetings2', follow_redirects=True) assert b'Good Morning' in resp.data

Aquesta prova fallarà ja que no hem definit cap atribut de missatge a la classe HelloWorld al fitxer views.py.

Un cop hàgiu executat les proves amb pytest -v, els resultats similars a la imatge que es mostra a continuació es mostraran a la consola.

Fracàs en pytest

La secció següent explica els passos que hem de realitzar mentre s'executen les proves en una plataforma CI / CD. Utilitzem Git Actions per al mateix projecte.

CI / CD amb accions Git

Ara desem tots els canvis als fitxers i creem una confirmació donant el missatge d’aquest tutorial. Després de comprometre'ns al repositori local, traiem els canvis de l'origen remot amb el senyalador –rebase per veure si hi ha conflictes amb els canvis nous al comandament. Tornem a canviar per mantenir la història coherent.

Utilitzeu l'ordre següent per extreure i combinar els canvis des de l'origen remot. Tanmateix, confieu els canvis abans de treure els canvis des del control remot.

git pull origin master --rebase

Ara comproveu la branca mestra local i combineu-la amb la branca tutorial-2. Quan la combinació tingui èxit, publiqueu aquests canvis al mestre d'origen. Aquesta acció invocarà les versions de plataformes objectiu. Estem provant aquest codi a Python3.7 i Python 3.8 a Ubuntu més recentment.

Conclusió

En aquest tutorial, hem vist com funcionen les plantilles al marc Flask. Es van esbossar els passos per crear i representar plantilles de matràs amb valors definits per l'usuari mitjançant variables i expressions.

També hem vist exemples d'una vista predefinida BaseView del connector Flask Appbuilder. Els desenvolupadors de Flask poden subclassar aquesta vista fàcilment per crear visualitzacions personalitzades.

Els conceptes tractats fins ara ajuden els lectors a crear ràpidament llocs web estàtics i dinàmics mitjançant Flask sense un backend de base de dades. Explicarem com llegir i escriure dades des de i cap a les bases de dades amb ModelView al següent tutorial quan passem pel concepte d’utilitzar bases de dades amb Flask.

=> Llegiu la sèrie de formació Easy Flask

Lectura recomanada

^