Τα πρότυπα Jinja προσφέρουν μια ισχυρή γλώσσα που μπορείτε να χρησιμοποιήσετε για να δημιουργήσετε εύκολα δυναμικές ιστοσελίδες.

Η ενσωμάτωση του Jinja με το FastAPI σάς δίνει τη δυνατότητα να δημιουργήσετε δυναμικές ιστοσελίδες που συνδυάζουν απρόσκοπτα την Python κώδικα με HTML, που σας επιτρέπει να διαχωρίσετε το επίπεδο παρουσίασης της εφαρμογής σας από τη λογική στρώμα. Με τις δυναμικές ιστοσελίδες, μπορείτε να δημιουργήσετε εξατομικευμένο και βασισμένο σε δεδομένα περιεχόμενο, βελτιώνοντας τις εμπειρίες των χρηστών.

Τι είναι η Jinja;

Το Jinja είναι μια ισχυρή, πλούσια σε χαρακτηριστικά μηχανή προτύπων για την Python που δημιουργεί δυναμικές ιστοσελίδες. Το Jinja Templating υποστηρίζει κληρονομικότητα, δηλώσεις υπό όρους, βρόχους και διάφορες δυνατότητες που απλοποιούν τη δημιουργία δυναμικών ιστοσελίδων.

Μπορείτε να συνδυάσετε το FastAPI και το Jinja για να δημιουργήσετε ιστοσελίδες με συνεπή διάταξη που μπορεί να εμφανίζει δεδομένα σε πραγματικό χρόνο και να χειρίζεται τις εισαγωγές χρήστη. Μπορείτε επίσης να πετύχετε

instagram viewer
διαχωρισμός των ανησυχιών, καθιστώντας τον κώδικά σας πιο διατηρήσιμο και πιο κατανοητό.

Ρυθμίστε ένα έργο FastAPI

Για να ξεκινήσετε, θα χρειαστεί να ρυθμίσετε ένα έργο FastAPI.

  1. Δημιουργήστε και ενεργοποιήστε ένα εικονικό περιβάλλον χρησιμοποιώντας αυτές τις εντολές τερματικού:
    python -m venv env
    # Σε Unix/MacOS: 
    πηγή venv/bin/activate
    # Στα Windows:
    .\venv\Scripts\ενεργοποίηση
  2. Εγκαταστήστε το FastAPI και τις απαιτούμενες εξαρτήσεις.
    εγκατάσταση pip "fastapi[all]"
  3. Δημιουργήστε έναν κατάλογο έργου my_blog.
  4. Δημιουργήστε ένα αρχείο Python main.py στον κατάλογο του έργου σας.
  5. Προσθέστε τον ακόλουθο κώδικα στο main.py αρχείο:
    από fastapi εισαγωγή FastAPI
    fake_posts_db = [{
    'τίτλος': "Πρώτη ανάρτηση ιστολογίου",
    'περιεχόμενο': 'Περιεχόμενο της πρώτης ανάρτησης ιστολογίου.',
    'συγγραφέας': 'John Doe',
    'ημερομηνία έκδοσης': '2023-06-20',
    'σχόλια': [
     {'συγγραφέας': 'Αλίκη', 'περιεχόμενο': 'Υπέροχη ανάρτηση!'},
     {'συγγραφέας': 'Βαρίδι', 'περιεχόμενο': 'Ενδιαφέρουσα ανάγνωση.'}
     ],
    'κατάσταση': 'δημοσίευσε'
    },{
    'τίτλος': "Δεύτερη ανάρτηση ιστολογίου",
    'περιεχόμενο': 'Περιεχόμενο της δεύτερης ανάρτησης ιστολογίου.',
    'συγγραφέας': «Τζέιν Σμιθ»,
    'ημερομηνία έκδοσης': Κανένας,
    'σχόλια': [],
    'κατάσταση': 'προσχέδιο'
    }]
    

    app = FastAPI()
    @app.get("/about")
    defσχετικά με():
    ΕΠΙΣΤΡΟΦΗ"Όλα όσα πρέπει να ξέρετε για το Simple Blog"
    Ο παραπάνω κώδικας δημιουργεί μια απλή εφαρμογή FastAPI με ένα μόνο τελικό σημείο που επιστρέφει μια απάντηση JSON όταν προσπελαστεί μέσω της αντίστοιχης διεύθυνσης URL. Μπορείς χρησιμοποιήστε ένα λεξικό Python όπως αυτό στη θέση μιας πραγματικής βάσης δεδομένων. βοηθά στη μείωση της πολυπλοκότητας, ενώ εστιάζει στον πρωταρχικό στόχο.
  6. Εκτελέστε τον διακομιστή.
    Uvicorn main: app --reload

