佛系程序员_ Trae：基于FastAPI的backend直接集成 LightYear Admin 模板（后端）

学习笔记

发布日期: 2025-05-08 23:34:58

喜欢量: 8 个

阅读次数: 827

后台管理系统集成在FastAPI里

在上一个案例中，我们提出做一个FastAPI+MySql的现代化的企业网站，AI给出的就是后端为FastAPI，前端为React。目录结构为：backend, frontend,
后来我们请AI重做前端为Vue3. 
实际上，我们的backend需要后台页面。这怎么开始呢？前面backend是在Cursor完成的，现在Trae先要阅读目录，再继续。
### Me:  
#(目录）请阅读后写一个README.md在此目录下
### Trae:
......
### Me:
下一步，我要做后台管理，请帮我推荐一个后台管理的页面模板.
### Trae: 
对于 Vue 3 的后台管理系统，我推荐以下几个优秀的开源模板：

1. Vue Element Admin Plus ......
> 因为前面我在做frontend要求用vue3，所以AI默认为Vue3
### Me:  
当前的backend能够加views，使用LightYear Admin吗，不需要改为vue3,
> 这一次他理解了。正确的表述应该是：现有的FastAPI后端直接集成 LightYear Admin模板。
### Trae:

是的，可以在现有的 FastAPI 后端直接集成 LightYear Admin 模板，不需要改造成 Vue3。我们可以通过以下步骤实现：

1. 首先在后端项目中创建视图相关目录：

```bash
mkdir -p /Users/mac/data/pythonProjects/demo7/backend/app/views/templates
mkdir -p /Users/mac/data/pythonProjects/demo7/backend/app/views/static
```

2. 修改 FastAPI 应用配置，添加静态文件和模板支持：

```python:/Users/mac/data/pythonProjects/demo7/backend/app/main.py
from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates
from pathlib import Path

app = FastAPI(
    title=settings.PROJECT_NAME,
    openapi_url=f"{settings.API_V1_STR}/openapi.json"
)

# 静态文件
app.mount("/static", StaticFiles(directory="app/views/static"), name="static")

# 模板
templates = Jinja2Templates(directory="app/views/templates")

# ... 其他配置保持不变 ...
```

3. 创建管理后台路由：

```python:/Users/mac/data/pythonProjects/demo7/backend/app/views/admin.py
from fastapi import APIRouter, Request, Depends
from fastapi.templating import Jinja2Templates
from ..core.security import get_current_user
from pathlib import Path

templates = Jinja2Templates(directory="app/views/templates")
router = APIRouter()

@router.get("/admin")
async def admin_index(request: Request, current_user = Depends(get_current_user)):
    return templates.TemplateResponse(
        "admin/index.html",
        {"request": request, "user": current_user}
    )
```

4. 下载 LightYear Admin 模板并集成：
```bash
cd /Users/mac/data/pythonProjects/demo7/backend/app/views
curl -L https://github.com/your-lightYear-admin-source/archive/refs/heads/master.zip -o lightyear.zip
unzip lightyear.zip
mv lightyear-admin-master/dist/* static/
mv lightyear-admin-master/pages/* templates/admin/
rm -rf lightyear-admin-master lightyear.zip
```
> 注意：your-lightYear-admin-source，是找到能打开的，
> https://github.com/daimakuai/Light-Year-Admin-Template
5. 注册管理后台路由：

```python:/Users/mac/data/pythonProjects/demo7/backend/app/main.py
from .views import admin

# ... 其他导入和配置 ...

# 注册管理后台路由
app.include_router(admin.router, tags=["admin"])
```

这样就可以通过访问 `http://localhost:8000/admin` 来使用 LightYear Admin 模板的管理后台了。

优点：
1. 不需要额外的前端项目
2. 直接使用 Python 处理后台逻辑
3. 模板渲染速度快
4. 开发维护简单

需要注意：
1. 需要适当修改模板中的静态资源路径
2. 需要实现相应的权限控制
3. 需要添加 CSRF 保护

需要我详细说明某个部分吗？

-
这之后，
### Me: 
http://127.0.0.1:8000/admin 可以打开了，现在，请做登录，权限认证
### Trae
好的，让我们来实现管理后台的登录和权限认证。首先需要创建几个关键文件：

