Öğretici: Visual Studio'da görünümler ve sayfa şablonlarıyla Flask uygulaması oluşturma

Bu makalede, Visual Studio 'da Flask web çerçevesiyle çalışmaöğretici serisinin 2. Adımı açıklanmaktadır.

Visual Studio, projeleriniz için daha kapsamlı bir başlangıç noktası sağlayan proje şablonlarından Flask uygulamaları oluşturmanıza olanak tanır. Öğretici 1. Adım, tüm kodun tek bir dosyada yer aldığı tek sayfalı bir Flask uygulamasının nasıl oluşturulacağını açıklar. 2. Adım'da kodu yeniden düzenledikten sonra daha fazla geliştirmeyi etkinleştirmek üzere sayfa şablonları için bir yapı oluşturursunuz. Özellikle, uygulama görünümleri için kodu başlangıç kodu gibi diğer yönlerden ayırmak istiyorsunuz.

Kılavuzun 2. Adımında nelerin nasıl yapılacağı öğreneceksiniz:

• Uygulama kodunu, görünümleri başlangıç kodundan ayırmak için yeniden düzenleme
• Sayfa şablonu kullanarak bir görünüm oluşturma

Önkoşullar

• 1. Adım: Visual Studio çözümü ve Flask projesi oluşturma. Visual Studio çözümü ve Flask uygulama projesi oluşturuldu.

Daha fazla geliştirme için Flask projesini yeniden düzenleme

Boş Flask Web Projesi şablonu, tek bir görünümün yanı sıra başlangıç kodu içeren tek bir app.py dosyasıyla proje oluşturmanıza olanak tanır. Birden çok görünüme ve şablona sahip bir uygulamanın daha fazla geliştirilmesine olanak sağlamak için bu işlevleri ayırmanız gerekir.

Flask projenizi daha fazla geliştirme sağlayacak şekilde ayarlamak için şu adımları izleyin:

1. Çözüm Gezgini'de, Flask proje klasörünüze (BasicProject) sağ tıklayın ve Ekle>Yeni Klasörseçin.

   

2. HelloFlask yeni uygulama klasörünü adlandırın.

3. HelloFlask klasörüne sağ tıklayın ve yeni bir dosya oluşturmak için >Yeni Öğe ekle'yi seçin.

4. Yeni Öğe Ekle iletişim kutusunda Boş Python Dosyası dosya şablonunu seçin:

   1. dosyayı __init__.pyolarak adlandırın. Dosya adı, _sözcüğünün çevresinde iki başta ve iki son alt çizgi karakteri () içermelidir.

   2. Ekle'ı seçin.

   

5. Flask örneğini oluşturan ve uygulama görünümlerini yükleyen yeni dosyaya aşağıdaki kodu ekleyin:

   from flask import Flask
   app = Flask(__name__)
   
   import HelloFlask.views
   

6. HelloFlask klasöründe views.pyadlı yeni bir Python dosyası oluşturun.

   Önemli

   Dosya adını views.pyolarak belirttiğinizden emin olun. adı görünüm, import HelloFlask.views dosyasındaki ifade nedeniyle önemlidir. görünümlerin adı her iki örnekte de aynı değilse, Visual Studio çalışma zamanında bir hata gösterir.

7. aşağıdaki kodu views.py dosyasına ekleyin. Bu kod işlevi yeniden adlandırır ve /home uç noktasına dönüş yolunu tanımlar:

   from flask import Flask
   from HelloFlask import app
   
   @app.route('/')
   @app.route('/home')
   def home():
       return "Hello Flask!"
   

   Bu kod ayrıca app.py dosyasındaki sayfa işleme kodunu içerir ve app dosyasında bildirilen nesnesini içeri aktarır.

8. HelloFlask klasöründe, şablonları adlı bir alt klasör oluşturun. Klasör şimdilik boş.

9. Flask proje klasöründe (BasicProject), app.py dosyasının içeriğini aşağıdaki kodla değiştirin:

   import os
   from HelloFlask import app    # Imports the code from HelloFlask/__init__.py
   
   if __name__ == '__main__':
       HOST = os.environ.get('SERVER_HOST', 'localhost')
   
       try:
           PORT = int(os.environ.get('SERVER_PORT', '5555'))
       except ValueError:
           PORT = 5555
   
       app.run(HOST, PORT)
   