Επίσκεψη http://localhost: 8000/περίπου στο πρόγραμμα περιήγησής σας για να δείτε την απάντηση του διακομιστή.

Ενσωμάτωση του προτύπου Jinja

Έχοντας ρυθμίσει με επιτυχία το έργο σας, μπορείτε τώρα να προσθέσετε πρότυπο Jinja σε αυτό.

  1. Στο main.py αρχείο, εισαγάγετε τις ακόλουθες ενότητες:
    από fastapi.πρότυπο εισαγωγή Jinja2Templates
    από fastapi.staticfiles εισαγωγή StaticFiles
  2. Κάτω από εφαρμογή μεταβλητή, δημιουργήστε μια παρουσία του Jinja2Templates τάξη και περάστε τον κατάλογο που θα περιέχει τα πρότυπά σας.
    templates = Jinja2Templates (κατάλογος="πρότυπα")
  3. Μετά το πρότυπα μεταβλητή, προσθέστε την ακόλουθη γραμμή κώδικα:
    app.mount("/στατικός", StaticFiles (κατάλογος="στατικός"), όνομα="στατικός")
    Ο παραπάνω κωδικός τοποθετεί το στατικός καταλόγου και δίνει εντολή στο FastAPI να εξυπηρετεί τυχόν στατικά αρχεία που βρίσκονται στον κατάλογο όταν ξεκινά μια διεύθυνση URL αιτήματος /static.
  4. Σε my_blog κατάλογος δημιουργία δύο καταλόγων, πρότυπα για να κρατάτε αρχεία HTML και στατικός που θα περιέχει όλα τα στατικά αρχεία.

Με την ολοκλήρωση αυτών των βημάτων, έχετε ενσωματώσει επιτυχώς το Jinja Templating στο έργο σας.

Δημιουργία δυναμικής ιστοσελίδας με Jinja

Το Jinja παρέχει ένα πλούσιο σύνολο σύνταξης και δυνατοτήτων για τη δημιουργία δυναμικών προτύπων.

Σε αυτήν την ενότητα, θα δείτε πώς να χρησιμοποιήσετε τη σύνταξη προτύπου Jinja για τη δημιουργία δυναμικών ιστοσελίδων.

Εσωκλείστε ετικέτες προτύπου με α σγουρό στήριγμα και σύμβολο τοις εκατό και στις δύο πλευρές. Μπορείτε να χρησιμοποιήσετε τέτοιες ετικέτες για να εκτελέσετε λειτουργίες ελέγχου ροής και λογικής στο πρότυπο. Ορισμένες ετικέτες προτύπου που χρησιμοποιούνται συνήθως περιλαμβάνουν:

  • Κατάσταση: Εκτελεί το μπλοκ κώδικα εάν η συνθήκη είναι αληθής.
    {% αν συνθήκη %}...{% endif %}
  • Βρόχος: Επαναλαμβάνει πάνω από ένα επαναληπτικό και εκτελεί το μπλοκ κώδικα για κάθε στοιχείο.
    {% Για είδος σε επαναλαμβανόμενο %}...{% τέλος για %}
  • Περιλαμβάνω: Περιλαμβάνει ένα άλλο πρότυπο στο τρέχον πρότυπο.
    {% περιλαμβάνω "template_name.html" %}
  • ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ: Ορίζει ένα μπλοκ που τα θυγατρικά πρότυπα μπορούν να παρακάμψουν χρησιμοποιώντας κληρονομικότητα.
    {% block block_name %}...{% endblock %}
  • Επεκτείνω: Επιτρέπει στο θυγατρικό πρότυπο να κληρονομήσει και να επεκτείνει το γονικό πρότυπο.
    {% επέκταση parent_temp.html %}

Αυτές οι ετικέτες παρέχουν έναν ευέλικτο και εκφραστικό τρόπο για τη δημιουργία περιεχομένου HTML με βάση δυναμικά δεδομένα και τον έλεγχο της λογικής της εφαρμογής σας.

Κληρονομικότητα προτύπου