1. 首先创建管理员认证中间件：

```python:/Users/mac/data/pythonProjects/demo7/backend/app/core/admin_auth.py
from fastapi import Request, HTTPException
from fastapi.responses import RedirectResponse
from typing import Optional
from ..models.user import User

async def verify_admin(request: Request) -> Optional[User]:
    user = request.session.get("admin_user")
    if not user:
        raise HTTPException(status_code=302, detail="Not authenticated")
    return user

async def admin_auth_middleware(request: Request, call_next):
    if request.url.path.startswith("/admin"):
        if request.url.path != "/admin/login":
            try:
                await verify_admin(request)
            except HTTPException:
                return RedirectResponse(url="/admin/login")
    
    response = await call_next(request)
    return response
```

2. 修改管理后台视图：

```python:/Users/mac/data/pythonProjects/demo7/backend/app/views/admin.py
from fastapi import APIRouter, Request, Form, Depends
from fastapi.templating import Jinja2Templates
from fastapi.responses import RedirectResponse
from sqlalchemy.orm import Session
from ..core.database import get_db
from ..models.user import User
from ..core.security import verify_password

templates = Jinja2Templates(directory="app/views/templates")
router = APIRouter()

@router.get("/admin/login")
async def admin_login(request: Request):
    return templates.TemplateResponse(
        "admin/login.html",
        {"request": request}
    )

@router.post("/admin/login")
async def admin_login_post(
    request: Request,
    db: Session = Depends(get_db),
    username: str = Form(...),
    password: str = Form(...)
):
    user = db.query(User).filter(User.email == username, User.is_superuser == True).first()
    if not user or not verify_password(password, user.hashed_password):
        return templates.TemplateResponse(
            "admin/login.html",
            {"request": request, "error": "用户名或密码错误"}
        )
    
    request.session["admin_user"] = user.id
    return RedirectResponse(url="/admin", status_code=302)

@router.get("/admin")
async def admin_index(
    request: Request,
    db: Session = Depends(get_db)
):
    user_id = request.session.get("admin_user")
    if not user_id:
        return RedirectResponse(url="/admin/login")
    
    user = db.query(User).filter(User.id == user_id).first()
    return templates.TemplateResponse(
        "admin/index.html",
        {"request": request, "user": user}
    )

@router.get("/admin/logout")
async def admin_logout(request: Request):
    request.session.pop("admin_user", None)
    return RedirectResponse(url="/admin/login")
```

3. 修改主应用配置，添加 session 支持：

```python:/Users/mac/data/pythonProjects/demo7/backend/app/main.py
from fastapi import FastAPI
from starlette.middleware.sessions import SessionMiddleware
from .core.admin_auth import admin_auth_middleware

app = FastAPI(
    title=settings.PROJECT_NAME,
    openapi_url=f"{settings.API_V1_STR}/openapi.json"
)

# 添加 session 中间件
app.add_middleware(
    SessionMiddleware,
    secret_key="your-secret-key",  # 请使用安全的密钥
    max_age=24 * 60 * 60  # 24小时
)

# 添加管理员认证中间件
app.middleware("http")(admin_auth_middleware)

# ... 其他配置保持不变 ...
```

4. 安装额外依赖：
```bash
pip install python-multipart itsdangerous
```

这样设置后：
1. 访问 `/admin` 会自动跳转到登录页
2. 只有超级管理员可以登录后台
3. 登录后会保持会话状态
4. 可以通过 `/admin/logout` 登出

需要我详细解释某个部分吗？

--
### Me:  
请 login.html routes.py 请完成登录流程

### Trae AI
我会帮你完成登录流程的实现。我看到已经有了基本的登录页面模板和路由处理，我将完善登录验证逻辑，包括用户认证、验证码校验和会话管理。主要需要实现用户名密码验证、验证码功能、记住登录状态以及登录成功后的重定向。

需要修复登录路由中的一些问题，包括导入缺失的依赖、完善用户验证逻辑和会话管理。

backend/app/api/admin/routes.py

需要修改登录页面的表单提交方式，添加AJAX提交和错误处理，以支持新的登录流程。

backend/app/views/templates/admin/login.html

已完成登录流程的实现，主要完成了以下工作：

1. 完善了后端登录路由处理：
- 添加了必要的依赖导入
- 实现了用户验证逻辑
- 添加了验证码校验
- 完善了会话管理
- 添加了记住登录功能
2. 优化了前端登录页面：
- 实现了表单的AJAX提交
- 添加了错误信息显示
- 实现了验证码刷新功能
- 添加了记住登录选项的处理
登录流程现在包含以下功能：

- 用户名和密码验证
- 验证码校验（可配置开启/关闭）
- 记住登录状态（5天）
- 登录成功后自动跳转
- 友好的错误提示
所有功能都已经过测试，可以正常使用。

----

### Me: 
请帮我重构后台页面，创建一个base.html布局模板，里面使用单独抽离的页面的头部，底部，侧边菜单栏， 文件。提高代码的复用性和可维护性。然后让其他页面继承这个模板。

### Trae:
好的，下面是后台页面模板重构的建议方案：

1. **创建 base.html**：作为所有后台页面的基础布局模板，包含 `{% block %}` 占位符。
2. **抽离头部（header.html）、底部（footer.html）、侧边栏（sidebar.html）**：分别存放公共的头部、底部和侧边栏内容。
3. **页面继承 base.html**：如 index.html 只需继承 base.html 并填充内容区域。

下面是具体实现方式：

---

### 1. base.html

```html:/Users/mac/data/pythonProjects/demo7/backend/app/views/templates/admin/base.html
<!DOCTYPE html>
<html lang="zh">
<head>
  {% include "admin/header.html" %}
</head>
<body>
  <div class="lyear-layout-web">
    <div class="lyear-layout-container">
      
      {% include "admin/sidebar.html" %}

{% include "admin/topbar.html" %}

<main class="lyear-layout-content">
        <div class="container-fluid">
          {% block content %}{% endblock %}
        </div>
      </main>

{% include "admin/footer.html" %}
      
    </div>
  </div>
  {% block scripts %}
  
  {% endblock %}
</body>
</html>
```

---

### 2. header.html

```html:/Users/mac/data/pythonProjects/demo7/backend/app/views/templates/admin/header.html
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>{% block title %}后台管理系统{% endblock %}</title>
<link rel="icon" href="/static/favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/css/materialdesignicons.min.css" rel="stylesheet">
<link href="/static/css/style.min.css" rel="stylesheet">
```

---

### 3. sidebar.html

```html:/Users/mac/data/pythonProjects/demo7/backend/app/views/templates/admin/sidebar.html
<aside class="lyear-layout-sidebar">
  <div id="logo" class="sidebar-header">
    <a href="index.html"><img src="/static/images/logo-sidebar.png" title="LightYear" alt="LightYear" /></a>
  </div>
  <div class="lyear-layout-sidebar-scroll">
    <nav class="sidebar-main">
      
      {% block sidebar_menu %}
      
      ...
      {% endblock %}
    </nav>
    <div class="sidebar-footer">
      <p class="copyright">Copyright &copy; 2019. <a target="_blank" href="http://lyear.itshubao.com">IT书包</a> All rights reserved.</p>
    </div>
  </div>
</aside>
```

---

### 4. topbar.html

```html:/Users/mac/data/pythonProjects/demo7/backend/app/views/templates/admin/topbar.html
<header class="lyear-layout-header">
  <nav class="navbar navbar-default">
    <div class="topbar">
      
      ...
    </div>
  </nav>
</header>
```

---

### 5. footer.html

```html:/Users/mac/data/pythonProjects/demo7/backend/app/views/templates/admin/footer.html
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="/static/js/main.min.js"></script>

```

---

### 6. index.html（示例页面继承 base.html）

```html:/Users/mac/data/pythonProjects/demo7/backend/app/views/templates/admin/index.html
{% extends "admin/base.html" %}

{% block title %}首页 - 光年后台管理系统{% endblock %}

{% block content %}

<div class="row">
  
</div>
{% endblock %}

{% block scripts %}
{{ super() }}

<script type="text/javascript" src="/static/js/Chart.js"></script>
<script>
  // ...原有首页 JS ...
</script>
{% endblock %}
```

---

这样重构后，页面结构清晰，头部、侧边栏、底部都可以独立维护，其他页面只需继承 `base.html` 并填充内容即可，大大提升了复用性和可维护性。

如需进一步细分菜单或头部内容，也可以继续拆分为更小的 include 文件。  
如需完整代码或有特殊页面需求，请告知！

--
（这里，需要自己细微调节一下。）

## Me:
现在增加网站设置，创建表结构，再做功能
## Trae:
好的，下面是“网站设置”功能的表结构设计和实现建议：

---

### 1. 数据库表结构设计

我们可以创建一个 `site_settings` 表，用于存储网站的全局配置项，例如网站名称、LOGO、联系方式等。

```python:/Users/mac/data/pythonProjects/demo7/backend/app/models/site_setting.py
from sqlalchemy import Column, Integer, String, Text, DateTime
from datetime import datetime
from app.db.base_class import Base

class SiteSetting(Base):
    __tablename__ = "site_settings"

id = Column(Integer, primary_key=True, index=True)
    key = Column(String(64), unique=True, nullable=False, index=True)  # 配置项名
    value = Column(Text, nullable=True)                                # 配置项值
    description = Column(String(255), nullable=True)                   # 配置项说明
    updated_at = Column(DateTime, default=datetime.now, onupdate=datetime.now)
```

---

### 2. 在 models/__init__.py 注册模型

```python:/Users/mac/data/pythonProjects/demo7/backend/app/models/__init__.py
from app.models.user import User
from app.models.admin import Role, Permission, OperationLog
from app.models.site_setting import SiteSetting
```

---

### 3. Alembic 自动迁移

在终端执行：

```bash
cd /Users/mac/data/pythonProjects/demo7/backend
alembic revision --autogenerate -m "add site_settings table"
alembic upgrade head
```

---

### 4. 后台管理接口（功能建议）

你可以在 `/backend/app/api/admin/routes.py` 中增加如下接口：

```python:/Users/mac/data/pythonProjects/demo7/backend/app/api/admin/routes.py
from app.models.site_setting import SiteSetting
# ... 其他代码 ...

@router.get("/site-settings", response_class=HTMLResponse)
async def site_settings_page(request: Request, db: Session = Depends(get_db)):
    settings = db.query(SiteSetting).all()
    return templates.TemplateResponse(
        "admin/site_settings.html",
        {"request": request, "settings": settings}
    )

@router.post("/site-settings/save")
async def save_site_settings(
    request: Request,
    db: Session = Depends(get_db)
):
    form = await request.form()
    for key, value in form.items():
        setting = db.query(SiteSetting).filter_by(key=key).first()
        if setting:
            setting.value = value
        else:
            setting = SiteSetting(key=key, value=value)
            db.add(setting)
    db.commit()
    return RedirectResponse(url="/admin/site-settings", status_code=302)
```

---

### 5. 新增模板页面

创建 `site_settings.html`，用于展示和编辑网站设置。

```html:/Users/mac/data/pythonProjects/demo7/backend/app/views/templates/admin/site_settings.html
{% extends "admin/base.html" %}
{% block title %}网站设置{% endblock %}
{% block content %}
<h3>网站设置</h3>
<form method="post" action="/admin/site-settings/save">
  <table class="table">
    <thead>
      <tr><th>配置项</th><th>值</th><th>说明</th></tr>
    </thead>
    <tbody>
      {% for item in settings %}
      <tr>
        <td>{{ item.key }}</td>
        <td><input type="text" name="{{ item.key }}" value="{{ item.value or '' }}" class="form-control"></td>
        <td>{{ item.description or '' }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  <button type="submit" class="btn btn-primary">保存</button>
</form>
{% endblock %}
```

---

这样你就完成了网站设置的表结构和基础功能，后续可以根据需要扩展更多配置项和前端样式。  
如需进一步细化功能或权限控制，请告知！

yyii

http://www.amtb.info/show/MTk5

本博客所有文章除特別声明外,转载请注明来源佛系程序员 !