Menü

Flask Şablonu, Form, Görünüm ve Örneklerle Yönlendirme

  • Ana
  • Diğer
  • Flask Şablonu, Form, Görünüm ve Örneklerle Yönlendirme

flask template form

Sorunları Ortadan Kaldırmak Için Enstrümanımızı Deneyin

Bu eğitici, Flask Şablonu, Form, Görünüm, Yanıt ve Yönlendirme'nin ne olduğunu açıklar ve pratik örneklerle:

Genel olarak Şablon Oluşturma, Programlamada metnin bir bölümünü farklı verilerle yeniden kullanmak için kullanılır. Web geliştirme ile ilgili olarak, Tasarımcılar verileri insan okuyucular için okunabilir ve çekici bir biçimde görüntülemek için şablonlar kullanır.

Bir şablon tasarımı, genellikle insan etkileşiminin yarattığı karmaşıklıklar nedeniyle bir dilin kullanılmasını içerir.

=> Flask Yeni Başlayanlar Kılavuzuna Bir Göz Atın

Flask Şablonları, Görünümleri ve Formları

Ne öğreneceksin:

Giriş

Flask, Kullanıcının etkileşim düzeyine göre bir uygulamanın davranışını görüntüleyen Jinja2 adlı bir şablon oluşturma motoru kullanır. Bir Jinja şablonu değişkenler, ifadeler ve etiketler kullanır.

Değişkenler ve ifadeler, tarayıcıda sayfa oluşturmadan önce çalışma süresi sırasında değerlerle değiştirilir. Jinja etiketleri, Flask şablonunda mantık ve kontrol ifadelerinin yazılmasına yardımcı olur.

Şişe Görünümü

Flask görünümü kavramı, Model-View-Controller adlı yaygın bir web uygulaması tasarım modelinden türetilmiştir. Görünüm, bu paradigmadaki birbiriyle bağlantılı üç öğeden biridir ve burada uygulama mantığıyla ilgilenir. Görünüm, Kullanıcıya bilgilerin sunumuyla ilgilenir.

Önceki eğitimimizde, Flask-Appbuilder'ın BaseView sınıfını alt sınıflara ayırarak bir Görünüm tasarladık. Bu eğitimin sonraki bölümünde, son örneğimizi genişleteceğiz ve Görünümlerin özelleştirilebileceği yolları sunacağız.

Cep Şişesi Şablonu

Başlayalım ve ilk şablonumuzu yazalım. Şablon dizini altında merhaba.html adlı bir dosya oluşturun.

Aşağıdaki kodu o dosyaya yazın ve kaydedin.

Hello World!, from Software Testing Help.

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

{{item}}

{% else %}

{{item}}

{% endif %} {% endfor %}

Döngü için Şablon

Yukarıdaki Flask şablonunda, listedeki öğeler üzerinde yineleme yapmak için bir for döngüsü kullandık. Denetleyicimizde veya işleyicimizde, şablona selamlama değerleri içeren bir liste geçirdik. Şablonun içinde, her öğeye {{öğe}} sözdizimini kullanarak erişiriz.

Blok ise şablon

Ayrıca, bir if ifadesinin kullanımını not edin. Burada öğeyi Sabah için test edip kalın ve italik hale getiriyoruz.

Şimdi, Flask Formlarının kavramları hakkında daha fazla bilgi edinmek için bir adım öne geçelim.

Flask Formları

Şablon oluşturmanın en önemli yönlerinden biri, kullanıcılardan girdi almak ve bu girdiye göre arka uç mantığı yazmaktır. Bir form oluşturalım.

Formumuzu oluşturmak için Flask-Appbuilder SimpleFormView kullanıyoruz. Ancak önce bir form oluşturalım. Form oluşturmaya ek olarak, bir yönetici kullanıcı oluşturmak için flask fab create-admin komutunu kullanmamız gerekir.