Το Jinja Templating υποστηρίζει κληρονομικότητα προτύπων. Αυτό σας επιτρέπει να ορίσετε ένα βασικό (γονικό) πρότυπο με κοινή διάταξη και ενότητες που ένα θυγατρικό πρότυπο μπορεί να επεκτείνει ή να παρακάμψει. Ένα παιδί πρότυπο μπορεί να χρησιμοποιήσει το Επεκτείνω ετικέτα για να κληρονομήσετε και να επεκτείνετε το γονικό πρότυπο.

Δημιουργώ ένα βάση.html αρχείο στο πρότυπα κατάλογο με τον παρακάτω κώδικα.

html>
<html>
<κεφάλι>
<τίτλος>{% block title %}Απλό ιστολόγιο{% endblock %}τίτλος>
κεφάλι>
<σώμα>
<h1>{% block heading %}Απλό ιστολόγιο{% endblock %}h1>
 {% αποκλεισμός περιεχομένου %}
 {% endblock %}
 {% περιλαμβάνουν "footer.html" %}
σώμα>
html>

Με αυτόν τον τρόπο, έχετε ένα γονικό πρότυπο που περιέχει τον κοινό κώδικα για όλα τα πρότυπά σας, επιτρέποντας στο θυγατρικό πρότυπο να το κληρονομήσει και να το επεκτείνει όπως απαιτείται.

Στο πρότυπα καταλόγου δημιουργία α footer.html αρχείο με τον παρακάτω κώδικα.

<υποσέλιδο>
<Π>© 2023 Απλό Ιστολόγιο. Ολα τα δικαιώματα διατηρούνται.Π>
<έναhref="{{ url_for('about') }}">Σχετικά μεένα>
υποσέλιδο>

footer.html είναι ένα συμπεριλαμβανόμενο πρότυπο που περιέχει τον κώδικα HTML για την ενότητα του υποσέλιδου. Μπορείτε να το χρησιμοποιήσετε ξανά σε πολλές σελίδες συμπεριλαμβάνοντάς το στο βασικό πρότυπο χρησιμοποιώντας το Περιλαμβάνω ετικέτα.

Στο πρότυπα καταλόγου δημιουργία α blog.html αρχείο με τον παρακάτω κώδικα.

{% επεκτείνει το "base.html" %}
{% block title %}Απλό ιστολόγιο - Σελίδα ιστολογίου{% endblock %}


{% block heading %}Απλό ιστολόγιο - Σελίδα ιστολογίου{% endblock %}


{% αποκλεισμός περιεχομένου %}
<h2>Συνολικός αριθμός αναρτήσεων: {{ αναρτήσεις|μήκος }}h2>


 {% για ανάρτηση σε αναρτήσεις %}
<divτάξη="Θέση">


 {% if post.status == 'δημοσιεύτηκε' %}
<h3>{{ Τίτλος ανάρτησης }}h3>
<Π>{{ post.content|περικοπή }}Π>
<Π>Δημοσιεύθηκε στις: {{ post.publication_date }}Π>


<h4>Σχόλια:h4>
<ul>
 {% για σχόλιο στο post.comments %}
<liτάξη="σχόλιο">{{ comment.author }}-: {{ comment.content }}li>
 {% τέλος για %}
ul>
 {% other %}
<Π>Αυτή η ανάρτηση είναι ακόμα σε πρόχειρη λειτουργία.Π>
 {% τέλος εαν %}
div>
<hr>
 {% τέλος για %}
{% endblock %}

Αυτό το παιδί πρότυπο κληρονομεί από βάση.html χρησιμοποιώντας την Επεκτείνω ετικέτα. Αντικαθιστά συγκεκριμένα μπλοκ που ορίζονται στο βασικό πρότυπο για να παρέχει προσαρμοσμένο περιεχόμενο για τη σελίδα ιστολογίου. Περιλαμβάνει επίσης την απαραίτητη λογική και επανάληψη για την εμφάνιση μιας ανάρτησης και των σχετικών σχολίων.

Εκφράσεις

Το Jinja υποστηρίζει ένα ευρύ φάσμα εκφράσεων, συμπεριλαμβανομένων αριθμητικών πράξεων, συγκρίσεων και λογικών πράξεων. Για παράδειγμα:

{{2 + 2}} // έξοδος: 4

Αντικατάσταση μεταβλητής

Για να εξάγετε μεταβλητές στο πρότυπο, περικλείστε τις σε διπλά σγουρά άγκιστρα. Για παράδειγμα:

