Meni

Aplikacija tikvice i izgled projekta tikvice s nacrtom i bootstrapom

  • Glavni
  • Ostalo
  • Aplikacija tikvice i izgled projekta tikvice s nacrtom i bootstrapom

flask app flask project layout with blueprint bootstrap

Isprobajte Naš Instrument Za Uklanjanje Problema

Ovaj vodič objašnjava kako koristiti Flask App, Flask Blueprint i Flask Bootstrap u projektu Flask:

U ovoj ćemo se temi malo odmaknuti od arhetipa Flask-Appbuilder-a kako bismo izgradili naše razumijevanje nacrta Flask-a. Pročitajte naš vodič o tikvici, Predlošcima i pogledima tikvice i Tikvici s bazama podataka kao što su MongoDB, SQLite i MySQL. Koristili smo primjer projekta nazvanog flaskTutorialApp.

Međutim, projekt možete stvoriti i ispočetka pomoću naredbe fab create-app tikvice. Ova naredba stvara skelu potrebnu za projekt Flask, zajedno s direktorijom aplikacije na temelju imena aplikacije koje ste dali.

=> Pogledajte Seriju obuka za tikvice za sve

Izgled projekta tikvice s nacrtom i bootstrapom 1

U ovom uputstvu objašnjavamo o aplikaciji Flask, Flask Blueprint i Flask Bootstrap. Našu aplikaciju Flask u početku razvijamo s već postojećom skelom koju je osigurao Flask-Appbuilder. Zatim stvaramo Nacrt boce nazvan hello2. Na kraju, opisat ćemo koncept Flask Dockera tako što ćemo dockerizirati našu aplikaciju Flask.

Što ćete naučiti:

Aplikacija tikvice

Flask App je drugo ime za Flask Application. Ako primijetite kôd napisan u datoteci __init__.py, primijetit ćete da je stvorena instanca Flask, a varijabla je imenovana kao app. Primjer klase Flask je aplikacija Flask, koja je instanca WSGI aplikacije.

from flask import Flask app = Flask(__name__)

Nacrt tikvice

Flask Blueprint omogućuje nam održavanje povezanih značajki i pomaže u boljim razvojnim praksama. Neke od prednosti nacrta tikvice su sljedeće:

  1. Jednostavna organizacija velikih aplikacija.
  2. Povećava ponovnu upotrebljivost koda registracijom istog Nacrta više puta.
  3. Skup operacija se snima i može se naknadno reproducirati nakon registracije nacrta.

Uz gornju pozadinu koja je dana na Flask Blueprint-u, možemo krenuti dalje i dizajnirati svoj prvi nacrt. Nacrt možemo smatrati i modulom. Stvorimo HelloWorld nacrt.

Sve komponente, resursi i značajke nacrta čuvaju se i organiziraju odvojeno od drugog izvornog koda aplikacije Flask. To znači da nacrt tikvice može imati svoje poglede, obrasce, modele, statičke datoteke i predloške.

Možete stvoriti više nacrta iz istog skupa resursa. Međutim, to će vjerojatno stvoriti zabunu i nije dobra praksa.

Stvorite tikvice Blueprint datoteka i direktorija

Počnimo s izradom nacrta tikvice s imenom hello2. Koristite dolje navedenu skriptu za izradu strukture direktorija nakon aktiviranja vašeg virtualnog okruženja upotrebom izvornog venv / bin / activate nakon odlaska u direktorij aplikacija.

blueprint_name='hello2' mkdir '$blueprint_name' mkdir -p '$blueprint_name/templates/$blueprint_name' touch '$blueprint_name/templates/$blueprint_name/hello.html' mkdir '$blueprint_name/static/' touch '$blueprint_name/__init__.py' touch '$blueprint_name/views.py'

Želimo da naš hello2 Blueprint ima svoje stavove koje ćemo uvesti u svoj __init__.py. Izrađujemo zasebni direktorij za naš nacrt s predlošcima i statičkim direktorijima za prikazivanje Flask pogleda i posluživanje statičkih resursa.

Struktura direktorija tikvice

Struktura direktorija za Nacrt trebala bi izgledati kako je prikazano u nastavku. Upotrijebite stablo za stvaranje sličnog rezultata.

Struktura direktorija Flask Blueprint

Create Flask Blueprint View

Ajmo sada definirati jednostavan pogled unutar views.py. Otvorite hello2 / views.py i unesite dolje navedeni isječak koda.

from flask import Blueprint, render_template hello2 = Blueprint( 'hello2', __name__, template_folder='templates', static_folder='static' ) @hello2.route('/hello2') def hello2_view(): greeting = 'Hello World 2' return render_template('hello2/hello.html', greeting=greeting)

Uvozimo klasu Blueprint i metodu render_template. Zatim stvaramo objekt Blueprint davanjem imena predloška i statičkih direktorija.