Bu nedenle, geliştirme sunucusunu başlatmadan önce komutu kullanın, böylece daha sonra oluşturulan görünümler ve formlar oturum açmış bir kullanıcı tarafından doğrulanabilir. Yönetici kullanıcı ile oturum açıyoruz ve oluşturulan görünümlerin ekran görüntülerinde gösterildiği gibi menü altında göründüğünü doğrulamaya devam ediyoruz.

Yönetici Oluştur

Bir yönetici kullanıcı oluşturmak için aşağıdaki komutu kullanın.

flask fab oluştur-yönetici

Yönetici kimlik bilgileriyle giriş yapın

  • Http: // localhost: 8080'e gittikten sonra Oturum Aç'a tıklayın.
Yönetici olarak oturum açın
Yönetici olarak oturum açın
  • Önceki bölümde oluşturulan Yönetici kimlik bilgileriyle oturum açın.
Giriş
Oturum aç'a tıklayın
  • Görünümlerinize erişmek için Formlarım kategorisine tıklayın.
Menüye tıklayın
Menüye tıklayın

Not: Son adımı yalnızca gezinme çubuğunda gösterilen varsayılan menüye görünümleri ekledikten sonra gerçekleştirebileceksiniz.

Devam edelim ve bazı forma dayalı görünümler oluşturalım.

Uygulama dizininin altında forms.py adlı bir dosya oluşturun ve aşağıdaki kodu içine yazın.

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

Flask-Appbuilder'dan DynamicForm'a dayalı bir form oluşturduk. Dört metin alanı vardır. Selam örneğimizi uzatıyoruz. Dört alandan ikisi zorunlu ve ikisi isteğe bağlıdır çünkü ilk iki selamlama için doğrulayıcıların değerlerinden bahsettik.

Şimdi bu form için bir görünüm oluşturalım. Aşağıdaki kod satırlarını views.py dosyasına yazın.

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

Yukarıdaki görüşümüzde, sırasıyla form alanlarındaki varsayılan değerleri doldurmak ve form tarayıcıdan gönderildikten sonra girilen değerleri okumak için form_get ve form_post adında iki yöntemimiz var.

GreetingsView, aşağıdaki görüntüde gösterildiği gibi formu görüntüler.

Selamlar Formu

Ayrıca, alan değerlerini form_post'ta saklamak için bir Flask oturum nesnesini kullanırız, böylece yazmak üzere olduğumuz ilgili yeni görünümde aynısına erişebiliriz.

Şimdi HelloWorld sınıfını değiştirelim ve selamlamaları görüntülemek için başka bir yöntem ekleyelim. Biz buna hello_greetings2 diyeceğiz.

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

Bu görünümde, oturum nesnesindeki değerleri okuruz ve bu değerleri kullanıcıya dönük HTML'de görüntülemek için Flask oluşturma şablonunu kullanırız. Hello_greetings2'nin, hello_greetings'e benzer aynı işlevselliği elde etmenin alternatif bir yolu olduğuna dikkat edin.

Tek fark, hello_greetings2'yi kullanarak, Kullanıcı tarafından girilen değerleri gösteriyor olmamız ve hello_greetings'de Kullanıcıdan herhangi bir girdi almadık ve ilgili rotaya eşlenen görünümü yazarken bunları kodladık.

Şişe Yanıtı

Kodda Flask yanıtının açık kullanımını bulmanız oldukça nadirdir. Flask'taki Response sınıfı, Werkzueg’in Response sınıfından Response sınıfının yalnızca bir alt sınıfıdır ve bu da ResponseBase sınıfını alt sınıflara ayırır.

Bir dönüş ifadesini veya render_template gibi bir yöntemi çağırdığımızda, Flask Response nesnesi Flask tarafından dahili olarak oluşturulur.

Ayrıca, aşağıdaki değiştirilmiş HelloWorld görünümünde gösterildiği gibi, görünümlerimizdeki dönüş ifadesinin bir parçası olarak gerekirse yanıt kodunu ve içerik türünü özelleştirebiliriz.

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'

