Jinja şablonları, kolaylıkla dinamik web sayfaları oluşturmak için kullanabileceğiniz güçlü bir dil sunar.

Jinja'yı FastAPI ile entegre etmek, Python'u sorunsuz bir şekilde harmanlayan dinamik web sayfaları oluşturmanıza olanak tanır. uygulamanızın sunum katmanını mantıktan ayırmanıza olanak tanıyan HTML ile kodlayın katman. Dinamik web sayfalarıyla kişiselleştirilmiş ve veriye dayalı içerik üreterek kullanıcı deneyimlerini geliştirebilirsiniz.

Jinja nedir?

Jinja, Python için dinamik web sayfaları oluşturan sağlam, zengin özelliklere sahip bir şablon motorudur. Jinja Templating, dinamik web sayfalarının oluşturulmasını basitleştiren kalıtımı, koşullu ifadeleri, döngüleri ve çeşitli özellikleri destekler.

Gerçek zamanlı verileri görüntüleyebilen ve kullanıcı girişini işleyebilen tutarlı bir düzene sahip web sayfaları oluşturmak için FastAPI ve Jinja'yı birleştirebilirsiniz. Ayrıca elde edebilirsiniz endişelerin ayrılması, kodunuzu daha bakımlı ve anlaşılması kolay hale getirir.

Bir FastAPI Projesi Kurun

instagram viewer

Başlamak için bir FastAPI projesi oluşturmanız gerekir.

  1. Sanal bir ortam oluşturun ve etkinleştirin bu terminal komutlarını kullanarak:
    piton -m venv ortamı
    # Unix/MacOS'ta: 
    kaynak venv/bin/etkinleştir
    # Windows'ta:
    .\venv\Komut Dosyaları\etkinleştir
  2. FastAPI'yi ve gerekli bağımlılıkları kurun.
    pip kurulumu "fastapi [all]"
  3. Bir proje dizini oluşturun bloğum.
  4. Bir Python dosyası oluşturun ana.py proje dizininizde.
  5. içine aşağıdaki kodu ekleyin ana.py dosya:
    itibaren fastapi içe aktarmak HızlıAPI
    fake_posts_db = [{
    'başlık': "İlk Blog Yazısı",
    'içerik': 'İlk blog gönderisinin içeriği.',
    'yazar': 'John Doe',
    'yayın tarihi': '2023-06-20',
    "yorumlar": [
     {'yazar': "Alice", 'içerik': "Harika gönderi!"},
     {'yazar': 'Bob', 'içerik': "İlginç bir okuma."}
     ],
    'durum': 'yayınlanan'
    },{
    'başlık': 'İkinci Blog Yazısı',
    'içerik': 'İkinci blog gönderisinin içeriği.',
    'yazar': 'Jane Smith',
    'yayın tarihi': Hiçbiri,
    "yorumlar": [],
    'durum': 'taslak'
    }]
    

    uygulama = FastAPI()
    @app.get("/hakkında")
    kesinhakkında():
    geri dönmek"Basit Blog hakkında bilmeniz gereken her şey"
    Yukarıdaki kod, ilgili URL aracılığıyla erişildiğinde bir JSON yanıtı döndüren tek bir uç noktaya sahip basit bir FastAPI uygulaması oluşturur. Yapabilirsiniz bir Python sözlüğü kullanın gerçek bir veritabanı yerine bunun gibi; birincil hedefe odaklanırken karmaşıklığı azaltmaya yardımcı olur.
  6. Sunucuyu çalıştırın.
    ana uvicorn: uygulama -- yeniden yükle

Ziyaret etmek http://localhost: 8000/yaklaşık sunucu yanıtını görmek için tarayıcınızda.

Jinja Şablonunu Entegre Etme

