Templat Jinja menawarkan bahasa canggih yang dapat Anda gunakan untuk membuat halaman web dinamis dengan mudah.

Mengintegrasikan Jinja dengan FastAPI memungkinkan Anda membuat halaman web dinamis yang memadukan Python dengan mulus kode dengan HTML, memungkinkan Anda untuk memisahkan lapisan presentasi aplikasi Anda dari logika lapisan. Dengan halaman web dinamis, Anda dapat menghasilkan konten yang dipersonalisasi dan berdasarkan data, meningkatkan pengalaman pengguna.

Apa itu Jinja?

Jinja adalah mesin templat kuat dan kaya fitur untuk Python yang menghasilkan halaman web dinamis. Jinja Templating mendukung pewarisan, pernyataan bersyarat, loop, dan berbagai fitur yang menyederhanakan pembuatan halaman web dinamis.

Anda dapat menggabungkan FastAPI dan Jinja untuk membuat halaman web dengan tata letak yang konsisten yang dapat menampilkan data waktu nyata dan menangani input pengguna. Anda juga dapat mencapai pemisahan keprihatinan, membuat kode Anda lebih terpelihara dan lebih mudah dipahami.

instagram viewer

Siapkan Proyek FastAPI

Untuk memulai, Anda harus menyiapkan proyek FastAPI.

  1. Buat dan aktifkan lingkungan virtual menggunakan perintah terminal ini:
    python -m venv env
    # Di Unix/MacOS: 
    sumber venv/bin/aktifkan
    # Di Windows:
    .\venv\Scripts\aktifkan
  2. Instal FastAPI dan dependensi yang diperlukan.
    pip install "fastapi[all]"
  3. Buat direktori proyek blog saya.
  4. Buat file Python main.py di direktori proyek Anda.
  5. Tambahkan kode berikut ke main.py mengajukan:
    dari fastapi impor FastAPI
    fake_posts_db = [{
    'judul': 'Pos Blog Pertama',
    'isi': 'Konten posting blog pertama.',
    'pengarang': 'John Doe',
    'Tanggal penerbitan': '2023-06-20',
    'komentar': [
     {'pengarang': 'Alice', 'isi': 'Pos yang bagus!'},
     {'pengarang': 'Bob', 'isi': 'Bacaan yang menarik.'}
     ],
    'status': 'diterbitkan'
    },{
    'judul': 'Pos Blog Kedua',
    'isi': 'Konten posting blog kedua.',
    'pengarang': 'Jane Smith',
    'Tanggal penerbitan': Tidak ada,
    'komentar': [],
    'status': 'draf'
    }]
    

    aplikasi = FastAPI()
    @aplikasi.dapatkan("/tentang")
    deftentang():
    kembali"Semua yang perlu Anda ketahui tentang Blog Sederhana"
    Kode di atas membuat aplikasi FastAPI sederhana dengan satu titik akhir yang mengembalikan respons JSON saat diakses melalui URL yang sesuai. Kamu bisa menggunakan kamus Python seperti ini sebagai pengganti database yang sebenarnya; itu membantu mengurangi kompleksitas sambil fokus pada tujuan utama.
  6. Jalankan server.
    uvicorn main: aplikasi --reload

Mengunjungi http://localhost: 8000/sekitar di browser Anda untuk melihat respons server.

Mengintegrasikan Template Jinja

Setelah berhasil mengatur proyek Anda, Anda sekarang dapat menambahkan template Jinja ke dalamnya.

  1. Dalam main.py file, impor modul berikut:
    dari fastapi.templating impor Jinja2Templates
    dari fastapi.staticfiles impor File Statis
  2. Dibawah aplikasi variabel, buat instance dari Jinja2Templates class dan berikan direktori yang akan berisi template Anda.
    templates = Jinja2Templates (direktori="templat")
  3. Setelah template variabel, tambahkan baris kode berikut:
    aplikasi.mount("/statis", StaticFiles (direktori="statis"), nama="statis")
    Kode di atas me-mount statis direktori dan menginstruksikan FastAPI untuk menyajikan file statis apa pun yang terletak di direktori saat URL permintaan dimulai /static.
  4. Di dalam blog saya direktori membuat dua direktori, template untuk menyimpan file HTML dan statis yang akan berisi semua file statis.

Dengan selesainya langkah-langkah ini, Anda telah berhasil mengintegrasikan Template Jinja dengan proyek Anda.

Membuat Halaman Web Dinamis Dengan Jinja

Jinja menyediakan sekumpulan sintaks dan fitur yang kaya untuk membuat template dinamis.

Pada bagian ini, Anda akan melihat bagaimana menggunakan sintaks template Jinja untuk membuat halaman web yang dinamis.