Dosya boyutu ve ağ bant genişliğinin kısıtlamaları nedeniyle tüm içeriği bir kerede döndürmek yerine içeriği akışa aldığımızda Flask'ın Response sınıfının doğrudan kullanımı bir kullanım durumunda ele alınabilir.

Aşağıda, büyük bir CSV'den içerik akışının bir örneğini gösterdik.

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

Flask Yönlendirmesi

Bir uygulamanın, istemciden gelen farklı isteklere dayalı olarak yanıtı önceden tanımlaması her zaman mümkün değildir.

Bir talebe yanıt olarak diğer görünümler veya konumlar tarafından yerine getirilebilecek içeriği sunmanın mümkün olduğu senaryolarda Flask Redirect'i kullanıyoruz. Flask Redirect'i standart HTTP dönüş kodlarıyla birlikte iptal ile birlikte kullanıyoruz.

Örneğin, Aşağıdaki kodda, HTTP Code 301 ile Yönlendirmeyi kullandık ve 401 ile iptal ettik.

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

Ayrıca, selamlama değerlerini oturum nesnesinde saklayarak bir isteği dahili olarak farklı bir görünüme yeniden yönlendirmek için Flask redirect ve url_for'u kullandığımız GreetingsView'a bakın. Flask yönlendirmesi, her zaman varsayılan veya verilen durum kodu ile uygulamadaki başka bir konuma bir yanıt nesnesi döndürür.

Flask Debugtoolbar

Son eğiticimizde Flask’ın etkileşimli hata ayıklayıcısını zaten tanıttık. Bu eğiticide, Flask uygulamasının hata ayıklamasını kolaylaştırmak için bir adım daha atıyoruz. Kurulduktan sonra, Flask Debug araç çubuğu, Flask uygulamasının üzerinde bir kaplama olarak görüntülenir.

Flask Debug araç çubuğunu kurun.

pip install flask-debugtoolbar

Hata ayıklama araç çubuğunu etkinleştirmek için projemizde __init__.py dosyasını açın ve aşağıdaki kod satırlarını ekleyerek kodu değiştirin.

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

Lütfen Flask hata ayıklama araç çubuğunun yalnızca hata ayıklama modunda etkinleştirildiğini unutmayın. Etkinleştirildikten sonra, uygulamanızı yeniden yüklediğinizde iki şey göreceksiniz.

# 1) Hata Ayıklama Araç Çubuğu, tarayıcının sağ tarafında görünür. Araç çubuğunun sağladığı çeşitli özellikleri görmek için tıklayın ve genişletin.

Araç çubuğu aktivasyonunda hata ayıklama
Araç çubuğu aktivasyonunda hata ayıklama

#iki) Uygulamaya yeni bir POST isteği gönderildiğinde, uygulamanın hata ayıklamasına ilişkin değişkenleri ve diğer parametreleri inceleyebilmemiz için araç çubuğu tarafından durdurulur.

Araç çubuğu engellemesinde hata ayıklama
Araç çubuğu engellemesinde hata ayıklama

Bu varsayılan kesişme, aşağıdaki yapılandırma ile devre dışı bırakılabilir.

app.config('DEBUG_TB_INTERCEPT_REDIRECTS') = False Pytest sonuçları
Araç çubuğu değişkenlerinde hata ayıklama

Şimdi, örnek uygulamada sunduğumuz ek özellikler için görüşlerimizi test etmek için birkaç test yazalım.

eclipse için c ++ derleyicisi

Teste devam etmeden önce, lütfen aşağıda __init__.py'de gösterildiği gibi hata ayıklamayı devre dışı bırakın. Alternatif olarak, aşağıdaki satırı yorumlayabilirsiniz.

app.debug = False

Flask Uygulama Görünümlerini Test Etme

Daha yönetilebilir hale getirmek için test kodunu düzenlememiz gerekiyor. Kök dizinde conftest.py adlı bir dosya oluşturun ve aşağıda belirtilen satırları test_hello.py'den bu dosyaya taşıyın.

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

