Menu

Šablóna banky, formulár, pohľad a presmerovanie s príkladmi

  • Hlavná
  • Iné
  • Šablóna banky, formulár, pohľad a presmerovanie s príkladmi

flask template form

Vyskúšajte Náš Nástroj Na Odstránenie Problémov

Tento výukový program vysvetľuje praktické ukážky, ktoré sú šablóna banky, formulár, zobrazenie, odpoveď a presmerovanie:

Spravidla sa v programovaní používa šablóna na opakované použitie časti textu s rôznymi údajmi. Pokiaľ ide o vývoj webu, dizajnéri používajú šablóny na zobrazenie údajov v podobe, ktorá je čitateľná a atraktívna pre ľudských čitateľov.

Návrh šablóny všeobecne zahŕňa použitie jazyka z dôvodu zložitosti, ktorú predstavuje ľudská interakcia.

=> Tu si pozrite príručku pre začiatočníkov

Šablóny, zobrazenia a formuláre banky

Čo sa dozviete:

Úvod

Flask používa šablónový nástroj s názvom Jinja2, ktorý zobrazuje správanie aplikácie na základe úrovne interakcie používateľa. Šablóna Jinja používa premenné, výrazy a značky.

Premenné a výrazy sú nahradené hodnotami počas behu modulu pred vykreslením stránky v prehliadači. Značky Jinja pomáhajú pri písaní logiky a riadiacich príkazov v šablóne Flask.

Pohľad na banku

Pojem zobrazenie banky je odvodený z prevažujúceho vzoru návrhu webových aplikácií s názvom Model-View-Controller. Pohľad je jedným z troch vzájomne prepojených prvkov v tejto paradigme, kde sa zaoberá aplikačnou logikou. Pohľad sa stará o prezentáciu informácií Používateľovi.

V našom predchádzajúcom tutoriáli sme navrhli View podtriedou triedy BaseView nástroja Flask-Appbuilder. V nasledujúcej časti tohto tutoriálu rozšírime náš posledný príklad a predstavíme spôsoby, ako je možné prispôsobiť zobrazenia.

Šablóna banky

Začnime a napíšme našu prvú šablónu. V adresári šablón vytvorte súbor s názvom hello.html.

Do tohto súboru napíšte nasledujúci kód a uložte ho.

Hello World!, from Software Testing Help.

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

{{item}}

{% else %}

{{item}}

{% endif %} {% endfor %}

Šablóna pre slučku

Vo vyššie uvedenej šablóne banky sme na iteráciu položiek zoznamu použili slučku for. V našom ovládači alebo obslužnom programe sme šablóne odovzdali zoznam s hodnotami pozdravov. V šablóne pristupujeme ku každej položke pomocou syntaxe {{item}}.

Šablóna, ak je blokovaná

Okrem toho si poznačte použitie príkazu if. Tu otestujeme položku doobeda a urobíme ju tučným písmom a kurzívou.

Teraz poďme ďalej a dozvieme sa viac o konceptoch bankových formulárov.

Formuláre banky

Jedným z najdôležitejších aspektov šablónovania je brať vstupy od používateľov a na základe tohto vstupu zapisovať backendovú logiku. Vytvorme formulár.

Na vykreslenie nášho formulára používame Flask-Appbuilder SimpleFormView. Poďme si však najskôr vytvoriť formulár. Okrem vytvorenia formulára musíme na vytvorenie používateľa správcu použiť príkaz flask fab create-admin.

Pred spustením vývojového servera preto použite príkaz, aby bolo možné následne vytvorené zobrazenia a formuláre overiť pomocou prihláseného používateľa. Prihlasujeme sa s používateľom správcu a neustále overujeme, že vytvorené zobrazenia sú viditeľné v ponuke, ako je to znázornené na snímkach obrazovky.

Vytvoriť správcu

Pomocou príkazu nižšie môžete vytvoriť používateľa správcu.

flask fab create-admin

Prihláste sa pomocou prihlasovacích údajov správcu

  • Po prechode na adresu http: // localhost: 8080 kliknite na položku Prihlásiť sa.
Prihlásiť sa ako správca
Prihlásiť sa ako správca
  • Prihláste sa pomocou prihlasovacích údajov správcu vytvorených v predchádzajúcej časti.
Kliknite na Prihlásiť sa
Kliknite na Prihlásiť sa
  • Kliknutím na kategóriu Moje formuláre získate prístup k svojim zobrazeniam.
Kliknite na ponuku
Kliknite na ponuku

Poznámka: Posledný krok budete môcť vykonať až po pridaní zobrazení do predvolenej ponuky zobrazenej na navigačnej lište.

Poďme do toho a vytvorme niekoľko zobrazení založených na formulároch.

V adresári aplikácie vytvorte súbor s názvom forms.py a napíšte do neho nasledujúci kód.

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