10. Kodu güncelleştirdikten sonra app.py dosyasını runserver.pyolarak yeniden adlandırın.

11. Yeniden düzenlenmiş Flask proje yapınızın aşağıdaki örneğe benzediğini onaylayın:

    

Yeniden düzenlenmiş programı çalıştırma ve yolları denetleme

Artık projenizi Visual Studio'da çalıştırmaya hazırsınız:

1. Visual StudioHata Ayıklama>Hata Ayıklamayı Başlat (F5) öğesini seçin veya ana araç çubuğunda web sunucusu seçin (gördüğünüz tarayıcı farklılık gösterebilir):

2. Uygulama tarayıcıda açıldığında, tarayıcıda hem / (kök) hem de /home URL yol uç noktalarını deneyin:

   

Hata Ayıklayıcı'da güncelleştirilmiş programı çalıştırma

Ayrıca kodun çeşitli bölümlerinde kesme noktaları ayarlayabilir ve Hata Ayıklayıcısıiçindeki uygulama başlatma sırasını izleyebilirsiniz:

1. Aşağıdaki noktalar gibi birkaç kesme noktası ayarlayın:

   • runserver.py dosyasının ilk satırı
   • __init__.py dosyasının ilk satırı
   • return "Hello Flask!" dosyasındaki satırı

2. Hata AyıklayıcıHata Ayıklama>Hata Ayıklamayı Başlat veya F5'i seçerek uygulamayı çalıştırın.

3. Hata Ayıklayıcısı çalışırken, F10ile kodda ilerleyin veya F5ile her kesme noktasından kodu çalıştırın. Visual Studio'da ana araç çubuğundaki Devam, Durdur , Yeniden Başlatve Adım seçenekleri gibi hata ayıklama denetimlerini de kullanabilirsiniz:

   

4. İşiniz bittiğinde, uygulamayı durdurmak için Ctrl+C ve ardından herhangi bir tuş seçin. Ayrıca, yollar için tüm açık tarayıcı pencerelerini kapatabilirsiniz.

Değişiklikleri kaynak denetimine işleme

Kodu yeniden düzenledikten ve güncelleştirmeleri test ettikten sonra, değişikliklerinizi gözden geçirip kaynak denetimine işleyebilirsiniz:

1. Ctrl+S klavye kısayolu gibi proje dosyalarınızdaki değişiklikleri kaydedin.

2. Git denetimleri çubuğunda, Git Değişiklikleri penceresini açmak için kaydedilmemiş değişiklikleri (kalem 5) seçin.

   

3. Git Değişiklikleri penceresinde bir işlem mesajı girin ve Tümünü İşleseçin:

   

   İşleme tamamlandığında Visual Studio, yerel olarak oluşturulan commit <karma>iletisini görüntüler.

4. (İsteğe bağlı) Kaydedilmiş değişiklikleri uzak deponuza gönderin:

   1. Git denetimleri çubuğunda giden/gelen işlemeleri (1/0 okları) seçin.

   2. Eşitleme (Çek ve Gönder) veya Göndermeseçeneğini belirleyin.

   

   Uzak depoya göndermeden önce birden çok yerel commitleri de biriktirebilirsiniz.

Bu öğretici serisindeki sonraki yordamlar için, kaynak denetiminde değişiklikleri işleme adımları için bu bölüme başvurabilirsiniz.

İşleme ve gönderme sıklığını belirleme

Değişiklikleri kaynak denetimine işlemek, değişiklik günlüğünde bir kayıt ve depoyu gerektiği gibi geri döndürebileceğiniz bir nokta oluşturur. Ayrıca her işlemeyi inceleyerek belirli değişiklikleri gözden geçirebilirsiniz.

Git'teki işlemeler ucuzdur. Çok sayıda değişiklik biriktirmek ve bunları tek bir işleme olarak göndermek yerine, değişikliklerinizi sık işlemelerle küçük miktarlarda göndermeniz tercih edilebilir.

