2. Adım: Görünümler ve sayfa şablonlarıyla Flask uygulaması oluşturma

Makale
09/08/2023

Önceki adım: Visual Studio projesi ve çözümü oluşturma

Bu öğreticinin 1. adımında, bir sayfa ve tüm kodu tek bir dosyada içeren bir Flask uygulaması oluşturdunuz. Gelecekteki geliştirmelere izin vermek için kodu yeniden düzenlemek ve sayfa şablonları için bir yapı oluşturmak en iyisidir. Özellikle, uygulamanın görünümleri için kodu başlangıç kodu gibi diğer yönlerden ayırmak istiyorsunuz.

Bu adımda şimdi nasıl yapılacağını öğreneceksiniz:

Görünümleri başlangıç kodundan ayırmak için uygulamanın kodunu yeniden düzenleme (2-1. adım)
Sayfa şablonu kullanarak görünüm işleme (2-2. adım)

2-1. Adım: Projeyi daha fazla geliştirmeyi destekleyecek şekilde yeniden düzenleme

"Boş Flask Web Projesi" şablonu tarafından oluşturulan kodda, tek bir görünümün yanı sıra başlangıç kodu içeren tek bir app.py dosyanız vardır. Birden çok görünüme ve şablona sahip bir uygulamanın daha fazla geliştirilmesine olanak sağlamak için en iyisi bu endişeleri ayırmaktır.

Proje klasörünüzde adlı HelloFlask bir uygulama klasörü oluşturun (Çözüm Gezgini'da projeye sağ tıklayın ve Yeni Klasör Ekle'yi>seçin.)
HelloFlask klasöründe, örneği oluşturan Flask ve uygulamanın görünümlerini yükleyen (sonraki adımda oluşturulan) aşağıdaki içeriklere sahip __init__.py adlı bir dosya oluşturun:
```
from flask import Flask
app = Flask(__name__)

import HelloFlask.views
```
HelloFlask klasöründe, aşağıdaki içeriklere sahip views.py adlı bir dosya oluşturun. __init__.py içinde kullandığınız import HelloFlask.views için views.py adı önemlidir; adlar eşleşmiyorsa çalışma zamanında bir hata görürsünüz.
```
from flask import Flask
from HelloFlask import app

@app.route('/')
@app.route('/home')
def home():
    return "Hello Flask!"
```
İşlevi yeniden adlandırmaya ve adresine yönlendirmeye homeek olarak, bu kod app.py sayfa işleme kodunu içerir ve __init__.py'de bildirilen nesneyi içeri aktarırapp.
HelloFlask'ta şimdilik boş kalan templates adlı bir alt klasör oluşturun.

Projenin kök klasöründe app.py runserver.pyolarak yeniden adlandırın ve içeriğin aşağıdaki kodla eşleşmesini sağlayın:

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)

Proje yapınız aşağıdaki görüntü gibi görünmelidir:
Hata AyıklamaYı>Başlat Hata Ayıklama 'yı (F5) seçin veya uygulamayı başlatmak ve bir tarayıcı açmak için araç çubuğundaki Web Sunucusu düğmesini (gördüğünüz tarayıcı farklılık gösterebilir) kullanın. Hem / hem de /home URL yollarını deneyin.
Ayrıca kodun çeşitli bölümlerinde kesme noktaları ayarlayabilir ve başlatma sırasını izlemek için uygulamayı yeniden başlatabilirsiniz. Örneğin, runserver.py ve *HelloFlask_*init_.py'nin ilk satırlarında ve return "Hello Flask!" views.py satırında bir kesme noktası ayarlayın. Ardından uygulamayı yeniden başlatın (Yeniden Başlat>, Ctrl+Shift+F5 veya aşağıda gösterilen araç çubuğu düğmesi) ve kodu (F10) ilerletin veya F5 kullanarak her kesme noktasından komutunu çalıştırın.
İşiniz bittiğinde uygulamayı durdurun.

Kaynak denetimine işleme

Kodda değişiklik yaptıktan ve başarıyla test ettikten sonra, değişikliklerinizi gözden geçirebilir ve kaynak denetimine işleyebilirsiniz. Sonraki adımlarda, bu öğretici kaynak denetimine yeniden işlemenizi hatırlattığında bu bölüme başvurabilirsiniz.

Ekip Gezgini'ne gitmek için Visual Studio'nun alt kısmındaki değişiklikler düğmesini seçin (aşağıda daire içine alın).
Takım Gezgini'nde "Kodu yeniden düzenle" gibi bir işleme iletisi girin ve Tümünü İşle'yi seçin. İşleme tamamlandığında Yerel olarak oluşturulan commit <karma> iletisini görürsünüz. Değişikliklerinizi sunucuyla paylaşmak için eşitleyin. Değişiklikleri uzak deponuza göndermek istiyorsanız Eşitle'yi ve ardından Giden İşlemeler'in altında Gönder'i seçin. Uzak sunucuya göndermeden önce birden çok yerel işleme de biriktirebilirsiniz.

Soru: Bir kaynak denetimine ne sıklıkta işlemelidir?

Yanıt: Değişiklikleri kaynak denetimine işlemek, değişiklik günlüğünde bir kayıt ve gerekirse depoyu geri döndürebileceğiniz bir nokta oluşturur. Her işleme belirli değişiklikler için de incelenebilir. Git'teki işlemeler ucuz olduğundan, tek bir işlemede daha fazla sayıda değişiklik biriktirmekten daha sık işlemeler yapmak daha iyidir. Her küçük değişikliği tek tek dosyalara işlemeniz gerekmez. Genellikle, bir özellik eklerken, bu adımda yaptığınız gibi bir yapıyı değiştirirken veya bazı kodları yeniden düzenlediğinizde bir işleme yaparsınız. Ayrıca, herkes için en uygun işlemelerin ayrıntı düzeyi için ekibinizdeki diğer kişilerle birlikte kontrol edin.