Zatim definiramo rutu pomoću dekoratera @ hello2.route i kontrolera s imenom hello2_view. Ovaj kontroler je Python funkcija. U ovoj funkciji varijabli koja se naziva pozdrav dodjeljujemo vrijednost, a zatim je prosljeđujemo metodi render_template.

Napravite predložak tikvice

Sada kreirajmo predložak hello.html. Ako ste čitali naše prethodne vodiče, onda ste sigurno primijetili da je predložak istog imena kao i mi koji smo kreirali za prikazivanje prikaza HelloWorld. Za ovaj hello2 nacrt izrađujemo novi predložak proširujući prethodni.

Nadalje, primijetite da smo za pozivanje render_template koristili semantički put hello2 / hello.html za donošenje pozdrava u predlošku. Ovaj obrazac izbjegava sukobe između predložaka s istim imenima.

Upotrijebite dolje navedeni isječak koda za stvaranje hello.html i spremite ga pod hello2 / templates / hello2 / path.

{% extends 'hello.html' %} {% block hello %}

{{ greeting }} , from Software Testing Help.

{% endblock %}

Ovaj je predložak gotovo sličan hello.html. Međutim, nasljeđuje većinu svojih HTML dijelova iz hello.html. Primijetite upotrebu {% block hello%} i {% endblock%}. Block hello u hello2 / hello.html nadjačava blok hello osnovnog predloška hello.html.

Otvorimo sada __init__.py datoteku hello2 nacrta i u njoj spomenimo dolje navedeni kod.

from app.hello2.views import * # expose all views at the blueprint level

U ovoj izjavi uvozimo sve ukrašene metode koje smo kreirali u views.py hello2 nacrta. Ako je potrebno, možemo uvesti samo one metode / kontrolere koji su spremni za upotrebu ili testiranje.

Registrirajte nacrt tikvice s aplikacijom Flask

Otvorimo sada __init__.py u direktoriju aplikacije Flask i registrirajte naš hello2 nacrt kao što je prikazano u donjem kodu.

from app.hello2 import hello2 app.register_blueprint(hello2, url_prefix='/hello2')

Ovdje također imajte na umu da možemo selektivno uvoziti poglede i registrirati samo one koji su spremni za upotrebu ili testiranje.

Pokrenimo našu aplikaciju Flask u načinu otklanjanja pogrešaka naredbom python run.py iz korijenskog direktorija projekta i idite na http: // localhost: 8080 / hello2 da biste provjerili radi li prikaz hello2 u redu.

Rezultat u pregledniku trebao bi biti sličan primjeru prikazanom u nastavku.

Primjer HelloWorld2_View
Pogled na nacrt Hello2

Poradimo na boljoj prezentaciji hello2 plana koristeći Twitterov bootstrap okvir. Štoviše, u sljedećem ćete odjeljku saznati više o neobaveznim parametrima za promjenu ponašanja tikvice. Pogledajmo uz pomoć primjera Nacrta tikvice nazvanog Flask Bootstrap.

Primjer primjene modularne tikvice s nacrtom tikvice

Na temelju našeg učenja o hello2 Flask Blueprint, dodajte još nekoliko nacrta kako bismo razumjeli kako možemo stvoriti modularne aplikacije u Flasku.

Pretpostavimo da imamo web aplikaciju koja posjetiteljima poslužuje sadržaj u obliku e-knjiga, vodiča i tečajeva. Također sadrži neke dodatne sadržaje u vezi s informacijama o timu i početnoj stranici.

Ako ove nove značajke pokušamo prilagoditi postojećoj aplikaciji, morat ćemo stvoriti poglede u views.py i odgovarajuće predloške u direktoriju predloška aplikacije. Slično tome, moramo stvoriti modele i obrasce u model.py i forms.py.

Međutim, održavanje cjelokupnog programskog koda postat će glomazno, a suradnja s ostalim članovima tima bit će prekomplicirana i mogla bi rezultirati sukobima počinjenja ili složenim tijekom razvoja.

Trenutno je u ovom konvencionalnom pristupu struktura prijave kako je prikazano u nastavku.

konvencionalni pristup

Da bismo izbjegli takav scenarij, možemo koristiti Flask Blueprints za stvaranje modula specifičnih za značajke i odgovarajući sadržaj. Stvorimo neke tikvice s njihovim odvojenim resursima.

Svaki izgled Flask Blueprinta izgledat će slično onome prikazanom u nastavku.

Nacrti tikvice

Upotrijebite dolje navedenu skriptu za stvaranje potrebnih datoteka i direktorija za planirane nacrte tikvice. Pokrenite ovu skriptu iz korijenskog direktorija projekta.

