Jinja je moćan i fleksibilan mehanizam za šabloniranje za Python. Jedan uobičajeni slučaj upotrebe u web razvoju je kreiranje dinamičkih tabela koje prikazuju podatke na strukturiran način. U ovom članku ćemo istražiti kako kreirati dinamičku tablicu koristeći Jinja, fokusirajući se na generiranje strukture tablice iz liste podataka zajedno s implementacijom interaktivnosti i opcija sortiranja. Čitajte dalje da biste otkrili kako se to može postići pomoću Jinja i Pythona.
Prvo, počnimo s definiranjem našeg problema. Želimo mogućnost prikaza dinamičke tablice na web stranici koristeći Jinja kao naš mehanizam za šabloniranje. Tabela će imati kolone koje se mogu sortirati i moguće interaktivne elemente s kojima korisnik može komunicirati, kao što su gumbi za uređivanje ili brisanje. Da bismo riješili ovaj problem, morat ćemo koristiti Python, Jinja, kao i neke dodatne biblioteke i tehnike.
Postavljanje okruženja
Prije nego što uđemo u pisanje koda, prvo moramo postaviti naše okruženje. Biće nam potrebne sledeće biblioteke:
- Flask – lagani web okvir za Python.
- Jinja – Naš željeni mehanizam za šabloniranje za renderiranje dinamičkih tabela.
- Flask-SQLAlchemy – Flask ekstenzija za naše upravljanje podacima koristeći SQLAlchemy.
Obavezno instalirajte ove biblioteke koristeći pip:
pip install flask jinja2 flask-sqlalchemy
Kreiranje podataka tabele
Sada kada smo postavili naše okruženje, kreirajmo neke podatke za prikaz u našoj dinamičkoj tabeli. Za ovaj primjer koristit ćemo jednostavnu listu rječnika koji sadrže informacije o modnim artiklima, kao što su njihov stil, boja i povijest.
fashion_items = [
{
"style": "Grunge",
"color": "Dark tones",
"history": "Originated in the late 1980s and reached its peak in the 1990s.",
},
{
"style": "Bohemian",
"color": "Earthy tones",
"history": "Has a long history dating back to the early 19th century.",
},
{
"style": "Preppy",
"color": "Pastel colors",
"history": "Began in the early 20th century and enjoyed a resurgence in the 1980s.",
},
]
Kreiranje Jinja šablona
Sada kada imamo svoje podatke, moramo kreirati Jinja predložak za renderiranje naše dinamičke tablice. Ovo će uključivati pisanje HTML koda zajedno sa Jinja2 šablonskim oznakama, koje će obraditi Python podatke koje proslijeđujemo šablonu. Počnimo kreiranjem strukture naše tabele.
{% extends "base.html" %}
{% block content %}
<table>
<thead>
<tr>
<th>Style</th>
<th>Color</th>
<th>History</th>
</tr>
</thead>
<tbody>
{% for item in fashion_items %}
<tr>
<td>{{ item.style }}</td>
<td>{{ item.color }}</td>
<td>{{ item.history }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}
Gornji kod kreira HTML tabelu koristeći oznake kao što su , , i . Unutar oznaka Jinja2 šablona {% for item in fashion_items %} i {% endfor %}, prolazimo kroz svaku stavku na listi fashion_items i kreiramo novi red tabele koji sadrži podatke o artiklu.
Renderiranje tabele sa Flaskom
Sada kada imamo spremne predložak i podatke, koristit ćemo Flask za renderiranje tablice na web stranici. Prvo kreirajte Flask aplikaciju, a zatim unesite svoje podatke i renderirajte svoj Jinja predložak.
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html', fashion_items=fashion_items)
if __name__ == '__main__':
app.run(debug=True)
Sa ovim kodom, prosljeđujemo fashion_items listu našem Jinja predlošku i on će biti prikazan u našoj tabeli, čineći ga potpuno dinamičan i interaktivni.
Ukratko, naučili smo kako da kreiramo a dinamička tabela u Jinja koristeći Python listu, renderiranje u Jinja predlošku, a zatim prikazivanje na web stranici pomoću Flask-a. Jinja šabloni nude moćne karakteristike i fleksibilnost za pravljenje dinamičkih tabela, što može biti korisno za različite aplikacije u web razvoju. Sa znanjem stečenim iz ovog članka, sada možete kreirati tabele sa kolonama koje se mogu sortirati i interaktivnošću kako biste svoje vještine razvoja weba podigli na višu razinu.