Projenizi başarıyla kurduktan sonra artık ona Jinja şablonunu ekleyebilirsiniz.

  1. İçinde ana.py dosya, aşağıdaki modülleri içe aktarın:
    itibaren fastapi.templateing içe aktarmak Jinja2Templates
    itibaren fastapi.statik dosyalar içe aktarmak Statik Dosyalar
  2. altında uygulama değişkeninin bir örneğini oluşturun Jinja2Templates class ve şablonlarınızı içerecek dizini iletin.
    şablonlar = Jinja2Templates (dizin="şablonlar")
  3. Sonra şablonlar değişken, aşağıdaki kod satırını ekleyin:
    uygulama.montaj("/statik", Statik Dosyalar (dizin="statik"), isim="statik")
    Yukarıdaki kod, statik dizini ve FastAPI'ye, bir istek URL'si şununla başladığında dizinde bulunan tüm statik dosyalara hizmet etmesi talimatını verir: /static.
  4. İçinde bloğum dizin iki dizin oluştur, şablonlar HTML dosyalarını tutmak ve statik tüm statik dosyaları içerecektir.

Bu adımları tamamladıktan sonra, Jinja Templating'i projenize başarıyla entegre ettiniz.

Jinja ile Dinamik Web Sayfası Oluşturma

Jinja, dinamik şablonlar oluşturmak için zengin bir dizi sözdizimi ve özellik sağlar.

Bu bölümde, dinamik web sayfaları oluşturmak için Jinja şablonlama sözdizimini nasıl kullanacağınızı göreceksiniz.