cd app for dir in home courses tutorials ebooks do echo 'generating files for $dir ..' mkdir -p $dir/templates/$dir touch $dir/templates/$dir/$dir.html mkdir $dir/static touch $dir/static/style.css touch $dir/__init__.py touch $dir/views.py touch $dir/models.py touch $dir/forms.py done

Stvorimo prvo značajke za kućni modul.

Otvorite views.py u početnom direktoriju i ažurirajte ga dolje navedenim kodom.

from flask import render_template, Blueprint home = Blueprint('home', __name__, template_folder='templates', static_folder='static') @home.route('/') def index(): return render_template('home/home.html')

U ovu datoteku uveli smo klasu Flask's Blueprint i izradili je s potrebnim parametrima s zasebnim predlošcima i statičnom mapom. Zatim koristimo ukras @home za deklariranje pridružene rute metode prikaza koja se naziva indeks.

Sada stvorite base.html predložak Jinja2 u direktoriju predloška aplikacije. Upotrijebite donji kod za ažuriranje datoteke.

from Software Testing Help.

Learn More >> {% endblock %}

Proširili smo se od Bootstrapove baze.html. Primijetite upotrebu div spremnika klase i hero-jedinice. Štoviše, stvorili smo gumb za korisnike da saznaju više. Izmijenili smo ovaj HTML i koristili klase iz Twitterovog okvira Bootstrap.

Sada osvježite stranicu u pregledniku na http: // localhost: 8080 / hello2.html da biste vidjeli promijenjeni izgled hello2.html.

Pogled Promijenjenog Hello2 izgledat će slično prikazanom u nastavku.

HelloWorld2_View_Bootstrap
Pogled Hello2 s Bootstrapom

Korištenje Flask-Bootstrapa u potpunosti ovisi o blokovima koji su dostupni za poništavanje ili izmjenu. Spomenute blokove možemo koristiti za prilagodbu iskustva. Detaljan popis svih mogućih blokova može se vidjeti na https://pythonhosted.org/Flask-Bootstrap/basic-usage.html.

Ponekad kada želimo samo izmijeniti blok, umjesto da ga u potpunosti zamijenimo, možemo koristiti funkciju super () Jinja2 za postizanje rezultata.

Stvorite datoteku koja se naziva hello2.css pod hello2 / static i stavite donji isječak koda kako biste oblikovali boju odlomka u hello2 / hello.html.

p { color: orange; }

Uzmite isječak koda prikazan dolje i stavite ga u hello2 / hello.html.

{% block styles } {{ super() }} {% endblock %}

Sada otvorite views.py Flask Blueprint hello2 i izmijenite naredbu nacrta kao što je prikazano u nastavku.

hello2 = Blueprint('hello2', __name__, template_folder='templates', static_folder='static')

Dođite do registriranog URL-a Flask Blueprint-a, tj. Http: // localhost: 8080 / hello2. Rezultat zbog dosadašnjih promjena trebao bi izgledati kako je prikazano u nastavku.

Pogled Hello2 promijenjen
Pogled Hello2 promijenjen

Docker tikvice

Docker pomaže u kontejnerizaciji aplikacije. Izolira okruženje koje je potrebno aplikaciji Flask na način da nema potrebe za cjelovitim virtualiziranim okruženjima poput virtualnih strojeva.

Osim toga, dock kontejneri imaju minimalan otisak i ugodniji su za upravljanje i skaliranje uz pomoć platforme za orkestraciju. Ovih dana, kada svaka druga aplikacija također ima kontejneriziranu implementaciju, i mi moramo naučiti implementirati našu primjeru aplikacije kao docker spremnik.

Spremnik zasnovan na Linuxu može se izvoditi na sustavima Windows i MAC. Dokirana aplikacija Flask stoga se može instalirati na bilo kojem operacijskom sustavu bez obzira na operativni sustav u kojem je izgrađena.

U ovom ćemo odjeljku objasniti korake doceriranja aplikacije Flask. Docerizirat ćemo ovaj projekt kako bi se mogao rasporediti u spremnik sa svim zavisnostima u njemu.

Prvi, instalirajte Docker na vašem stroju.

sudo apt-get install docker.io

Kada je instalacija završena, idite u korijenski direktorij našeg uzorka projekta i stvorite Dockerfile.

Napišite donji kod u taj Dockerfile.

FROM python:3 ADD . /flaskTutorialApp WORKDIR /flaskTutorialApp RUN pip install -r requirements.txt ENTRYPOINT ('python') CMD ('run.py')

Ažurirajte datoteku config.py i promijenite bazu podataka u SQLite, kao što je prikazano u nastavku.

# The SQLAlchemy connection string. SQLALCHEMY_DATABASE_URI = 'sqlite:///' + os.path.join(basedir, 'app.db') # SQLALCHEMY_DATABASE_URI = 'mysql://myapp@localhost/myapp'