Vytvorili sme formulár založený na DynamicForm od Flask-Appbuilder. Existujú štyri textové polia. Rozširujeme náš príklad pozdravov. Zo štyroch polí sú dve povinné a dve voliteľné, pretože pri prvých dvoch pozdravoch sme spomenuli hodnoty pre validátory.

Teraz si vytvoríme zobrazenie pre tento formulár. Tieto nasledujúce riadky kódu zapíšte do súboru 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'))

Z nášho pohľadu vyššie máme dve metódy nazývané form_get a form_post na vyplnenie predvolených hodnôt v poliach formulárov a na načítanie zadaných hodnôt po odoslaní formulára z prehliadača.

GreetingsView zobrazí formulár, ako je znázornené na obrázku nižšie.

Zdravím vás

Používame tiež objekt relácie Flask na ukladanie hodnôt poľa do form_post, aby sme k nim mohli pristupovať v zodpovedajúcom novom zobrazení, ktoré sa chystáme napísať.

Poďme teraz upraviť triedu HelloWorld a pridať ďalšiu metódu na zobrazenie pozdravov. Budeme to volať hello_greetings2.

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

V tomto zobrazení načítame hodnoty z objektu relácie a pomocou šablóny vykreslenia Flask zobrazíme tieto hodnoty v HTML orientovanom na používateľa. Všimnite si, že hello_greetings2 je alternatívny spôsob dosiahnutia rovnakej funkcionality podobný hello_greetings.

Jediný rozdiel je v tom, že pomocou hello_greetings2 zobrazujeme hodnoty, ktoré zadáva používateľ, a v hello_greetings sme od používateľa nezobrali žiadne vstupy a pri písaní pohľadu mapovaného na príslušnú trasu sme ich napevno zakódovali.

Reakcia banky

Je dosť zriedkavé, že v kóde nájdete výslovné použitie odpovede banky. Trieda odozvy v banke je iba podtriedou triedy Response z triedy Werkzueg’s Response, ktorá zasa podtriedy svojej triedy ResponseBase.

Objekt Flask Response je Flask interne tvorený vždy, keď voláme návratový príkaz alebo metódu, ako je render_template.

Ďalej môžeme prispôsobiť kód odpovede a typ obsahu, ak je to potrebné, ako súčasť návratového príkazu v našich zobrazeniach, ako je to zobrazené v upravenom zobrazení HelloWorld nižšie.

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'

Priame použitie triedy Flask’s Response je možné zahrnúť do prípadu použitia, keď streamujeme obsah namiesto toho, aby sme vracali celý obsah naraz, kvôli obmedzeniam veľkosti súboru a šírky pásma siete.

Ďalej sme uviedli jeden príklad streamovania obsahu z veľkého súboru CSV.

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

Presmerovanie banky

Nie je vždy možné, aby aplikácia vopred definovala odpoveď na základe rôznych požiadaviek klienta.

Flask Redirect používame v scenároch, kde je možné poskytnúť obsah, ktorý môžu splniť iné zobrazenia alebo umiestnenia v reakcii na žiadosť. Používame Flask Redirect spolu s abortom so štandardnými návratovými kódmi HTTP.

Napríklad, v kóde nižšie sme použili presmerovanie s HTTP kódom 301 a prerušili sme s 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

Ďalej skontrolujte v GreetingsView, kde sme využili Flask redirect a url_for na interné presmerovanie požiadavky na iné zobrazenie uložením hodnôt pozdravov do objektu relácie. Flask redirect vždy vráti objekt odpovede s predvoleným alebo daným stavovým kódom na iné miesto v aplikácii.

Banka Debugtoolbar

Flaskov interaktívny debugger sme už predstavili v našom poslednom tutoriáli. V tomto výučbe urobíme ďalší krok, ktorý uľahčí ladenie aplikácie Flask. Po nainštalovaní sa panel nástrojov Flask Debug zobrazí ako prekrytie nad aplikáciou Flask.

Nainštalujte panel s nástrojmi Flask Debug.

pip install flask-debugtoolbar

Ak chcete aktivovať panel ladenia, otvorte v našom projekte súbor __init__.py a upravte kód pridaním nasledujúcich riadkov kódu.

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

Upozorňujeme, že panel s nástrojmi na ladenie banky je povolený iba v režime ladenia. Po povolení bude aplikácia pri opätovnom načítaní dodržiavať dve veci.

# 1) Panel s nástrojmi na ladenie sa zobrazí na pravej strane prehliadača. Kliknutím a rozbalením zobrazíte rôzne funkcie, ktoré poskytuje panel s nástrojmi.

Aktivácia panela nástrojov ladenia
Aktivácia panela nástrojov ladenia

