How to Set Up a HTML App with FastAPI, Jinja, Forms & Templates
Статья Eugene Yan — короткое практическое руководство по созданию HTML-приложения на FastAPI с использованием шаблонизатора Jinja2 и HTML-форм. Автор, привыкший к Flask, описывает переход на FastAPI и отмечает, что он оказался проще ожидаемого. Сначала показано создание простого REST API, который принимает число и возвращает его текстовое написание. Затем добавляются зависимости jinja2 и python-multipart, создаётся HTML-шаблон с формой, и пишется веб-приложение, обрабатывающее GET- и POST-запросы через шаблоны. Статья стала трендовой на Made With ML и привлекла внимание сообщества.
How to Set Up a HTML App with FastAPI, Jinja, Forms & Templates
Как создать HTML-приложение с FastAPI, Jinja, формами и шаблонами
[ engineering python til ] · 3 мин. чтения
I usually use Flask to build and deploy REST/web apps. Flask is simple to use and apps are easy to spin up with minimal code. Today, I decided to try FastAPI for my new web app, inspired by @tiangolo’s recent talk.
Обычно я использую Flask для создания и деплоя REST/веб-приложений. Flask прост в использовании, и приложения легко поднять с минимумом кода. Сегодня я решил попробовать FastAPI для своего нового веб-приложения, вдохновившись недавним докладом @tiangolo.
The switch was easier than expected. FastAPI has great documentation and this article by @amitness was useful. Nonetheless, I couldn’t find any guides on how to serve HTML with FastAPI. Thus, I wrote this simple article to plug the hole on the internet.
Переход оказался проще, чем я ожидал. У FastAPI отличная документация, а статья @amitness тоже пригодилась. Тем не менее я не смог найти ни одного руководства по тому, как отдавать HTML через FastAPI. Поэтому я написал эту небольшую статью, чтобы закрыть пробел в интернете.
Try it out with the GitHub repo here: fastapi-html
Попробуйте сами с помощью GitHub-репозитория: fastapi-html
First, We Build a REST API
Для начала создадим REST API
Installing FastAPI is as easy as (more about poetry):
Установить FastAPI очень просто (подробнее о poetry):
poetry add fastapi uvicorn
poetry add fastapi uvicorn
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}
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}
Let’s start it up…
Запустим его…
poetry run uvicorn src.rest:app --reload
poetry run uvicorn src.rest:app --reload
And call the REST API. The API takes in a number, and spells it out.
И вызовем 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"}
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"}
Now, Let’s Make it Serve HTML
Теперь научим приложение отдавать HTML
First, we’ll need to install some additional dependencies, specifically python-multipart for HTML forms and jinja for templating.
Сначала нужно установить дополнительные зависимости, а именно python-multipart для HTML-форм и jinja для шаблонизации.
poetry add jinja2 python-multipart
poetry add jinja2 python-multipart
Then, we’ll create a simple HTML template:
Затем создадим простой HTML-шаблон:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sample Form</title>
</head>
<body>
<form method="post">
<input type="number" name="num" value="1234"/>
<input type="submit">
</form>
<p>Result: {{ result }}</p>
</body>
</html>
Result: {{ result }}
Next, we write a simple web app that:
Далее напишем простое веб-приложение, которое:
Подключает директорию с шаблонами Принимает запросы и… Возвращает результаты через наш 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})
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})
Let’s start it up…
Запустим его…
poetry run uvicorn src.html:app --reload
poetry run uvicorn src.html:app --reload
And give it a spin. Viola, simple as that.
И попробуем в деле. Вуаля, всё просто.
Our simple web app with FastAPI, Forms, and Jinja templates
Наше простое веб-приложение на FastAPI с формами и шаблонами Jinja
Today, I learnt how to use FastAPI to serve HTML web apps.
It's straightforward with jinja, templates, and HTML forms. Here's the 2-min how-to.https://t.co/RrrISggU8o
Сегодня я научился использовать FastAPI для отдачи HTML-приложений. С jinja, шаблонами и HTML-формами всё просто. Вот руководство на 2 минуты.https://t.co/RrrISggU8o— Eugene Yan (@eugeneyan) 25 июля 2020
Update: This article trended recently on Made With ML!
Обновление: эта статья недавно попала в тренды на Made With ML!
🏆 Today’s trending post is How to Set Up a HTML App with FastAPI (@tiangolo) by @eugeneyan https://t.co/1fJE6Uf4xB
Made With ML mostly runs on FastAPI now (with the exception of a few extensions) bc of the many advantages mentioned here by @KaiserFrosehttps://t.co/fVluux2Y5S
🏆 Сегодняшний трендовый пост — 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
References
Ссылки
If you found this useful, please cite this write-up as:
Если материал оказался полезен, пожалуйста, цитируйте его так:
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/.
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/.
or
или
@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/}
}
@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/} }
Join 11,800+ readers getting updates on machine learning, RecSys, LLMs, and engineering.
Присоединяйтесь к 11 800+ читателям, которые получают обновления о машинном обучении, RecSys, LLM и инженерии.