Meniu

Șablon de balon, formular, vizualizare și redirecționare cu exemple

  • Principal
  • Alte
  • Șablon de balon, formular, vizualizare și redirecționare cu exemple

flask template form

Încercați Instrumentul Nostru Pentru Eliminarea Problemelor

Acest tutorial explică ce sunt șablonul de flacon, formularul, vizualizarea, răspunsul și redirecționarea cu exemple practice:

În general, șablonarea este utilizată în programare, pentru a refolosi o porțiune de text cu date diferite. În ceea ce privește dezvoltarea web, proiectanții folosesc șabloane pentru a afișa datele într-o formă care poate fi citită și atractivă pentru cititorii umani.

Un design de șablon implică în general utilizarea unui limbaj datorită complexităților ridicate de interacțiunea umană.

=> Aruncați o privire la Ghidul pentru începători al balonului aici

Șabloane, vizualizări și formulare Flask

Ce veți învăța:

Introducere

Flask folosește un motor de modelare numit Jinja2, care afișează comportamentul unei aplicații pe baza nivelului de interacțiune al utilizatorului. Un șablon Jinja folosește variabile, expresii și etichete.

Variabilele și expresiile sunt înlocuite cu valori în timpul rulării înainte de redarea paginii în browser. Etichetele Jinja ajută la scrierea logicii și la declarațiile de control din șablonul Flask.

Vizualizare balon

Noțiunea de vizualizare Flask este derivată dintr-un model predominant de proiectare a aplicațiilor web numit Model-View-Controller. O vizualizare este unul dintre cele trei elemente interconectate din această paradigmă, unde se ocupă de logica aplicației. Vizualizarea se ocupă de prezentarea informațiilor către Utilizator.

În tutorialul nostru anterior, am proiectat un View prin subclasarea clasei BaseView a Flask-Appbuilder. În partea ulterioară a acestui tutorial, vom extinde ultimul nostru exemplu și vom prezenta modalitățile prin care Vizualizările pot fi personalizate.

Șablon de balon

Să începem și să scriem primul nostru șablon. Creați un fișier numit hello.html în directorul șabloane.

Scrieți următorul cod în fișierul respectiv și salvați-l.

Hello World!, from Software Testing Help.

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

{{item}}

{% else %}

{{item}}

{% endif %} {% endfor %}

Șablon pentru buclă

În șablonul Flask de mai sus, am folosit o buclă for pentru a itera pe elementele listei. În controlerul sau gestionarul nostru, am trecut o listă cu valori de salutări șablonului. În interiorul șablonului, accesăm fiecare element utilizând sintaxa {{item}}.

Șablon dacă bloc

În plus, notați utilizarea unei declarații if. Aici, testăm elementul pentru Morning și îl facem îndrăzneț și cursiv.

Acum să mergem mai departe pentru a afla mai multe despre conceptele Flask Forms.

Formulare de balon

Unul dintre cele mai importante aspecte ale șablonării este de a prelua intrări de la utilizatori și de a scrie logică de backend pe baza acelei intrări. Să creăm un formular.

Folosim Flask-Appbuilder SimpleFormView pentru a ne reda formularul. Cu toate acestea, să creăm mai întâi un formular. Pe lângă crearea unui formular, trebuie să folosim comanda flask fab create-admin pentru a crea un utilizator admin.

Prin urmare, utilizați comanda înainte de a porni serverul de dezvoltare, astfel încât vizualizările și formularele create ulterior să poată fi validate cu un utilizator conectat. Ne conectăm cu utilizatorul administrator și continuăm să validăm faptul că vizualizările create sunt vizibile sub meniu, așa cum se arată în capturile de ecran.

Creați administrator

Utilizați comanda de mai jos pentru a crea un utilizator administrator.

flask fab create-admin

Conectați-vă cu acreditările de administrator

  • Faceți clic pe Conectare după ce navigați la http: // localhost: 8080.
Conectați-vă ca administrator
Conectați-vă ca administrator
  • Conectați-vă cu acreditările de administrator, create în secțiunea anterioară.
Faceți clic pe Conectare
Faceți clic pe Conectare
  • Faceți clic pe categoria Formulare mele pentru a accesa vizualizările dvs.
Faceți clic pe meniu
Faceți clic pe meniu

Notă: Veți putea efectua ultimul pas numai după adăugarea vizualizărilor în meniul implicit afișat în bara de navigație.

Să mergem mai departe și să creăm câteva vizualizări bazate pe formular.

