/ / Cách tạo các trang web động bằng cách tạo khuôn mẫu Jinja trong FastAPI

Cách tạo các trang web động bằng cách tạo khuôn mẫu Jinja trong FastAPI

Tích hợp Jinja với FastAPI cho phép bạn tạo các trang web động kết hợp liền mạch mã Python với HTML, cho phép bạn tách lớp trình bày của ứng dụng khỏi lớp logic. Với các trang web động, bạn có thể tạo nội dung được cá nhân hóa và dựa trên dữ liệu, nâng cao trải nghiệm người dùng.




Jinja là gì?

Jinja là một công cụ mẫu mạnh mẽ, giàu tính năng dành cho Python để tạo các trang web động. Jinja Templating hỗ trợ tính kế thừa, câu lệnh có điều kiện, vòng lặp và nhiều tính năng khác giúp đơn giản hóa việc tạo các trang web động.

Bạn có thể kết hợp FastAPI và Jinja để tạo các trang web có bố cục nhất quán có thể hiển thị dữ liệu theo thời gian thực và xử lý thông tin nhập của người dùng. Bạn cũng có thể tách biệt các mối quan tâm, làm cho mã của bạn dễ bảo trì hơn và dễ hiểu hơn.

Thiết lập Dự án FastAPI

Để bắt đầu, bạn cần thiết lập dự án FastAPI.

  1. Tạo và kích hoạt môi trường ảo bằng các lệnh đầu cuối sau:
     python -m venv env

    # On Unix/MacOS:
    source venv/bin/activate

    # On Windows:
    .venvScriptsactivate

  2. Cài đặt FastAPI và các phụ thuộc cần thiết.
     pip install "fastapi[all]"
  3. Tạo một thư mục dự án blog của tôi.
  4. Tạo một tệp Python chính.py trong thư mục dự án của bạn.
  5. Thêm đoạn mã sau vào chính.py tài liệu:
     from fastapi import FastAPI

    fake_posts_db = [{
        'title': 'First Blog Post',
        'content': 'Content of the first blog post.',
        'author': 'John Doe',
        'publication_date': '2023-06-20',
        'comments': [
            {'author': 'Alice', 'content': 'Great post!'},
            {'author': 'Bob', 'content': 'Intresting read.'}
        ],
        'status': 'published'
    },{
        'title': 'Second Blog Post',
        'content': 'Content of the second blog post.',
        'author': 'Jane Smith',
        'publication_date': None,
        'comments': [],
        'status': 'draft'
    }]

    app = FastAPI()

    @app.get("/about")
    def about():
        return "All you need to know about Simple Blog"

    Đoạn mã trên tạo một ứng dụng FastAPI đơn giản với một điểm cuối duy nhất trả về phản hồi JSON khi được truy cập qua URL tương ứng. Bạn có thể sử dụng từ điển Python như thế này thay cho cơ sở dữ liệu thực tế; nó giúp giảm bớt sự phức tạp trong khi tập trung vào mục tiêu chính.

  6. Chạy máy chủ.
     uvicorn main:app --reload

Truy cập http://localhost:8000/about trong trình duyệt của bạn để xem phản hồi của máy chủ.

Tích hợp khuôn mẫu Jinja

Sau khi thiết lập thành công dự án của bạn, bây giờ bạn có thể thêm khuôn mẫu Jinja vào dự án.

  1. bên trong chính.py tệp, hãy nhập các mô-đun sau:
     from fastapi.templating import Jinja2Templates
      from fastapi.staticfiles import StaticFiles
  2. bên dưới ứng dụng biến, tạo một thể hiện của Jinja2Mẫu class và chuyển thư mục sẽ chứa các mẫu của bạn.
     templates = Jinja2Templates(directory="templates")
  3. Sau mẫu biến, thêm dòng mã sau:
     app.mount("/static", StaticFiles(directory="static"), name="static")

    Đoạn mã trên gắn kết tĩnh thư mục và hướng dẫn FastAPI phục vụ bất kỳ tệp tĩnh nào nằm trong thư mục khi URL yêu cầu bắt đầu bằng /tĩnh.

  4. TRONG blog của tôi thư mục tạo hai thư mục, mẫu để giữ các tệp HTML và tĩnh sẽ chứa tất cả các tệp tĩnh.
    bố cục dự án hiện tại

Khi hoàn thành các bước này, bạn đã tích hợp thành công Jinja Templating với dự án của mình.

Tạo trang web động với Jinja

Jinja cung cấp một bộ cú pháp và tính năng phong phú để tạo các mẫu động.

Trong phần này, bạn sẽ thấy cách sử dụng cú pháp tạo khuôn mẫu Jinja để tạo các trang web động.

Thẻ mẫu