#dva) Kedykoľvek sa do aplikácie pošle nová požiadavka POST, zachytí ju panel s nástrojmi, aby sme mohli skontrolovať premenné a ďalšie parametre týkajúce sa ladenia aplikácie.

Zachytenie panela s nástrojmi ladenia
Zachytenie panela s nástrojmi ladenia

Toto predvolené zachytenie je možné zakázať pomocou konfigurácie uvedenej nižšie.

app.config('DEBUG_TB_INTERCEPT_REDIRECTS') = False Výsledky testu
Ladiť premenné panela nástrojov

Poďme si teraz napísať niekoľko testov, ktoré otestujú naše názory na ďalšie funkcie, ktoré sme zaviedli v ukážkovej aplikácii.

aký je najlepší adblock pre chróm

Pred pokračovaním v testovaní deaktivujte ladenie, ako je uvedené nižšie v __init__.py. Prípadne môžete komentovať nižšie uvedený riadok.

app.debug = False

Testovanie zobrazení aplikácie banky

Potrebujeme usporiadať testovací kód, aby bol lepšie ovládateľný. V koreňovom adresári vytvorte súbor s názvom conftest.py a do tohto súboru presuňte nižšie uvedené riadky z test_hello.py.

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

zariadenia pytest sú načítané programom pytest za behu. Tieto zariadenia sú k dispozícii a sú zdieľané so všetkými testami. Definovanie súboru conftest.py v koreňovej ceste ľubovoľného projektu sa považuje za najlepší postup, pretože pytest dokáže rozpoznať všetky moduly v projekte bez uvedenia explicitnej PYTHONPATH.

Pridajte ešte jeden test pre súbor test_hello. Nižšie je uvedený príklad testu. Zavoláme metódu get objektu klienta a potvrdíme očakávanú hodnotu v dátach odpovedí uložených v resp. Dátach.

Podobne môžete napísať viac testov smerujúcich k rôznym zobrazeniam. Viac testov napíšeme v nasledujúcich tutoriáloch.

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

Testy spustite pomocou nižšie uvedeného príkazu z koreňového adresára projektu.

pytest -v

Skúšobná prevádzka poskytuje výsledky skúšky v konzole, ako je uvedené nižšie:

Zlyhanie v pyteste
Výsledky testu

Zatiaľ nie sú žiadne poruchy. Poďme si navrhnúť ešte jeden test, ako je uvedené nižšie.

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

Tento test zlyhá, pretože v triede HelloWorld sme v súbore views.py nedefinovali žiadny atribút správy.

Po spustení testov pomocou príkazu pytest -v sa na konzole znova zobrazia výsledky podobné obrázku znázornenému nižšie.

Zlyhanie v pyteste

V nasledujúcej časti sú vysvetlené kroky, ktoré musíme vykonať pri spustení testov na platforme CI / CD. Pre ten istý projekt používame akcie Git.

CI / CD s akciami Git

Teraz uložíme všetky zmeny v súboroch a vytvoríme potvrdenie odoslaním správy pre tento tutoriál. Po potvrdení v miestnom úložisku stiahneme zmeny zo vzdialeného pôvodu pomocou príznaku –rebase, aby sme zistili, či existujú nejaké konflikty s novými zmenami na diaľkovom ovládaní. Vyrábame rebase, aby bola história konzistentná.

Pomocou nasledujúceho príkazu môžete načítať a zlúčiť zmeny zo vzdialeného pôvodu. Pred potvrdením vykonania zmien z diaľkového ovládania ich však vykonajte.

git pull origin master --rebase

Teraz zaplaťte miestnu hlavnú pobočku a zlúčte ju s vetvou tutorial-2. Keď je zlúčenie úspešné, zverejnite tieto zmeny v hlavnom zdroji. Táto akcia vyvolá zostavenia na cieľových platformách. Najnovšie testujeme tento kód na Python3.7 a Python 3.8 na Ubuntu.

Záver

V tomto tutoriáli sme videli, ako fungujú šablóny v rámci Flask. Načrtli sme kroky na vytvorenie a vykreslenie šablón banky s používateľsky definovanými hodnotami pomocou premenných a výrazov.

Videli sme tiež príklady vopred definovaného pohľadu BaseView doplnku Flask Appbuilder. Toto zobrazenie môžu vývojári Flask ľahko zaradiť do podtriedy, aby vytvorili vlastné zobrazenia.

Doteraz pokryté koncepty pomáhajú čitateľom rýchlo vytvárať statické a dynamické webové stránky pomocou banky bez banky. Vysvetlíme, ako čítať a zapisovať údaje z a do databáz pomocou ModelView v nasledujúcom tutoriále, keď si prejdeme koncepciu používania Databáz s bankou.

=> Prečítajte si sériu školení Easy Flask

Odporúčané čítanie

^