Creați un fișier numit forms.py sub directorul aplicației și scrieți în el următorul cod.

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())

Am creat un formular bazat pe DynamicForm de la Flask-Appbuilder. Există patru câmpuri de text. Extindem exemplul nostru de salut. Din cele patru câmpuri, două sunt obligatorii, iar două sunt opționale, deoarece, pentru primele două salutări, am menționat valorile pentru validatori.

Acum să creăm o vizualizare pentru acest formular. Scrieți următoarele linii de cod în fișierul 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'))

În viziunea noastră de mai sus, avem două metode numite form_get și form_post pentru popularea valorilor implicite în câmpurile formularelor și citirea valorilor introduse odată ce formularul este trimis din browser, respectiv.

GreetingsView afișează formularul, așa cum se arată în imaginea de mai jos.

Formular de salut

De asemenea, folosim un obiect de sesiune Flask pentru a stoca valorile câmpului în form_post, astfel încât să putem accesa același lucru în noua vizualizare corespunzătoare pe care urmează să o scriem.

Să modificăm acum clasa HelloWorld și să adăugăm o altă metodă pentru a afișa salutările. Îl vom numi hello_greetings2.

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

În această vizualizare, citim valorile din obiectul sesiunii și folosim șablonul de redare Flask pentru a afișa acele valori în HTML orientat către utilizator. Observați că hello_greetings2 este o modalitate alternativă de a obține aceeași funcționalitate similară cu hello_greetings.

Singura diferență este că folosind hello_greetings2, afișăm valorile introduse de Utilizator, iar în hello_greetings nu am luat nicio intrare de la Utilizator și le-am codat în timp ce scriem vizualizarea mapată pe ruta respectivă.

Răspuns la balon

Este destul de rar să găsiți utilizarea explicită a răspunsului Flask în cod. Clasa de răspuns în Flask este doar o subclasă a clasei de răspuns din clasa de răspuns a lui Werkzueg, care la rândul său subclasează clasa sa de ResponseBase.

Obiectul Flask Response este format intern de Flask ori de câte ori apelăm o declarație return sau o metodă precum render_template.

În plus, putem personaliza codul de răspuns și tipul de conținut, dacă este necesar, ca parte a declarației return în vizualizările noastre, așa cum se arată în vizualizarea HelloWorld modificată de mai jos.

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'

Utilizarea directă a clasei de răspuns Flask poate fi acoperită într-un caz de utilizare atunci când difuzăm conținutul în loc să returnăm conținutul complet simultan din cauza constrângerilor dimensiunii fișierului și a lățimii de bandă a rețelei.

Am arătat mai jos un exemplu de redare a conținutului dintr-un CSV mare.

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')

Redirecția Flask

Nu este întotdeauna posibil ca o aplicație să predefinească răspunsul pe baza diferitelor solicitări de la client.

Folosim Flask Redirect, în scenarii, în care este posibil să difuzăm conținutul care poate fi îndeplinit de celelalte vizualizări sau locații ca răspuns la o solicitare. Folosim Flask Redirect împreună cu anularea cu codurile de returnare HTTP standard.

De exemplu, în codul de mai jos, am folosit Redirecționarea cu codul HTTP 301 și am renunțat la 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

Mai mult, verificați în GreetingsView unde am folosit Flask redirect și url_for pentru a redirecționa o cerere intern către o vizualizare diferită, stocând valorile salutărilor în obiectul sesiunii. Redirecționarea balonului returnează întotdeauna un obiect de răspuns, cu codul de stare implicit sau codul de date în altă locație din aplicație.

Flask Debugtoolbar

Am introdus deja depanatorul interactiv Flask în ultimul nostru tutorial. În acest tutorial, mai facem un pas pentru a facilita depanarea aplicației Flask. Odată instalată, bara de instrumente Flask Debug este afișată ca o suprapunere peste aplicația Flask.

Instalați bara de instrumente Flask Debug.

pip install flask-debugtoolbar

Pentru a activa bara de depanare, deschideți fișierul __init__.py din proiectul nostru și modificați codul adăugând următoarele linii de cod.

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

Vă rugăm să rețineți că bara de instrumente de depanare Flask este activată numai în modul de depanare. Odată activat, când reîncărcați aplicația, veți observa două lucruri.

# 1) Bara de instrumente de depanare apare în partea dreaptă a browserului. Faceți clic și extindeți-l pentru a vedea diferitele caracteristici furnizate de bara de instrumente.