pytest fikstürleri çalışma zamanında pytest tarafından yüklenir. Bu fikstürler mevcuttur ve tüm testlerle paylaşılır. Herhangi bir projenin kök yolunda bir conftest.py tanımlamak en iyi uygulama olarak kabul edilir, çünkü pytest projedeki tüm modülleri açık bir PYTHONPATH belirtmeden tanıyabilir.

Test_hello dosyası için bir test daha ekleyin. Aşağıda örnek bir test verilmiştir. İstemci nesnesinin get yöntemini çağırırız ve resp.data'da depolanan yanıt verilerinde beklenen değeri ileri süreriz.

Benzer şekilde, çeşitli görünümlere işaret eden daha fazla test yazabilirsiniz. Sonraki derslerde daha fazla test yazacağız.

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

Projenin kök dizininden aşağıdaki komutu kullanarak testleri çalıştırın.

pytest -v

Test çalıştırması, aşağıda gösterildiği gibi konsolda test sonuçlarını üretir:

Pytest
Pytest sonuçları

Henüz başarısızlık yok. Aşağıda belirtildiği gibi bir test daha tasarlayalım.

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

Views.py dosyasındaki HelloWorld sınıfında herhangi bir mesaj niteliği tanımlamadığımız için bu test başarısız olacaktır.

Pytest -v kullanarak testleri çalıştırdığınızda, aşağıda gösterilen resme benzer sonuçlar konsolda görüntülenecektir.

Pytest'te başarısızlık

Aşağıdaki bölüm, testleri bir CI / CD platformunda çalıştırırken gerçekleştirmemiz gereken adımları açıklamaktadır. Aynı proje için Git Actions kullanıyoruz.

Git Eylemleriyle CI / CD

Şimdi dosyalardaki tüm değişiklikleri kaydediyoruz ve bu eğitici için mesaj vererek bir commit oluşturuyoruz. Yerel depoyu kaydettikten sonra, uzaktaki yeni değişikliklerle herhangi bir çakışma olup olmadığını görmek için değişiklikleri uzak başlangıç ​​noktasından –rebase bayrağıyla çekeriz. Geçmişi tutarlı tutmak için yeniden ödeme yapıyoruz.

Değişiklikleri uzak başlangıç ​​noktasından çekmek ve birleştirmek için aşağıdaki komutu kullanın. Ancak, değişiklikleri uzaktan kumandadan çekmeden önce uygulayın.

git pull origin master --rebase

Şimdi yerel ana dalı kontrol edin ve öğretici-2 dalıyla birleştirin. Birleştirme başarılı olduktan sonra, bu değişiklikleri kaynağın ana sayfasında yayınlayın. Bu eylem, hedef platformlardaki yapıları başlatacaktır. Bu kodu en son Ubuntu üzerinde Python3.7 ve Python 3.8 üzerinde test ediyoruz.

Sonuç

Bu eğiticide, şablonların Flask çerçevesinde nasıl çalıştığını gördük. Değişkenler ve ifadeler kullanarak, kullanıcı tanımlı değerlerle şişe şablonları oluşturma ve işleme adımlarını özetledik.

Ayrıca, Flask Appbuilder eklentisinin önceden tanımlanmış BaseView görünümünün örneklerini de gördük. Bu görünüm, özel görünümler oluşturmak için Flask geliştiricileri tarafından kolayca alt sınıflandırılabilir.

Şimdiye kadar ele alınan kavramlar, okuyucuların Flask'ı veritabanı arka ucu olmadan kullanarak hızlı bir şekilde statik ve dinamik web siteleri oluşturmalarına yardımcı olur. Flask ile Veritabanlarını kullanma konseptini gözden geçirdiğimizde, bir sonraki eğitimde ModelView ile veritabanlarından nasıl veri okunup yazılacağını açıklayacağız.

=> Easy Flask Eğitim Serisini Okuyun

Önerilen Kaynaklar

^