Her küçük değişikliği tek tek dosyalara işlemeniz gerekmez. Bir özellik eklediğinizde, öğretici serisinin bu Adımında gösterildiği gibi bir yapıyı değiştirdiğinizde veya bazı kodları yeniden düzenlediğinizde genellikle işleme yapılır. Ayrıca, herkes için en uygun işlemelerin ayrıntı düzeyi konusunda anlaşmaya varmak için işbirliği yaptığınız kişilerle birlikte kontrol etmek de iyi bir uygulamadır.

Değişiklik yapma sıklığınız ve değişiklikleri uzak bir depoya ne sıklıkla gönderdiğiniz iki farklı konudur. Uzak depoya göndermeden önce yerel deponuzda birden fazla komit biriktirebilirsiniz. İşleme sıklığı, ekibinizin depoyu nasıl yönetmek istediğine bağlıdır.

Sayfaları ve görünümleri işlemek için şablonları kullanma

home dosyasındaki işlevi, sayfa için düz metin bir HTTP yanıtı oluşturur. Çoğu gerçek dünya web sayfası, genellikle canlı verileri içeren zengin HTML sayfalarıyla yanıt verir. Geliştiricilerin görünümleri işlev kullanarak tanımlamasının birincil nedeni, içeriği dinamik olarak oluşturmaktır.

Görünümün dönüş değeri yalnızca bir dizedir. Dinamik içerik kullanarak bir dize içinde herhangi bir HTML oluşturabilirsiniz. İşaretlemeyi verilerden ayırmak en iyisi olduğundan, işaretlemeyi bir şablona yerleştirmek ve verileri kodda tutmak daha iyidir.

Görünümleri satır içi HTML kullanacak şekilde ayarlama

İlk adım, görünüm işlemeyi sayfanın satır içi HTML'sini bazı dinamik içeriklerle kullanacak şekilde dönüştürmektir:

1. views.py dosyasının içeriğini aşağıdaki kodla değiştirin:

   from datetime import datetime
   from flask import render_template
   from HelloFlask import app
   
   @app.route('/')
   @app.route('/home')
   def home():
       now = datetime.now()
       formatted_now = now.strftime("%A, %d %B, %Y at %X")
   
       html_content = "<html><head><title>Hello Flask</title></head><body>"
       html_content += "<strong>Hello Flask!</strong> on " + formatted_now
       html_content += "</body></html>"
   
       return html_content
   

2. Değişikliklerinizi kaydedin ve uygulamanızı yeniden çalıştırın.

3. Tarih ve saatin güncelleştirildiğini onaylamak için sayfayı birkaç kez yenileyin. İşiniz bittiğinde uygulamayı durdurun.

HTML şablonu oluşturma

Ardından, sayfa işleme işlemini HTML şablonu kullanacak şekilde dönüştürün:

1. şablonları klasörüne sağ tıklayın ve yeni bir dosya oluşturmak için >Yeni Öğe ekle seçeneğini seçin.

2. Yeni Öğe Ekle iletişim kutusunda HTML Sayfası dosya şablonunu seçin. Dosyayı index.html adlandırın ve ekleseçin.

3. HTML dosyasının sağlanan içeriğini aşağıdaki işaretlemeyle değiştirin:

   <html>
   <head>
      <title>Hello Flask</title>
   </head>
   
   <body>
      {{ content }}
   </body>
   </html>
   

   Bu kodda {{ content }} ifadesi, kodda bir değer sağladığınız yer tutucu veya değiştirme simgesidir (şablon değişkeniolarak da adlandırılır).

Ana sayfa işlevini şablon yüklenecek şekilde ayarla

home yöntemini kullanmak için render_template işlevini değiştirmeniz gerekir. Bu yöntem HTML şablonunu yükler ve yer tutucunun adıyla eşleşen adlandırılmış bir bağımsız değişken kullanarak {{ content }} için bir değer sağlar.

1. views.py dosyasında, home işlev tanımını aşağıdaki kodla değiştirin:

   def home():
       now = datetime.now()
       formatted_now = now.strftime("%A, %d %B, %Y at %X")
   
       return render_template(
           "index.html",
           content = "<strong>Hello, Flask!</strong> on " + formatted_now)
   

   Flask, şablonları klasöründeki şablonları otomatik olarak arar, dolayısıyla şablonun yolu bu klasöre göredir.