Activarea bara de instrumente de depanare
Activarea bara de instrumente de depanare

#Două) Ori de câte ori o nouă cerere POST este trimisă aplicației, aceasta este interceptată de bara de instrumente, astfel încât să putem inspecta variabilele și ceilalți parametri care aparțin depanării aplicației.

Depanare interceptare bara de instrumente
Depanare interceptare bara de instrumente

Această interceptare implicită poate fi dezactivată cu configurația de mai jos.

app.config('DEBUG_TB_INTERCEPT_REDIRECTS') = False Rezultate pitice
Depanarea variabilelor din bara de instrumente

Acum să scriem câteva teste pentru a testa opiniile noastre pentru funcțiile suplimentare pe care le-am introdus în aplicația mostră.

cum se adaugă șir la matrice de șiruri

Înainte de a continua testarea, vă rugăm să dezactivați depanarea așa cum se arată mai jos în __init__.py. Alternativ, puteți comenta rândul de mai jos.

app.debug = False

Testarea vizualizărilor aplicației Flask

Trebuie să organizăm codul de testare pentru a-l face mai ușor de gestionat. Creați un fișier numit conftest.py în directorul rădăcină și mutați liniile menționate mai jos din test_hello.py în acest fișier.

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

corpurile de iluminat pytest sunt încărcate de pytest în timpul rulării. Aceste dispozitive sunt disponibile și partajate cu toate testele. Definirea unui conftest.py în calea rădăcină a oricărui proiect este considerată o bună practică deoarece pytest poate recunoaște toate modulele din proiect fără a specifica un PYTHONPATH explicit.

Adăugați încă un test pentru fișierul test_hello. Un exemplu de test este dat mai jos. Apelăm metoda get a obiectului client și afirmăm valoarea așteptată în datele de răspuns stocate în datele resp.

În mod similar, puteți scrie mai multe teste indicând diferite puncte de vedere. Vom scrie mai multe teste în tutorialele ulterioare.

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

Rulați testele folosind comanda de mai jos din directorul rădăcină al proiectului.

pytest -v

Executarea testului produce rezultatele testului în consolă, după cum se arată mai jos:

Eșec în pytest
Rezultate pitice

Nu există încă eșecuri. Să proiectăm încă un test, după cum se menționează mai jos.

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

Acest test va eșua deoarece nu am definit niciun atribut de mesaj în clasa HelloWorld în fișierul views.py.

După ce rulați testele folosind pytest -v, din nou, rezultatele similare imaginii de mai jos vor fi afișate pe consolă.

Eșec în pytest

Secțiunea de mai jos explică pașii pe care trebuie să îi parcurgem în timpul rulării testelor pe o platformă CI / CD. Folosim Git Actions pentru același proiect.

CI / CD cu acțiuni Git

Acum salvăm toate modificările din fișiere și creăm un commit oferind mesajul pentru acest tutorial. După ce ne-am angajat în depozitul local, extragem modificările din originea de la distanță cu steagul –rebase pentru a vedea dacă există conflicte cu noile modificări de pe telecomandă. Renovăm pentru a menține istoria consecventă.

Utilizați comanda de mai jos pentru a extrage și îmbina modificările din originea de la distanță. Cu toate acestea, comiteți modificările înainte de a trage modificările de la distanță.

git pull origin master --rebase

Acum, verificați ramura principală locală și fuzionați cu ramura tutorial-2. După ce îmbinarea reușește, publicați aceste modificări în masterul originii. Această acțiune va invoca versiunile de pe platformele țintă. Testăm acest cod pe Python3.7 și Python 3.8 pe Ubuntu cel mai recent.

Concluzie

În acest tutorial, am văzut cum funcționează șabloanele în cadrul Flask. Am schițat pașii de creare și redare a șabloanelor balonului cu valori definite de utilizator folosind variabile și expresii.

De asemenea, am văzut exemple de vizualizare predefinită BaseView a pluginului Flask Appbuilder. Această vizualizare poate fi subclasată cu ușurință de dezvoltatorii Flask pentru a crea vizualizări personalizate.

Conceptele abordate până acum îi ajută pe cititori să creeze rapid site-uri web statice și dinamice folosind Flask fără un backend de bază de date. Vom explica cum să citim și să scriem date din și către bazele de date cu ModelView în următorul tutorial când vom trece prin conceptul de utilizare a bazelor de date cu Flask.

=> Citiți seria Easy Flask Training

Lectură recomandată

^