FastAPI 是一个现代、快速（高性能）的 Web 框架，用于基于标准 Python 类型提示使用 Python 3.7+ 构建 API。虽然它的主要用例是构建 API，但 FastAPI 还可以轻松提供静态文件和 HTML 模板，从而让您可以构建全栈 Web 应用程序。
在此博客中，我们将探讨如何使用 FastAPI 提供静态文件。我们将介绍基础知识并提供演示以帮助您入门。
为什么要提供静态文件？
静态文件是不经常更改的资产，并按原样交付给客户端。这些包括：
HTML 文件
CSS 文件
JavaScript 文件
图像
提供静态文件对于任何 Web 应用程序都是必不可少的，因为它们有助于创建用户界面并增强用户体验。
设置 FastAPI
首先，确保您已安装 FastAPI 和 Uvicorn。如果没有，您可以使用 pip 安装它们：
pip install fastapi uvicorn接下来，创建一个新的 FastAPI 项目。您可以使用任何您喜欢的结构，但本教程中有一个简单结构：
my_fastapi_app/
├── static/
│ ├── css/
│ │ └── styles.css
│ ├── js/
│ │ └── scripts.js
│ └── images/
│ └── logo.png
├── main.py
└── templates/
└── index.html提供静态文件
要在 FastAPI 中提供静态文件，您可以使用 fastapi.staticfiles 中的 StaticFiles 类。以下是设置方法：
步骤 1：导入所需模块
from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles步骤 2：初始化 FastAPI 应用
app = FastAPI()步骤 3：挂载静态文件
您需要告诉 FastAPI 在哪里找到您的静态文件并将它们挂载在特定路径下。例如，让我们将它们挂载在路径 /static 下：
app.mount("/static", StaticFiles(directory="static"), name="static")
步骤 4：创建路由
创建一个简单的路由来提供引用静态文件的 HTML 模板。
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates
from fastapi import Request
templates = Jinja2Templates(directory="templates")
@app.get("/", response_class=HTMLResponse)
async def read_root(request: Request):
return templates.TemplateResponse("index.html", {"request": request})示例 HTML 模板
在 templates 目录中创建一个 index.html 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/css/styles.css">
<script src="/static/js/scripts.js" defer></script>
<title>FastAPI Static Files</title>
</head>
<body>
<h1>Welcome to FastAPI</h1>
<img src="/static/images/logo.png" alt="Logo">
</body>
</html>CSS 文件
在 static/css 目录中创建一个 style.css 文件：
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f0f0;
}
h1 {
color: #333;
}
img {
max-width: 100px;
}JavaScript 文件
在 static/js 目录中创建一个 scripts.js 文件：
document.addEventListener('DOMContentLoaded', (event) => {
console.log('DOM fully loaded and parsed');
});
运行应用程序
要运行 FastAPI 应用程序，请使用 Uvicorn：
uvicorn main:app --reload
在浏览器中导航到 http://127.0.0.1:8000。您应该看到应用了 CSS 和 JavaScript 的 HTML 模板，并且应该显示图像。
下面还有几个演示，说明如何使用 FastAPI 提供不同类型的静态文件：
演示 1：提供静态 JSON 文件
假设您有一个想要作为静态文件提供的 JSON 文件。在静态目录中创建一个 data.json 文件：
{
"message": "Hello, FastAPI!",
"timestamp": "2024-06-29T12:00:00Z"
}
您可以通过挂载静态目录并通过 URL 访问来提供此文件：
# main.py
from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles
app = FastAPI()
app.mount("/static", StaticFiles(directory="static"), name="static")
@app.get("/json")
async def read_json():
return {"url": "/static/data.json"}演示 2：提供静态 PDF 文件
假设您想要提供一个 PDF 文件供下载。在 static/docs 目录中创建一个 document.pdf 文件。
# main.py
from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles
app = FastAPI()
app.mount("/static", StaticFiles(directory="static"), name="static")
@app.get("/download")
async def download_file():
return {"url": "/static/docs/document.pdf"}在浏览器中，导航到 http://127.0.0.1:8000/download 以查看下载链接。
演示 3：使用动态内容提供静态 JavaScript
您可以提供与您的 API 交互的 JavaScript 文件来获取动态内容。在 static/js 目录中创建一个 dynamic.js 文件：
document.addEventListener('DOMContentLoaded', async () => {
const response = await fetch('/api/data');
const data = await response.json();
document.getElementById('content').textContent = data.message;
});修改 HTML 模板以包含此 JavaScript 文件和动态内容的占位符：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/css/styles.css">
<script src="/static/js/dynamic.js" defer></script>
<title>FastAPI Dynamic Content</title>
</head>
<body>
<h1>FastAPI with Dynamic Content</h1>
<div id="content">Loading...</div>
</body>
</html>创建 API 端点以提供动态内容：
# main.py
from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates
from fastapi import Request
app = FastAPI()
app.mount("/static", StaticFiles(directory="static"), name="static")
templates = Jinja2Templates(directory="templates")
@app.get("/", response_class=HTMLResponse)
async def read_root(request: Request):
return templates.TemplateResponse("index.html", {"request": request})
@app.get("/api/data")
async def get_data():
return {"message": "Hello, this is dynamic content from the API!"}演示 4：使用动态样式提供静态 CSS
您可以通过提供引用动态属性的静态 CSS 文件来创建动态样式。在 static/css 目录中创建一个 dynamic_styles.css 文件：
body {
background-color: var(--bg-color, #ffffff);
color: var(--text-color, #000000);
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
color: var(--heading-color, #333);
}
修改 HTML 模板以包含根据 API 响应动态设置 CSS 变量的脚本：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/css/dynamic_styles.css">
<title>FastAPI Dynamic Styles</title>
</head>
<body>
<h1>Dynamic Styles with FastAPI</h1>
<script>
document.addEventListener('DOMContentLoaded', async () => {
const response = await fetch('/api/styles');
const styles = await response.json();
document.documentElement.style.setProperty('--bg-color', styles.bgColor);
document.documentElement.style.setProperty('--text-color', styles.textColor);
document.documentElement.style.setProperty('--heading-color', styles.headingColor);
});
</script>
</body>
</html>
创建 API 端点以提供动态样式：
# main.py
from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates
from fastapi import Request
app = FastAPI()
app.mount("/static", StaticFiles(directory="static"), name="static")
templates = Jinja2Templates(directory="templates")
@app.get("/", response_class=HTMLResponse)
async def read_root(request: Request):
return templates.TemplateResponse("index.html", {"request": request})
@app.get("/api/styles")
async def get_styles():
return {
"bgColor": "#f0f0f0",
"textColor": "#333333",
"headingColor": "#ff5733"
}
演示 5：提供静态视频文件
如果您想要提供视频文件，可以将它们放在 static 目录中，并在 HTML 中引用它们。在 static/videos 目录中创建一个 sample.mp4 文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/css/styles.css">
<title>FastAPI Video</title>
</head>
<body>
<h1>Serving Video with FastAPI</h1>
<video width="320" height="240" controls>
<source src="/static/videos/sample.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>更新您的 main.py 以提供视频文件：
# main.py
from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates
from fastapi import Request
app = FastAPI()
app.mount("/static", StaticFiles(directory="static"), name="static")
templates = Jinja2Templates(directory="templates")
@app.get("/", response_class=HTMLResponse)
async def read_root(request: Request):
return templates.TemplateResponse("index.html", {"request": request})这些演示说明了使用 FastAPI 提供静态文件的各种方式，包括 JSON、PDF、具有动态内容的 JavaScript、具有动态样式的 CSS 和视频文件。FastAPI 可以轻松提供这些文件并将其集成到您的 Web 应用程序中，从而提供丰富的用户体验。
请随意尝试这些示例并扩展它们以适合您的特定用例。FastAPI 的灵活性和性能使其成为构建现代 Web 应用程序的绝佳选择。
在 FastAPI 中提供静态文件很简单。通过挂载静态文件目录并引用 HTML 模板中的文件，您可以创建一个丰富的交互式 Web 应用程序。本指南介绍了设置 FastAPI 以提供静态文件的基础知识，并提供了一些演示来帮助您入门。