{{post.title}} // έξοδος: 'First Blog Post'

Φίλτρα

Τα φίλτρα τροποποιούν την έξοδο μιας μεταβλητής. Μπορείτε να προσθέσετε ένα μετά από μια μεταβλητή χρησιμοποιώντας το σύμβολο σωλήνα (|). Για παράδειγμα:

{{post|length}} // έξοδος: 2

Μπορείτε να προσθέσετε ενσωματωμένα σχόλια και σχόλια πολλαπλών γραμμών στα πρότυπά σας. Η Jinja θα αγνοήσει αυτά τα σχόλια κατά την απόδοση του προτύπου, επομένως είναι χρήσιμα για την προσθήκη επεξηγήσεων σε ένα πρότυπο.

{# #} // στη γραμμή
{% σχόλιο %}... {% τέλος σχολίου %} // πολλών γραμμών

URL

Για να σας επιτρέψει να δημιουργήσετε σωστούς υπερσυνδέσμους σε άλλες σελίδες εντός της εφαρμογής, το περιβάλλον προτύπου Jinja περιλαμβάνει α url_for λειτουργία. Για παράδειγμα:

<έναhref="{{ url_for('about') }}">Σχετικά μεένα>

Ο παραπάνω κωδικός γίνεται http://localhost: 8000/περίπου. Θα δείτε επίσης πώς να χρησιμοποιήσετε το url_for λειτουργία για λήψη στατικών μονοπατιών αρχείων αργότερα.

Αυτές είναι μόνο μερικές από τις θεμελιώδεις πτυχές της σύνταξης Jinja Templating. Το Jinja Templating παρέχει πολλές περισσότερες δυνατότητες και λειτουργίες, όπως μακροεντολές, πλαίσιο προτύπων και άλλα, για να κάνει τη δημιουργία και την προσαρμογή προτύπων αποτελεσματική και ευέλικτη.

Διαβίβαση δεδομένων σε πρότυπα

Τώρα που έχετε έτοιμα τα πρότυπά σας, πρέπει να μεταβιβάσετε δεδομένα από τα τελικά σημεία του FastAPI στα πρότυπα για απόδοση.

Προσθέστε τον ακόλουθο κώδικα στο main.py αρχείο:

από fastapi εισαγωγή FastAPI, Αίτημα
από fastapi.απαντήσεις εισαγωγή HTMLResponse
@app.get("/", answer_class=HTMLResponse)
ασυγχρονισμόςdefread_posts(αίτημα: Αίτημα):
ΕΠΙΣΤΡΟΦΗ πρότυπα. TemplateResponse("blog.html", {"αίτηση": αίτηση, 
"αναρτήσεις": fake_posts_db})

Ο κώδικας ορίζει ένα τελικό σημείο FastAPI που χειρίζεται ένα αίτημα GET στο ριζικό URL ("/") και επιστρέφει ένα HTMLResponse που παράγεται από το blog.html πρότυπο. Περνά ένα λεξικό περιβάλλοντος, που περιέχει το ρεύμα αντικείμενο αιτήματος και fake_posts_db, στο πρότυπο. Με αυτόν τον τρόπο η Jinja μπορεί να αποδώσει ακριβή και δυναμικά δεδομένα.

Επίσκεψη http://localhost: 8000/ στο πρόγραμμα περιήγησής σας και θα πρέπει να δείτε κάτι σαν αυτό:

Μεταβιβάσατε με επιτυχία δεδομένα στα πρότυπα για απόδοση.

Εξυπηρέτηση στατικών αρχείων

Εκτός από την απόδοση δυναμικών προτύπων, το FastAPI παρέχει επίσης λειτουργικότητα για την εξυπηρέτηση στατικών αρχείων, όπως αρχεία CSS, αρχεία JavaScript και εικόνες.

Θα χρησιμοποιήσετε CSS για να βελτιώσετε την εμφάνιση και την αίσθηση της σελίδας.

Στο στατικός κατάλογος, δημιουργία α στυλ.css αρχείο με τον παρακάτω κώδικα.

σώμα {
γραμματοσειρά-οικογένεια: Arial, Σανς σέριφ;
περιθώριο: 0;
υλικό παραγεμίσματος: 20px;
χρώμα του φόντου: #f5f5f5;
}
h1, h2, h3, h4 {
χρώμα: #333;
}


.Θέση {
χρώμα του φόντου: #fff;
υλικό παραγεμίσματος: 20px;
περιθώριο-κάτω: 20px;
σύνορα-ακτίνα: 5px;
κουτί-σκιά: 0 2px 4pxrgba(0, 0, 0, 0.1);
}


.Θέσηh3 {
περιθώριο-κορυφή: 0;
}


.ΘέσηΠ {
περιθώριο-κάτω: 10px;
}


.Θέσηul {
λίστα-στυλ-τύπου: κανένας;
padding-αριστερά: 0;
}


.σχόλιο {
περιθώριο-κάτω: 10px;
υλικό παραγεμίσματος: 10px;
χρώμα του φόντου: #f9f9f9;
σύνορα-ακτίνα: 5px;
}
υποσέλιδο {
χρώμα του φόντου: #f2f2f2;
υλικό παραγεμίσματος: 10px;
στοίχιση κειμένου: κέντρο;
}

Τροποποιήστε το κεφάλι στοιχείο του βάση.html πρότυπο ως εξής:

<κεφάλι>
<τίτλος>{% block title %}Απλό ιστολόγιο{% endblock %}τίτλος>
<Σύνδεσμοςhref="{{ url_for('static', path='/styles.css') }}"σχετ="φύλλο στυλ">
κεφάλι>

Η συνάρτηση url_for() δημιουργεί μια διεύθυνση URL (διαδρομή) για το στυλ.css (/static/styles.css) αρχείο στο στατικός καταλόγου ο οποίος στη συνέχεια εξυπηρετείται αυτόματα από το FastAPI.

Επίσκεψη http://localhost: 8000/ στο πρόγραμμα περιήγησής σας.

Οι ίδιες διαδικασίες ισχύουν για την προβολή αρχείων εικόνας και JavaScript.

Θυμηθείτε να ακολουθήσετε τις βέλτιστες πρακτικές

Όταν εργάζεστε με το Jinja Templating στο FastAPI, είναι σημαντικό να ακολουθείτε ορισμένες βέλτιστες πρακτικές για να εξασφαλίσετε μια καλά οργανωμένη και αποτελεσματική βάση κώδικα.

  • Οργανώστε τα πρότυπα σε έναν αποκλειστικό κατάλογο και σκεφτείτε να χρησιμοποιήσετε υποκαταλόγους για σχετικά πρότυπα.
  • Χρησιμοποιήστε την κληρονομικότητα προτύπων για να δημιουργήσετε επαναχρησιμοποιήσιμα βασικά πρότυπα και να τα επεκτείνετε για συγκεκριμένο περιεχόμενο.
  • Επιλέξτε προσεκτικά τα δεδομένα για μεταβίβαση σε πρότυπα, διατηρώντας το ωφέλιμο φορτίο ελαφρύ και χρησιμοποιήστε επεξεργαστές περιβάλλοντος ή ενδιάμεσο λογισμικό για δεδομένα που χρησιμοποιούνται συνήθως.
  • Χρησιμοποιήστε τις δυνατότητες του Jinja Templating, όπως μακροεντολές, φίλτρα και δομές ελέγχου για βελτιωμένη δυνατότητα επαναχρησιμοποίησης και αναγνωσιμότητας κώδικα.
  • Βελτιστοποιήστε την απόδοση εφαρμόζοντας στρατηγικές προσωρινής αποθήκευσης για στατικά πρότυπα, χρησιμοποιώντας κεφαλίδες προσωρινής αποθήκευσης HTTP και δημιουργία προφίλ για σημεία συμφόρησης απόδοσης.

Ακολουθώντας αυτές τις βέλτιστες πρακτικές, μπορείτε να διατηρήσετε ένα δομημένο έργο, να βελτιστοποιήσετε την απόδοση απόδοσης και να αξιοποιήσετε αποτελεσματικά τις δυνατότητες του Jinja Templating στις εφαρμογές σας FastAPI.

Χρήση του FastAPI για τη δημιουργία RestAPI

Εκτός από την κατασκευή εφαρμογών που απαιτούν πρότυπα απόδοσης. Το FastAPI υπερέχει στη δημιουργία RestAPI λόγω της υψηλής απόδοσης, της εύκολης στη χρήση σύνταξης, της αυτόματης δημιουργίας τεκμηρίωσης και της επεκτασιμότητας. Αυτές οι δυνατότητες καθιστούν το FastAPI ιδανικό για την αποτελεσματική ανάπτυξη ισχυρών web API.