Требуется передать в определенную страницу HTML данные из БД FastAPI

Question

Всем привет. На днях на курсах по Python начали изучать FastAPI. Ну, после первого занятия понятно что толком ничего не понятно) Дали задачку, факультативно - реализовать форму регистрации, полученные с формы данные писать в БД, и выводить список пользователей из нее же. С записью особых проблем не возникло, базового руководства с просторов инета вполне хватило. А вот с выводом не заладилось - в руководстве все реализовано на одной странице HTML, а у меня несколько. Используются шаблоны Jinja2Templates. Код бэка:

from fastapi import FastAPI, Request, Body, Depends
from fastapi.templating import Jinja2Templates
from sqlalchemy import create_engine
from sqlalchemy.ext.declarative import declarative_base
from sqlalchemy import  Column, Integer, String
from sqlalchemy.orm import sessionmaker

# строка подключения
SQLALCHEMY_DATABASE_URL = "sqlite:///./users.db"
 
# создаем движок SqlAlchemy
engine = create_engine(
    SQLALCHEMY_DATABASE_URL, connect_args={"check_same_thread": False}
)
#создаем базовый класс для моделей
Base = declarative_base()
 
# создаем модель, объекты которой будут храниться в бд
class Person(Base):
    __tablename__ = "Users"
    id = Column(Integer, primary_key=True, index=True)
    email = Column(String)
    password = Column(String)
 
# создаем таблицы
Base.metadata.create_all(bind=engine)

app = FastAPI() # <- Создаем экземпляр класса FastAPI
templates = Jinja2Templates(directory="templates")

@app.get("/") # <- декоратор, который обрабатывает get - запросы где маршрут
def index(request: Request):
    return templates.TemplateResponse(request=request, name='index.html')

@app.get("/login/") # <- декоратор, который обрабатывает get - запросы где маршрут
def login(request:Request):
    return templates.TemplateResponse(request=request, name="login.html")
 
@app.get("/users/") # <- декоратор, который обрабатывает get - запросы где маршрут
def get_users_page(request:Request):
    SessionLocal = sessionmaker(autoflush=False, bind=engine)
    db = SessionLocal()
    users = db.query(Person).all()
    return templates.TemplateResponse(request=request, name="users.html", context=users)

@app.post("/rec/")
def add_us(data = Body()):
    SessionLocal = sessionmaker(autoflush=False, bind=engine)
    db = SessionLocal()
    new_email = data["mail"]
    new_password = data["pass"]
    user = Person(email = new_email, password = new_password)
    db.add(user)
    db.commit()


# uvicorn main:app --reload

на принимающей стороне страницы users код:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
      button {
            display: block;
            margin: auto;
            margin-top: 20px;
            width: 200px;
            height: 30px;
        }
</style>
<body>
    <h1 style="text-align: center;">Users</h1>

    <h2 style="text-align: center";>Список пользователей</h2>
  
    <table style="display: block; margin: auto;">
        <thead><tr><th>Email</th><th>Password</th><th>ID</th></tr></thead>
        <tbody id="table">
        </tbody>
    </table>

    <button onclick="back()">На главную</button>
    <button onclick="reg()">На форму регистрации</button>

  <script defer>
        // Получение всех пользователей
        async function getUsers() {
            // отправляет запрос и получаем ответ
            const response = await fetch("/users/", {
                method: "GET",
                headers: { "Accept": "application/json" }
            });
            // если запрос прошел нормально
            if (response.ok === true) {
                // получаем данные
                const users = await response.json();
                const table = document.querySelector("#table");
                users.forEach(user => table.insertAdjacentHTML("afterbegin", `<tr><th>${user["email"]}</th><th>${user["password"]}</th>${user["id"]}<th>ID</th></tr>`));
            }
        }
        function back() {
            window.location.href='/'
        }
        function reg() {
            window.location.href='/login/'
        }
    </script>
</body>
</html>

И в общем ничего не срабатывает корректно. понимаю что список передавать в контекст шаблона не хочет - но я делал из него словарь, тогда в терминале все ок, статусы зеленые - но на странице юзерс он ничего не получает, пробовал консолить переменную. В общем вся проблема - запихать список словарей в контекст и передать в определенную страницу через шаблон

Понимаю что вопрос скорее всего простейший, да и я скорее всего наворотил бреда - но еще ж ничего не знаю вообще про запросы и проч. Инфы в инете просто вагон, но как я заметил - не для чайников типа меня. Что сделать или хотя бы где конкретно копать для решения?

БЛОГ НА HUSL

Требуется передать в определенную страницу HTML данные из БД FastAPI

Ответы (0 шт):