Osim toga, ako ovo prvi put radite sa SQLiteom u ovoj seriji tutorijala, molim vas stvorite administratora pomoću naredbe flask fab create-admin.

Provjerite može li se administrator administracije prijaviti u aplikaciju.

Sada izgradite docker sliku našeg uzorka aplikacije pomoću naredbe u nastavku.

sudo docker build --tag flask-tutorial

Ova naredba traje neko vrijeme dok preuzima resurse s čvorišta dockera. Kada je ova naredba dovršena, provjerite jesu li se slike pojavile pomoću naredbe u nastavku.

sudo docker images

Sada pokrenite ovu nedavno stvorenu Dockerovu sliku.

sudo docker run -p 5001:8080 flask-tutorial:latest

Konzola će prikazati poruke dnevnika razvojnog poslužitelja.

Instalacija Dockera rezultira stvaranjem virtualnog NIC-a s imenom docker0. Pronađite IP adresu pomoću naredbe sudo ifconfig. Nakon što dobijete IP Dockera, aplikaciji možete pristupiti tako da prijeđete na dolje navedeni URL.

http: //: 5001

Nakon što budete sigurni u razvoj aplikacije, možete rasporediti svoju Docker sliku na Docker Hub kako bi je ostali mogli preuzeti i koristiti.

Ispitivanje nacrta tikvice

Sada ćemo stvoriti nekoliko testova za testiranje Blueprint hello2. Pogledajmo vraća li naš uzorak aplikacija točan HTTP kôd kada klijent pošalje zahtjev za dobivanje resursa na / hello2 krajnju točku ili ne. Ako se sjećate, registrirali smo našu Nacrt boce hello2 s url_prefixom s vrijednošću kao / hello2.

Stvorite datoteku pod nazivom test_blueprint.py pod testovima i dodajte sljedeći test u nju.

def test_hello2(client): resp = client.get('/hello2') assert 308 == resp.status_code

HTTP 308 odnosi se na trajno preusmjeravanje i očekuje se da naša aplikacija Flask mora preusmjeriti zahtjev na resurse povezane s planom nazvanim hello2.

Sad ćemo dodati još jedan test za provjeru korijenske staze resursa našeg Nacrta. Dodajmo test da vidimo ima li vrijednost ili ne.

from app.hello2 import hello2 def test_rootpath(): assert hello2.root_path is not None

Ajmo sada pokrenuti ove testove zajedno s ostalim testovima kako bismo bili sigurni da prolaze.

pytest -v

Vidjeli biste sličan rezultat rezultata ispitivanja, kao što je prikazano u nastavku.

Nacrt rezultata Pytesta
Nacrt rezultata Pytesta

Sada unesite sve promjene u repo i objavite te promjene u udaljenom spremištu na Githubu. Usporedite razlike s kodom s onom glavne grane i stvorite zahtjev za povlačenjem ako nema sukoba.

Zahtjev za povlačenje poziva na poslove izrade koji su dio našeg Github Workflowa. Ako sve provjere zahtjeva za povlačenjem iz tutorial-4 ne propadnu, tada možemo sigurno spojiti ovu granu s glavnim.

Vodič za Git Akcije-4
Vodič za Git Akcije-4

Često postavljana pitanja

P # 1) Što je Flask BluePrint?

Odgovor: Nacrt tikvice način je na koji se aplikacija tikvice može strukturirati u manje module koji se mogu ponovno upotrijebiti. Flask Blueprint ima svoje zasebne resurse kao što su pogledi, predlošci, statične datoteke, modeli, obrasci itd. Koristimo Flask Blueprint pristup za stvaranje lako održavanih i skalabilnih aplikacija Flask.

P # 2) Kako se koristi Flask Blueprint?

najbolji wow server za nove igrače 2017

Odgovor: Da bismo koristili Flask Blueprint, moramo ga uvesti i registrirati s objektom Flask Application, pomoću metode app.register_blueprint. Možemo proslijediti vrijednost parametru url_prifix kako bismo dodali putanju do ruta nacrta tikvice.

Zaključak

U ovom smo uputstvu objasnili nacrte tikvice zajedno s konceptima stvaranja statičkih resursa za aplikaciju tikvice. Istražili smo prednosti korištenja Flask Blueprint-a zajedno s razmišljanjima o resursima nacrta uz pomoć dodatka Flask nazvanog Flask-Bootstrap.

Također smo pokrili koncepte stvaranja Dockerove slike primjera tutorial aplikacije Flask. Štoviše, stvorili smo i dva testa za potvrđivanje nacrta tikvice.

U sljedećem uputstvu pokriti ćemo uobičajene obrasce tijekom izgradnje značajki u web aplikacijama pomoću Flaska.

=> Posjetite ovdje da biste naučili tikvicu od nule

Preporučena literatura

^