Lampirkan tag template dengan a penjepit keriting Dan simbol persen di kedua sisi. Anda dapat menggunakan tag tersebut untuk melakukan alur kontrol dan operasi logika di template. Beberapa tag template yang umum digunakan antara lain:

  • Kondisi: Menjalankan blok kode jika kondisi benar.
    {% jika kondisi %}...{% endif %}
  • Lingkaran: Mengulangi iterable dan menjalankan blok kode untuk setiap item.
    {% untuk barang di dalam dapat diulang %}...{% endfor %}
  • Termasuk: Menyertakan template lain di dalam template saat ini.
    {% termasuk 'template_name.html' %}
  • Memblokir: Menentukan blok yang dapat diganti oleh template anak menggunakan warisan.
    {% blok nama_blok %}...{% blok akhir %}
  • Memperpanjang: Mengizinkan templat anak untuk mewarisi dan memperluas templat induk.
    {% perpanjang parent_temp.html %}

Tag ini menyediakan cara yang fleksibel dan ekspresif untuk menghasilkan konten HTML berdasarkan data dinamis dan mengontrol logika aplikasi Anda.

Warisan Templat

Jinja Templating mendukung pewarisan templat. Ini memungkinkan Anda menentukan template dasar (induk) dengan tata letak umum dan bagian yang dapat diperluas atau diganti oleh template anak. Templat anak dapat menggunakan Memperpanjang tag untuk mewarisi dan memperluas template induk.

Membuat basis.html berkas di template direktori dengan kode berikut.

html>
<html>
<kepala>
<judul>{% block title %}Blog Sederhana{% endblock %}judul>
kepala>
<tubuh>
<h1>{% block heading %}Blog Sederhana{% endblock %}h1>
 {% blokir konten %}
 {% blok akhir %}
 {% sertakan "footer.html" %}
tubuh>
html>

Dengan cara ini, Anda memiliki template induk yang berisi kode umum untuk semua template Anda, memungkinkan template anak mewarisi dan memperluasnya sesuai kebutuhan.

Dalam template pembuatan direktori a footer.html file dengan kode berikut.

<footer>
<P>© 2023 Blog Sederhana. Seluruh hak cipta.P>
<Ahref="{{ url_for('about') }}">TentangA>
footer>

footer.html adalah template yang disertakan yang berisi kode HTML untuk bagian footer. Anda dapat menggunakannya kembali di beberapa halaman dengan memasukkannya ke dalam template dasar menggunakan Termasuk menandai.

Dalam template pembuatan direktori a blog.html file dengan kode berikut.

{% memperluas "base.html" %}
{% block title %}Blog Sederhana - Halaman Blog{% endblock %}


{% block heading %}Blog Sederhana - Halaman Blog{% endblock %}


{% blokir konten %}
<h2>Total Jumlah Posting: {{ posts|length }}h2>


 {% untuk postingan di postingan %}
<divkelas="pos">


 {% if post.status == 'diterbitkan' %}
<h3>{{post.title}}h3>
<P>{{ post.content|truncate }}P>
<P>Dipublikasikan pada: {{ post.publication_date }}P>


<h4>Komentar:h4>
<ul>
 {% untuk komentar di post.comments %}
<likelas="komentar">{{ komentar.penulis }}-: {{ komentar.konten }}li>
 {% akhir untuk %}
ul>
 {% kalau tidak %}
<P>Postingan ini masih dalam mode draf.P>
 {% berakhir jika %}
div>
<jam>
 {% akhir untuk %}
{% blok akhir %}

Template anak ini diwarisi dari basis.html menggunakan Memperpanjang menandai. Itu menimpa blok tertentu yang ditentukan dalam template dasar untuk menyediakan konten yang disesuaikan untuk halaman blog. Ini juga mencakup logika dan iterasi yang diperlukan untuk menampilkan postingan dan komentar terkait.

Ekspresi

Jinja mendukung berbagai ekspresi, termasuk operasi aritmatika, perbandingan, dan operasi logis. Misalnya:

{{2 + 2}} // keluaran: 4

Pergantian Variabel

Untuk menampilkan variabel dalam templat, sertakan dalam kurung kurawal ganda. Misalnya:

{{post.title}} // keluaran: 'Pos Blog Pertama'

Filter

Filter memodifikasi output dari suatu variabel. Anda dapat menambahkan satu demi satu variabel menggunakan simbol pipa (|). Misalnya:

{{post|length}} // keluaran: 2

Anda dapat menambahkan komentar sebaris dan komentar multibaris di templat Anda. Jinja akan mengabaikan komentar ini selama perenderan template, sehingga berguna untuk menambahkan penjelasan di dalam template.