Kèm theo các thẻ mẫu với một nẹp xoănbiểu tượng phần trăm cả từ hai phía. Bạn có thể sử dụng các thẻ như vậy để thực hiện các thao tác logic và luồng điều khiển trong mẫu. Một số thẻ mẫu thường được sử dụng bao gồm:

  • Tình trạng: Chạy khối mã nếu điều kiện là đúng.
     {% if condition %}...{% endif %}
  • Vòng: Lặp lại một lần lặp và chạy khối mã cho từng mục.
     {% for item in iterable %}...{% endfor %}
  • Bao gồm: Bao gồm một mẫu khác trong mẫu hiện tại.
     {% include 'template_name.html' %}
  • Khối: Xác định một khối mà các mẫu con có thể ghi đè bằng cách sử dụng tính kế thừa.
     {% block block_name %}...{% endblock %}
  • Mở rộng: Cho phép mẫu con kế thừa và mở rộng mẫu gốc.
     {% extend parent_temp.html %}

Các thẻ này cung cấp một cách linh hoạt và biểu cảm để tạo nội dung HTML dựa trên dữ liệu động và kiểm soát logic của ứng dụng của bạn.

Kế thừa mẫu

Jinja Templating hỗ trợ kế thừa mẫu. Điều này cho phép bạn xác định mẫu cơ sở (gốc) có bố cục chung và các phần mà mẫu con có thể mở rộng hoặc ghi đè. Một mẫu con có thể sử dụng Mở rộng để kế thừa và mở rộng mẫu gốc.

Tạo một cơ sở.html tập tin trong mẫu thư mục với đoạn mã sau.

 <!DOCTYPE html>
<html>
<head>
    <title>{% block title %}Simple Blog{% endblock %}</title>
</head>
<body>
    <h1>{% block heading %}Simple Blog{% endblock %}</h1>

    {% block content %}
    {% endblock %}

    {% include "footer.html" %}
</body>
</html>

Bằng cách này, bạn có một mẫu gốc chứa mã chung cho tất cả các mẫu của bạn, cho phép mẫu con kế thừa và mở rộng nó theo yêu cầu.

bên trong mẫu thư mục tạo một footer.html tập tin với mã sau đây.

 <footer>
    <p>&copy; 2023 Simple Blog. All rights reserved.</p>
    <a href="{{ url_for('about') }}">About</a>
</footer>

footer.html là một mẫu đi kèm có chứa mã HTML cho phần chân trang. Bạn có thể sử dụng lại nó trên nhiều trang bằng cách đưa nó vào mẫu cơ sở bằng cách sử dụng Bao gồm nhãn.

bên trong mẫu thư mục tạo một blog.html tập tin với mã sau đây.

 {% extends "base.html" %}

{% block title %}Simple Blog - Blog Page{% endblock %}

{% block heading %}Simple Blog - Blog Page{% endblock %}

{% block content %}
    <h2>Total Number of Posts: {{ posts|length }}</h2>

    {% for post in posts %}
        <div class="post">

            {% if post.status == 'published' %}
                <h3>{{ post.title }}</h3>
                <p>{{ post.content|truncate }}</p>
                <p>Published on: {{ post.publication_date }}</p>

                <h4>Comments:</h4>
                <ul>
                    {% for comment in post.comments %}
                        <li class="comment">{{ comment.author }}-: {{ comment.content }}</li>
                        

                    {% endfor %}
                </ul>
            {% else %}
                <p>This post is still in draft mode.</p>
            {% endif %}
        </div>
        <hr>
    {% endfor %}
{% endblock %}

Mẫu con này kế thừa từ cơ sở.html sử dụng Mở rộng nhãn. Nó ghi đè các khối cụ thể được xác định trong mẫu cơ sở để cung cấp nội dung tùy chỉnh cho trang blog. Nó cũng bao gồm logic và phép lặp cần thiết để hiển thị một bài đăng và các nhận xét liên quan.

Biểu thức

Jinja hỗ trợ nhiều loại biểu thức, bao gồm các phép tính số học, phép so sánh và phép toán logic. Ví dụ:

 {{2 + 2}} // output: 4 

Thay thế biến

Để xuất các biến trong mẫu, hãy đặt chúng trong dấu ngoặc nhọn kép. Ví dụ:

 {{post.title}} // output: 'First Blog Post' 

bộ lọc

Bộ lọc sửa đổi đầu ra của một biến. Bạn có thể thêm một biến sau một biến bằng ký hiệu ống (|). Ví dụ:

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