İşleme sıklıkları ve işlemeleri uzak depoya ne sıklıkta gönderdiğiniz iki farklı sorundandır. Yerel deponuzda birden çok işlemeyi uzak depoya göndermeden önce birikebilir. İşleme sıklığı, ekibinizin depoyu nasıl yönetmek istediğine bağlıdır.

2-2. Adım: Sayfayı işlemek için şablon kullanma

home views.py'de şu ana kadar sahip olduğunuz işlev, sayfa için düz metin HTTP yanıtından başka bir şey oluşturmaz. Ancak çoğu gerçek dünya web sayfası, genellikle canlı verileri içeren zengin HTML sayfalarıyla yanıt verir. İşlev kullanarak bir görünüm tanımlamanın birincil nedeni, içeriği dinamik olarak oluşturmaktır.

Görünümün dönüş değeri yalnızca bir dize olduğundan, dinamik içeriği kullanarak bir dize içinde istediğiniz HTML'yi oluşturabilirsiniz. Ancak, işaretlemeyi verilerden ayırmak en iyisi olduğundan, işaretlemeyi bir şablona yerleştirmek ve verileri kodda tutmak daha iyidir.

Yeni başlayanlar için, views.py bazı dinamik içeriğe sahip sayfa için satır içi HTML kullanan aşağıdaki kodu içerecek şekilde düzenleyin:

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

Uygulamayı çalıştırın ve tarihin/saatin güncelleştirildiğini görmek için sayfayı birkaç kez yenileyin. İşiniz bittiğinde uygulamayı durdurun.
Sayfa işlemeyi şablon kullanacak şekilde dönüştürmek için, aşağıdaki içeriğe sahip templates klasöründe index.htmladlı bir dosya oluşturun; burada {{ content }} kodda bir değer sağladığınız yer tutucu veya değiştirme belirteci (şablon değişkeni olarak da adlandırılır):
```
<html>
  <head>
    <title>Hello Flask</title>
  </head>

  <body>
    {{ content }}
  </body>
</html>
```
home Şablonu yüklemek için işlevini render_template değiştirin ve yer tutucunun adıyla eşleşen adlandırılmış bir bağımsız değişken kullanılarak yapılan "içerik" için bir değer sağlayın. Flask şablonlar klasöründeki şablonları otomatik olarak arar, bu nedenle şablonun yolu bu klasöre göredir:
```
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)
```
Uygulamayı çalıştırın ve sonuçları görün. Şablon oluşturma altyapısı (Jinja) HTML content içeriğinden otomatik olarak kaçtığı için değerdeki satır içi HTML'nin HTML olarak işlenmediğini gözlemleyin. Otomatik kaçış, ekleme 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 bunu şablon yer tutucusu aracılığıyla başka bir sayfada değer olarak kullanır. Kaçış, HTML'yi koddan uzak tutmanın en iyisi olduğunu da anımsatır.

Buna uygun olarak, işaretleme içindeki her veri parçası için ayrı yer tutucular içerecek şekilde templates\index.html dosyasını gözden geçirin:
```
<html>
  <head>
    <title>{{ title }}</title>
  </head>
  <body>
    <strong>{{ message }}</strong>{{ content }}
  </body>
</html>
```
Ardından işlevi tüm yer tutucular için değer sağlayacak şekilde güncelleştirin home :
```
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)
```
Uygulamayı yeniden çalıştırın ve düzgün işlenmiş çıkışı görün.
Değişikliklerinizi kaynak denetimine kaydedebilir ve uzak deponuzu güncelleştirebilirsiniz. Daha fazla bilgi için bkz . 2-1. adım.

Soru: Sayfa şablonlarının ayrı bir dosyada olması gerekiyor mu?

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

Soru: Şablonlar .html dosya uzantısını mı kullanmalıdır?

Yanıt: Sayfa şablonu dosyaları için .html uzantısı tamamen isteğe bağlıdır, çünkü işlevin ilk bağımsız değişkeninde render_template dosyanın tam göreli yolunu her zaman tanımlayabilirsiniz. Ancak Visual Studio (ve diğer düzenleyiciler) genellikle sayfa şablonlarının HTML olmamasından daha ağır basan .html dosyalarıyla kod tamamlama ve söz dizimi renklendirmesi gibi özellikler sunar.

Bir Flask projesiyle çalışırken, Visual Studio düzenlediğiniz HTML dosyasının aslında bir Flask şablonu olduğunu otomatik olarak algılar ve belirli otomatik tamamlama özellikleri sağlar. Örneğin, Bir Flask sayfa şablonu açıklaması yazmaya başladığınızda, {#Visual Studio size otomatik olarak kapanış #} karakterlerini verir. Açıklama Seçimi ve Açıklama Seçimini Kaldırma komutları (Gelişmiş Düzenle>menüsünde ve araç çubuğunda), HTML açıklamaları yerine şablon açıklamalarını da kullanır.

Soru: Şablonlar başka alt klasörler halinde düzenlenebilir mi?

Yanıt: Evet, alt klasörleri kullanabilir ve ardından çağrısındaki render_templateşablonların altındaki göreli yola bakabilirsiniz. Bunu yapmak, şablonlarınız için etkili bir şekilde ad alanları oluşturmanın harika bir yoludur.

Sonraki adımlar

Statik dosyalar sunma, sayfa ekleme ve şablon devralmayı kullanma

Daha derine git

Flask Hızlı Başlangıcı - İşleme Şablonları (flask.pocoo.org)
GitHub'da öğretici kaynak kodu: Microsoft/python-sample-vs-learning-flask

Aracılığıyla paylaş