newsmode
search
Меню
arrow_back Назад

How to Set Up a HTML App with FastAPI, Jinja, Forms & Templates

auto_awesomeКраткое саммари

Статья Eugene Yan — короткое практическое руководство по созданию HTML-приложения на FastAPI с использованием шаблонизатора Jinja2 и HTML-форм. Автор, привыкший к Flask, описывает переход на FastAPI и отмечает, что он оказался проще ожидаемого. Сначала показано создание простого REST API, который принимает число и возвращает его текстовое написание. Затем добавляются зависимости jinja2 и python-multipart, создаётся HTML-шаблон с формой, и пишется веб-приложение, обрабатывающее GET- и POST-запросы через шаблоны. Статья стала трендовой на Made With ML и привлекла внимание сообщества.

Как создать HTML-приложение с FastAPI, Jinja, формами и шаблонами

[ engineering python til ] · 3 мин. чтения

Обычно я использую Flask для создания и деплоя REST/веб-приложений. Flask прост в использовании, и приложения легко поднять с минимумом кода. Сегодня я решил попробовать FastAPI для своего нового веб-приложения, вдохновившись недавним докладом @tiangolo.

Переход оказался проще, чем я ожидал. У FastAPI отличная документация, а статья @amitness тоже пригодилась. Тем не менее я не смог найти ни одного руководства по тому, как отдавать HTML через FastAPI. Поэтому я написал эту небольшую статью, чтобы закрыть пробел в интернете.

Попробуйте сами с помощью GitHub-репозитория: fastapi-html

Для начала создадим REST API

Установить FastAPI очень просто (подробнее о poetry):

poetry add fastapi uvicorn

Затем создадим простой REST API.

from fastapi import FastAPI from src.model import spell_number # Spell a number: 1 -> 'one', 2 -> 'two' app = FastAPI() @app.get('/') def read_root(): return 'hello world' @app.get("/rest") def read_item(num: int): result = spell_number(num) return {"number_spelled": result}

Запустим его…

poetry run uvicorn src.rest:app --reload

И вызовем REST API. API принимает число и записывает его словами.

curl -X GET "http://127.0.0.1:8000/rest?num=1234" -H "accept: application/json" {"number_spelled":"one thousand, two hundred and thirty-four"}

Теперь научим приложение отдавать HTML

Сначала нужно установить дополнительные зависимости, а именно python-multipart для HTML-форм и jinja для шаблонизации.

poetry add jinja2 python-multipart

Затем создадим простой HTML-шаблон:

Sample Form

Result: {{ result }}

Далее напишем простое веб-приложение, которое:

Подключает директорию с шаблонами Принимает запросы и… Возвращает результаты через наш HTML-шаблон

from fastapi import FastAPI, Request, Form from fastapi.templating import Jinja2Templates from src.model import spell_number app = FastAPI() templates = Jinja2Templates(directory="templates/") @app.get('/') def read_form(): return 'hello world' @app.get("/form") def form_post(request: Request): result = "Type a number" return templates.TemplateResponse('form.html', context={'request': request, 'result': result}) @app.post("/form") def form_post(request: Request, num: int = Form(...)): result = spell_number(num) return templates.TemplateResponse('form.html', context={'request': request, 'result': result})

Запустим его…

poetry run uvicorn src.html:app --reload

И попробуем в деле. Вуаля, всё просто.

Наше простое веб-приложение на FastAPI с формами и шаблонами Jinja

Сегодня я научился использовать FastAPI для отдачи HTML-приложений. С jinja, шаблонами и HTML-формами всё просто. Вот руководство на 2 минуты.https://t.co/RrrISggU8o— Eugene Yan (@eugeneyan) 25 июля 2020

Обновление: эта статья недавно попала в тренды на Made With ML!

🏆 Сегодняшний трендовый пост — How to Set Up a HTML App with FastAPI (@tiangolo) от @eugeneyan https://t.co/1fJE6Uf4xBMade With ML теперь в основном работает на FastAPI (за исключением нескольких расширений) благодаря многочисленным преимуществам, упомянутым здесь @KaiserFrosehttps://t.co/fVluux2Y5S— Made With ML (@madewithml) 27 июля 2020

Ссылки

Если материал оказался полезен, пожалуйста, цитируйте его так:

Yan, Ziyou. (Jul 2020). How to Set Up a HTML App with FastAPI, Jinja, Forms & Templates. eugeneyan.com. https://eugeneyan.com/writing/how-to-set-up-html-app-with-fastapi-jinja-forms-templates/.

или

@article{yan2020fastapi, title = {How to Set Up a HTML App with FastAPI, Jinja, Forms & Templates}, author = {Yan, Ziyou}, journal = {eugeneyan.com}, year = {2020}, month = {Jul}, url = {https://eugeneyan.com/writing/how-to-set-up-html-app-with-fastapi-jinja-forms-templates/} }



Присоединяйтесь к 11 800+ читателям, которые получают обновления о машинном обучении, RecSys, LLM и инженерии.