Bạn có thể thêm nhận xét nội tuyến và nhận xét nhiều dòng trong mẫu của mình. Jinja sẽ bỏ qua những nhận xét này trong quá trình hiển thị mẫu, vì vậy chúng rất hữu ích để thêm phần giải thích trong mẫu.

 {# #} // inline

{% comment %} ... {% end comment %} // multiline

URL

Để cho phép bạn tạo các siêu liên kết chính xác đến các trang khác trong ứng dụng, bối cảnh mẫu Jinja bao gồm một url_for chức năng. Ví dụ:

 <a href="{{ url_for('about') }}">About</a>

Đoạn mã trên trở thành http://localhost:8000/about. Bạn cũng sẽ thấy cách sử dụng url_for để nhận đường dẫn tệp tĩnh sau này.

Đây chỉ là một số khía cạnh cơ bản của cú pháp Tạo khuôn mẫu Jinja. Jinja Templating cung cấp nhiều tính năng và chức năng hơn, chẳng hạn như macro, ngữ cảnh mẫu, v.v., để tạo và tùy chỉnh mẫu hiệu quả và linh hoạt.

Truyền dữ liệu vào mẫu

Bây giờ, bạn đã có các mẫu sẵn sàng, bạn cần chuyển dữ liệu từ các điểm cuối FastAPI của mình vào các mẫu để hiển thị.

Thêm đoạn mã sau vào chính.py tài liệu:

 from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse

@app.get("https://www.smartreviewaz.com/", response_class=HTMLResponse)
async def read_posts(request: Request):
    return templates.TemplateResponse("blog.html", {"request": request,
                                                    "posts": fake_posts_db})

Mã xác định điểm cuối FastAPI xử lý yêu cầu GET tới URL gốc (“/”) và trả về một Phản hồi HTML được tạo ra từ blog.html bản mẫu. Nó vượt qua một từ điển ngữ cảnh, chứa hiện tại đối tượng yêu cầufake_posts_db, vào mẫu. Bằng cách này, Jinja có thể hiển thị dữ liệu động và chính xác.

Truy cập http://localhost:8000/ trên trình duyệt của bạn và bạn sẽ thấy một cái gì đó như thế này:

xem trang web

Bạn đã chuyển thành công dữ liệu vào các mẫu để hiển thị.

Phục vụ tệp tĩnh

Ngoài việc hiển thị các mẫu động, FastAPI còn cung cấp chức năng phục vụ các tệp tĩnh như tệp CSS, tệp JavaScript và hình ảnh.

Bạn sẽ sử dụng CSS để cải thiện giao diện của trang.

bên trong tĩnh thư mục, tạo một phong cách.css tập tin với mã sau đây.

 body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f5f5f5;
}

h1, h2, h3, h4 {
    color: #333;
}

.post {
    background-color: #fff;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.post h3 {
    margin-top: 0;
}

.post p {
    margin-bottom: 10px;
}

.post ul {
    list-style-type: none;
    padding-left: 0;
}

.comment {
    margin-bottom: 10px;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 5px;
}

footer {
    background-color: #f2f2f2;
    padding: 10px;
    text-align: center;
}

Sửa đổi cái đầu yếu tố của cơ sở.html mẫu như sau:

 <head>
    <title>{% block title %}Simple Blog{% endblock %}</title>
    <link href="{{ url_for('static', path="/styles.css") }}" rel="stylesheet">
</head>

Hàm url_for() tạo một URL (đường dẫn) cho phong cách.css (/static/styles.css) tập tin trong tĩnh thư mục mà sau đó được FastAPI phục vụ tự động.

Truy cập http://localhost:8000/ trên trình duyệt của bạn.

xem trang sau khi áp dụng css

Các quy trình tương tự áp dụng cho việc cung cấp tệp hình ảnh và JavaScript.

Hãy nhớ làm theo các phương pháp hay nhất

Khi làm việc với Jinja Templating trong FastAPI, điều quan trọng là phải tuân theo một số phương pháp hay nhất để đảm bảo cơ sở mã được tổ chức tốt và hiệu quả.

  • Sắp xếp các mẫu trong một thư mục chuyên dụng và cân nhắc sử dụng các thư mục con cho các mẫu liên quan.
  • Sử dụng kế thừa mẫu để tạo các mẫu cơ sở có thể tái sử dụng và mở rộng chúng cho nội dung cụ thể.
  • Chọn cẩn thận dữ liệu để chuyển sang mẫu, giữ cho tải trọng nhẹ và sử dụng bộ xử lý ngữ cảnh hoặc phần mềm trung gian cho dữ liệu thường được sử dụng.
  • Sử dụng các tính năng Tạo khuôn mẫu của Jinja như macro, bộ lọc và cấu trúc điều khiển để cải thiện khả năng sử dụng lại và khả năng đọc mã.
  • Tối ưu hóa hiệu suất bằng cách triển khai các chiến lược lưu vào bộ nhớ đệm cho các mẫu tĩnh, sử dụng tiêu đề bộ đệm HTTP và lập hồ sơ cho các tắc nghẽn hiệu suất.

Bằng cách làm theo các phương pháp hay nhất này, bạn có thể duy trì một dự án có cấu trúc, tối ưu hóa hiệu suất hiển thị và tận dụng hiệu quả các tính năng của Jinja Templating trong các ứng dụng FastAPI của mình.

Sử dụng FastAPI để xây dựng RestAPI

Ngoài việc xây dựng các ứng dụng yêu cầu kết xuất mẫu. FastAPI vượt trội trong việc xây dựng RestAPI nhờ hiệu suất cao, cú pháp dễ sử dụng, tạo tài liệu tự động và khả năng mở rộng. Các tính năng này làm cho FastAPI trở nên lý tưởng để phát triển hiệu quả các API web mạnh mẽ.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *