如何使用fastapi创建前端登录界面实现连接数据库

FastAPI是一个现代、快速的Web框架，用于构建 APIs。为了创建前端登录界面并将其与数据库相连，你需要遵循以下步骤：

1. **安装所需库**:
- 使用`pip`安装`FastAPI`、`Uvicorn`作为服务器，以及数据库库如`SQLAlchemy`（配合`alembic`做版本控制），还有`Passlib`处理密码哈希。

   pip install fastapi uvicorn sqlalchemy alembic passlib[bcrypt]

2. **设置项目结构**:
创建`main.py`, `models.py`, `schemas.py`, 和 `database.py`等文件分别用于定义API路由、数据模型、请求和响应验证。

3. **`models.py`:**
定义用户模型，包含用户名和加密后的密码字段。

   from sqlalchemy import Column, String
   from .base import Base

   class User(Base):
       __tablename__ = "users"
       id = Column(String, primary_key=True)
       username = Column(String, unique=True, nullable=False)
       hashed_password = Column(String, nullable=False)

4. **`schemas.py`:**
创建User schema，用于序列化和反序列化JSON数据。

   from pydantic import BaseModel
   from typing import Optional

   class UserCreate(BaseModel):
       username: str
       password: str

   class UserInDB(User):
       id: str

5. **`database.py`:**
配置数据库连接和迁移工具。

   from sqlalchemy import create_engine
   from sqlalchemy.orm import sessionmaker
   from .base import Base

   engine = create_engine("sqlite:///./app.db", echo=True)  # 示例：SQLite
   SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)

   def get_db():
       db = SessionLocal()
       try:
           yield db
       finally:
           db.close()

6. **`main.py`:**
在这里编写FastAPI应用，添加登录路由，并处理登录逻辑（包括从数据库查找用户和验证密码）。

   from fastapi import FastAPI, Depends, HTTPException, status
   from starlette.requests import Request
   from . import database, schemas
   from passlib.context import CryptContext

   app = FastAPI()

   crypt_context = CryptContext(schemes=["bcrypt"], deprecated="auto")

   async def get_db(request: Request):
       db = await database.get_db()
       request.state.db = db
       return db

   @app.post("/login", response_model=schemas.UserInDB)
   async def login(user_in: schemas.UserCreate, db: Depends(get_db)):
       user = db.query(User).filter_by(username=user_in.username).first()
       if not user or not crypt_context.verify(user.hashed_password, user_in.password):
           raise HTTPException(status_code=status.HTTP_401_UNAUTHORIZED, detail="Invalid credentials")
       return user

7. **前端部分**:
使用HTML、CSS和JavaScript创建登录表单，通过Ajax发送POST请求到/api/login。可以使用React、Vue.js等前端框架。

8. **部署**:
使用Uvicorn启动服务：`uvicorn main:app --reload`，然后在浏览器访问登录页面尝试登录。