2. Proje değişikliklerinizi kaydedin ve uygulamayı yeniden çalıştırın.

   şablon oluşturma altyapısı (Jinja) HTML içeriğini otomatik olarak kaçış karakterleriyle işlediğinden, \<strong> değeri içindeki satır içi HTML söz dizimi (content ...) HTML olarak işlenmediğini fark edeceksiniz. Otomatik kaçış, enjeksiyon saldırılarına yönelik yanlışlıkla oluşan güvenlik açıklarını önler.

   Geliştiriciler genellikle bir sayfadan giriş toplar ve şablon yer tutucusu kullanarak bunu başka bir sayfada değer olarak kullanır. Kaçış, HTML'yi koddan uzak tutmanın en iyisi olduğunu da anımsatır.

   İşiniz bittiğinde uygulamayı durdurun.

Ayrı yer tutucuları kullan

HTML işaretlemesi içindeki her veri parçası için ayrı yer tutucular kullanabilirsiniz. Ardından, home işlevinizi belirli yer tutucu değerlerini sağlayacak şekilde yeniden ayarlayın:

1. index.html dosyasının içeriğini aşağıdaki işaretlemeyle değiştirin:

   <html>
     <head>
       <title>{{ title }}</title>
     </head>
     <body>
       <strong>{{ message }}</strong>{{ content }}
     </body>
   </html>
   

2. views.py dosyasında, home işlev tanımını aşağıdaki kodla değiştirerek tüm yer tutucular için değerler sağlayın:

   def home():
       now = datetime.now()
       formatted_now = now.strftime("%A, %d %B, %Y at %X")
   
       return render_template(
           "index.html",
           title = "Hello Flask",
           message = "Hello, Flask!",
           content = " on " + formatted_now)
   

3. Değişikliklerinizi kaydedin ve uygulamanızı yeniden çalıştırın. Bu kez düzgün işlenmiş çıkışı görmeniz gerekir:

   

4. Değişikliklerinizi kaynak denetimine kaydedebilir ve uzak deponuzu güncelleştirebilirsiniz. Daha fazla bilgi için bkz. Kaynak kontrolüne değişiklikleri işleme.

Ayrı sayfa şablonları

Şablonlar genellikle ayrı HTML dosyalarında tutulur, ancak satır içi şablon da kullanabilirsiniz. İşaretlemesi ve kod arasında temiz bir ayrım yapmak için ayrı dosyalar önerilir.

Şablonlar için .html uzantısını kullanma

Sayfa şablonu dosyalarının .html uzantısı tamamen isteğe bağlıdır. render_template işlevinin ilk bağımsız değişkeninde dosyanın tam göreli yolunu her zaman tanımlayabilirsiniz. Ancak Visual Studio (ve diğer düzenleyiciler) genellikle .html dosyalarıyla kod tamamlama ve söz dizimi renklendirme gibi özellikler sağlar ve bu da sayfa şablonlarının HTML olmamasından daha ağır basar.

Bir Flask projesiyle çalışırken, Visual Studio düzenlediğiniz HTML dosyasının aslında bir Flask şablonu olup olmadığını otomatik olarak algılar ve belirli otomatik tamamlama özellikleri sağlar. Bir Flask sayfa şablonu açıklaması ({#) girmeye başlarsanız, Visual Studio kapanış #} karakterlerini otomatik olarak ekler. açıklama seçimini ve Açıklama Seçimini Kaldır komutları (Düzenle>Gelişmiş menüsünde) HTML açıklamaları yerine şablon açıklamalarını da kullanır.

Şablonları alt klasörler halinde düzenleme

Alt klasörleri kullanabilir ve ardından işlevine yapılan çağrılarda render_template klasörünün altındaki göreli yola başvurabilirsiniz. Bu yaklaşım, şablonlarınız için etkili bir şekilde ad alanları oluşturmanın harika bir yoludur.

Sonraki adım

Adım 3: Statik dosyaları sunma, sayfa ekleme ve şablon devralma kullanma