{# #} // Di barisan
{% komentar %}... {% akhir komentar %} // multibaris

URL

Agar Anda dapat membuat hyperlink yang benar ke halaman lain di dalam aplikasi, konteks template Jinja menyertakan a url_for fungsi. Misalnya:

<Ahref="{{ url_for('about') }}">TentangA>

Kode di atas menjadi http://localhost: 8000/sekitar. Anda juga akan melihat cara menggunakan url_for berfungsi untuk mendapatkan jalur file statis nanti.

Ini hanya beberapa aspek fundamental dari sintaks Jinja Templating. Jinja Templating menyediakan lebih banyak fitur dan fungsionalitas, seperti makro, konteks template, dan lainnya, untuk membuat pembuatan dan penyesuaian template menjadi efisien dan fleksibel.

Meneruskan Data ke Template

Sekarang setelah template Anda siap, Anda perlu meneruskan data dari titik akhir FastAPI Anda ke template untuk rendering.

Tambahkan kode berikut ke main.py mengajukan:

dari fastapi impor FastAPI, Permintaan
dari fastapi.respons impor Respon HTML
@app.get("/", response_class=HTMLResponse)
asinkrondefread_posts(permintaan: Permintaan):
kembali template. Respon Templat("blog.html", {"meminta": meminta, 
"postingan": fake_posts_db})

Kode mendefinisikan titik akhir FastAPI yang menangani permintaan GET ke URL root ("/") dan mengembalikan sebuah Respon HTML dihasilkan dari blog.html templat. Itu melewati kamus konteks, yang berisi arus objek permintaan Dan fake_posts_db, ke dalam templat. Dengan cara ini Jinja dapat merender data yang akurat dan dinamis.

Mengunjungi http://localhost: 8000/ di browser Anda dan Anda akan melihat sesuatu seperti ini:

Anda telah berhasil meneruskan data ke dalam template untuk rendering.

Melayani File Statis

Selain merender template dinamis, FastAPI juga menyediakan fungsionalitas untuk menyajikan file statis seperti file CSS, file JavaScript, dan gambar.

Anda akan menggunakan CSS untuk meningkatkan tampilan dan nuansa halaman.

Dalam statis direktori, buat a style.css file dengan kode berikut.

tubuh {
font-family: Arial, Sans Serif;
batas: 0;
lapisan: 20px;
warna latar belakang: #f5f5f5;
}
h1, h2, h3, h4 {
warna: #333;
}


.pos {
warna latar belakang: #fff;
lapisan: 20px;
margin-bawah: 20px;
radius perbatasan: 5px;
bayangan kotak: 0 2px 4pxrgba(0, 0, 0, 0.1);
}


.posh3 {
margin-atas: 0;
}


.posP {
margin-bawah: 10px;
}


.posul {
daftar-gaya-jenis: tidak ada;
padding-kiri: 0;
}


.komentar {
margin-bawah: 10px;
lapisan: 10px;
warna latar belakang: #f9f9f9;
radius perbatasan: 5px;
}
footer {
warna latar belakang: #f2f2f2;
lapisan: 10px;
perataan teks: tengah;
}

Modifikasi kepala elemen dari basis.html templat sebagai berikut:

<kepala>
<judul>{% block title %}Blog Sederhana{% endblock %}judul>
<tautanhref="{{ url_for('statis', path='/styles.css') }}"rel="lembar gaya">
kepala>

Fungsi url_for() menghasilkan URL (jalur) untuk style.css (/static/styles.css) file di statis direktori yang kemudian disajikan secara otomatis oleh FastAPI.

Mengunjungi http://localhost: 8000/ di browser Anda.

Prosedur yang sama berlaku untuk menyajikan file gambar dan JavaScript.

Ingatlah untuk Mengikuti Praktik Terbaik

Saat bekerja dengan Templat Jinja di FastAPI, penting untuk mengikuti praktik terbaik tertentu untuk memastikan basis kode yang terorganisir dengan baik dan efisien.

  • Atur template dalam direktori khusus dan pertimbangkan untuk menggunakan subdirektori untuk template terkait.
  • Manfaatkan pewarisan template untuk membuat template dasar yang dapat digunakan kembali dan memperluasnya untuk konten tertentu.
  • Pilih data dengan hati-hati untuk diteruskan ke template, jaga muatan tetap ringan, dan gunakan prosesor konteks atau middleware untuk data yang umum digunakan.
  • Manfaatkan fitur Templating Jinja seperti makro, filter, dan struktur kontrol untuk meningkatkan keterbacaan dan penggunaan kembali kode.
  • Optimalkan kinerja dengan menerapkan strategi caching untuk template statis, menggunakan header caching HTTP, dan pembuatan profil untuk hambatan kinerja.

Dengan mengikuti praktik terbaik ini, Anda dapat mempertahankan proyek terstruktur, mengoptimalkan performa rendering, dan memanfaatkan fitur Jinja Templating secara efisien di aplikasi FastAPI Anda.

Menggunakan FastAPI untuk Membangun RestAPIs

Selain membangun aplikasi yang membutuhkan rendering template. FastAPI unggul dalam membuat RestAPI karena kinerjanya yang tinggi, sintaksis yang mudah digunakan, pembuatan dokumentasi otomatis, dan skalabilitas. Fitur-fitur ini menjadikan FastAPI ideal untuk pengembangan web API yang kuat secara efisien.