🐍 Cap 10: Stack FastAPI & Vue 3 - Exemplos Práticos

Demonstrações práticas da arquitetura cliente-servidor assíncrona com Python e Vue 3.

🗺️ Fluxo Reativo do Frontend ao Backend em Mermaid

flowchart LR
    VUE["Vue 3 Component 🖼️"]
    --> PINIA["Pinia Store 🍍"]
    --> API["FastAPI async router ⚡"]
    --> DB[("PostgreSQL asyncpg 🐘")]

    style VUE fill:#e8f5e9,stroke:#4caf50,stroke-width:1.5px
    style PINIA fill:#fff3e0,stroke:#ff9800,stroke-width:1.5px
    style API fill:#00897b,stroke:#004d40,stroke-width:2px,color:#ffffff
    style DB fill:#ede7f6,stroke:#512da8,stroke-width:1.5px

📄 Exemplo 1: Servidor FastAPI com Modelo Pydantic v2

from fastapi import FastAPI, HTTPException
from pydantic import BaseModel, Field

app = FastAPI(title="API Full Stack FastAPI + Vue 3")

class ProdutoSchema(BaseModel):
    id: int
    nome: str = Field(..., min_length=2)
    preco: float = Field(..., gt=0)

banco_em_memoria = [
    ProdutoSchema(id=1, nome="Teclado Mecânico RGB", preco=350.0),
    ProdutoSchema(id=2, nome="Mouse Sem Fio 16000 DPI", preco=180.0),
]

@app.get("/api/produtos", response_model=list[ProdutoSchema])
async def listar_produtos():
    return banco_em_memoria

🧭 Navegação Rápida