Şablon etiketlerini bir küme parantezi Ve yüzde simgesi iki tarafta da. Şablonda kontrol akışı ve mantık işlemleri gerçekleştirmek için bu tür etiketleri kullanabilirsiniz. Yaygın olarak kullanılan bazı şablon etiketleri şunları içerir:

  • Durum: Koşul doğruysa kod bloğunu çalıştırır.
    {% eğer koşul %}...{% endif %}
  • Döngü: Bir yineleme üzerinde yinelenir ve her öğe için kod bloğunu çalıştırır.
    {% için öğe içinde yinelenebilir %}...{% endfor %}
  • Katmak: Geçerli şablona başka bir şablon ekler.
    {% katmak "template_name.html" %}
  • Engellemek: Alt şablonların devralma kullanarak geçersiz kılabileceği bir blok tanımlar.
    {% blok blok_adı %}...{% endblock %}
  • Uzatmak: Alt şablonun üst şablonu devralmasına ve genişletmesine izin verir.
    {% ebeveyn_temp.html'yi genişlet %}

Bu etiketler, dinamik verilere dayalı HTML içeriği oluşturmak ve uygulamanızın mantığını kontrol etmek için esnek ve etkileyici bir yol sağlar.

Şablon Kalıtımı

Jinja Templating, şablon devralmayı destekler. Bu, ortak bir düzene ve bir alt şablonun genişletebileceği veya geçersiz kılabileceği bölümlere sahip bir temel (üst) şablon tanımlamanıza olanak tanır. Bir alt şablon şunları kullanabilir: Uzatmak üst şablonu devralmak ve genişletmek için etiketi.

Oluşturmak base.html dosya şablonlar aşağıdaki kod ile dizin.

html>
<html>
<KAFA>
<başlık>{% blok başlığı %}Basit Blog{% endblock %}başlık>
KAFA>
<vücut>
<h1>{% blok başlığı %}Basit Blog{% endblock %}h1>
 {% blok içeriği %}
 {% son blok %}
 {% "footer.html" içerir %}
vücut>
html>

Bu şekilde, tüm şablonlarınız için ortak kodu içeren bir üst şablonunuz olur ve alt şablonun onu gerektiği gibi devralmasına ve genişletmesine olanak tanır.

İçinde şablonlar dizin oluştur altbilgi.html aşağıdaki kod ile dosya.

<alt bilgi>
<P>© 2023 Basit Blog. Her hakkı saklıdır.P>
<Ahref="{{ url_for('about') }}">HakkındaA>
alt bilgi>

altbilgi.html alt bilgi bölümü için HTML kodunu içeren dahil edilmiş bir şablondur. kullanarak temel şablona dahil ederek birden çok sayfada yeniden kullanabilirsiniz. Katmak etiket.

İçinde şablonlar dizin oluştur blog.html aşağıdaki kod ile dosya.

{%, "base.html"yi genişletiyor %}
{% blok başlığı %}Basit Blog - Blog Sayfası{% endblock %}


{% blok başlığı %}Basit Blog - Blog Sayfası{% endblock %}


{% blok içeriği %}
<h2>Toplam Gönderi Sayısı: {{ gönderiler|uzunluk }}h2>


 {% gönderilerdeki gönderiler için %}
<divsınıf="postalamak">


 {% if post.status == 'yayınlandı' %}
<h3>{{ yazı başlığı }}h3>
<P>{{ post.content|kesme }}P>
<P>Yayın tarihi: {{ post.publication_date }}P>


<h4>Yorumlar:h4>
<Ul>
 {% post.comments'taki yorum için %}
<lisınıf="Yorum">{{ yorum.yazar }}-: {{ yorum.içerik }}li>
 {% endfor %}
Ul>
 {% başka %}
<P>Bu gönderi hala taslak modunda.P>
 {% endif %}
div>
<saat>
 {% endfor %}
{% son blok %}

Bu alt şablon şu kaynaktan devralır: base.html kullanmak Uzatmak etiket. Blog sayfası için özelleştirilmiş içerik sağlamak üzere temel şablonda tanımlanan belirli blokları geçersiz kılar. Ayrıca bir gönderiyi ve ilişkili yorumları görüntülemek için gerekli mantığı ve yinelemeyi içerir.

İfade

Jinja, aritmetik işlemler, karşılaştırmalar ve mantıksal işlemler dahil olmak üzere çok çeşitli ifadeleri destekler. Örneğin:

{{2 + 2}} // çıkış: 4

Değişken Değiştirme

Şablondaki değişkenlerin çıktısını almak için, bunları çift kaşlı ayraç içine alın. Örneğin:

{{post.title}} // çıktı: 'İlk Blog Gönderisi'

Filtreler

Filtreler bir değişkenin çıktısını değiştirir. Dikey çizgi simgesini (|) kullanarak bir değişkenden sonra bir tane ekleyebilirsiniz. Örneğin:

{{post|uzunluk}} // çıktı: 2

Şablonlarınıza satır içi yorumlar ve çok satırlı yorumlar ekleyebilirsiniz. Jinja, şablon oluşturma sırasında bu yorumları yok sayar, bu nedenle bir şablona açıklama eklemek için kullanışlıdır.

{# #} // Çizgide
{% Yorum %}... {% yorum sonu %} // çok satırlı

URL'ler

Uygulama içindeki diğer sayfalara doğru köprüler oluşturmanıza izin vermek için, Jinja şablonu bağlamı şunları içerir: url_for işlev. Örneğin:

<Ahref="{{ url_for('about') }}">HakkındaA>

Yukarıdaki kod olur http://localhost: 8000/yaklaşık. nasıl kullanılacağını da göreceksiniz. url_for daha sonra statik dosya yolları almak için işlev.

Bunlar, Jinja Templating sözdiziminin temel yönlerinden yalnızca birkaçıdır. Jinja Templating, şablon oluşturmayı ve özelleştirmeyi verimli ve esnek hale getirmek için makrolar, şablon bağlamı ve daha fazlası gibi çok daha fazla özellik ve işlevsellik sağlar.

Verileri Şablonlara Aktarma

Artık şablonlarınız hazır olduğuna göre, FastAPI uç noktalarınızdaki verileri işleme için şablonlara aktarmanız gerekir.

içine aşağıdaki kodu ekleyin ana.py dosya:

itibaren fastapi içe aktarmak FastAPI, İstek
itibaren fastapi.responses içe aktarmak HTML Yanıtı
@app.get("/", yanıt_sınıfı=HTMLResponse)
zaman uyumsuzkesingönderileri oku(istek: İstek):
geri dönmek şablonlar. Yanıt Şablonu("blog.html", {"rica etmek": rica etmek, 
"gönderiler": fake_posts_db})

Kod, kök URL'ye ("/") yönelik bir GET isteğini işleyen ve bir HTML Yanıtı üretilen blog.html şablon. Geçerli olanı içeren bir bağlam sözlüğünden geçer. istek nesnesi Ve fake_posts_db, şablonun içine. Bu şekilde Jinja, doğru ve dinamik verileri işleyebilir.

Ziyaret etmek http://localhost: 8000/ tarayıcınızda ve bunun gibi bir şey görmelisiniz:

Oluşturulmak üzere şablonlara verileri başarıyla aktardınız.

Statik Dosyaları Sunma

FastAPI, dinamik şablonlar oluşturmaya ek olarak, CSS dosyaları, JavaScript dosyaları ve resimler gibi statik dosyaların sunulması için işlevsellik de sağlar.

Sayfanın görünümünü ve hissini iyileştirmek için CSS kullanacaksınız.

İçinde statik dizin, oluştur stiller.css aşağıdaki kod ile dosya.

vücut {
font ailesi: Arial, sans Serif;
marj: 0;
dolgu malzemesi: 20piksel;
arka plan rengi: #f5f5f5;
}
h1, h2, h3, h4 {
renk: #333;
}


.postalamak {
arka plan rengi: #ffff;
dolgu malzemesi: 20piksel;
kenar boşluğu: 20piksel;
sınır yarıçapı: 5piksel;
kutu gölgesi: 0 2piksel 4pikselrgba(0, 0, 0, 0.1);
}


.postalamakh3 {
kenar boşluğu: 0;
}


.postalamakP {
kenar boşluğu: 10piksel;
}


.postalamakUl {
liste stili türü: hiçbiri;
sol dolgu: 0;
}


.Yorum {
kenar boşluğu: 10piksel;
dolgu malzemesi: 10piksel;
arka plan rengi: #f9f9f9;
sınır yarıçapı: 5piksel;
}
alt bilgi {
arka plan rengi: #f2f2f2;
dolgu malzemesi: 10piksel;
Metin hizalama: merkez;
}

Değiştirmek KAFA unsuru base.html aşağıdaki gibi şablon:

<KAFA>
<başlık>{% blok başlığı %}Basit Blog{% endblock %}başlık>
<bağlantıhref="{{ url_for('statik', yol='/styles.css') }}"rel="stil sayfası">
KAFA>

url_for() işlevi, için bir URL (yol) oluşturur. stiller.css (/static/styles.css) dosyasında statik daha sonra FastAPI tarafından otomatik olarak sunulan dizin.

Ziyaret etmek http://localhost: 8000/ tarayıcınızda.

Görüntü ve JavaScript dosyalarını sunmak için aynı prosedürler geçerlidir.

En İyi Uygulamaları Takip Etmeyi Unutmayın

FastAPI'de Jinja Templating ile çalışırken, iyi organize edilmiş ve verimli bir kod tabanı sağlamak için belirli en iyi uygulamaları takip etmek önemlidir.

  • Şablonları özel bir dizinde düzenleyin ve ilgili şablonlar için alt dizinleri kullanmayı düşünün.
  • Yeniden kullanılabilir temel şablonlar oluşturmak ve bunları belirli içerik için genişletmek için şablon devralma özelliğini kullanın.
  • Yükü hafif tutarak şablonlara aktarılacak verileri dikkatlice seçin ve yaygın olarak kullanılan veriler için bağlam işlemcileri veya ara yazılım kullanın.
  • Gelişmiş kod yeniden kullanılabilirliği ve okunabilirliği için makrolar, filtreler ve kontrol yapıları gibi Jinja Templating özelliklerinden yararlanın.
  • Statik şablonlar için önbelleğe alma stratejileri uygulayarak, HTTP önbelleğe alma başlıklarını kullanarak ve performans darboğazları için profil oluşturarak performansı optimize edin.

Bu en iyi uygulamaları takip ederek yapılandırılmış bir proje sürdürebilir, işleme performansını optimize edebilir ve FastAPI uygulamalarınızda Jinja Templating özelliklerinden verimli bir şekilde yararlanabilirsiniz.

RestAPI'ler Oluşturmak için FastAPI Kullanma

İşleme şablonları gerektiren uygulamalar oluşturmanın dışında. FastAPI, yüksek performansı, kullanımı kolay sözdizimi, otomatik belge oluşturma ve ölçeklenebilirliği sayesinde RestAPI oluşturmada mükemmeldir. Bu özellikler, FastAPI'yi güçlü web API'lerinin verimli bir şekilde geliştirilmesi için ideal hale getirir.