在此博客中，我们将磋商如何利用 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 FastAPIfrom 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 HTMLResponsefrom fastapi.templating import Jinja2Templatesfrom fastapi import Requesttemplates = 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.pyfrom fastapi import FastAPIfrom fastapi.staticfiles import StaticFilesapp = 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.pyfrom fastapi import FastAPIfrom fastapi.staticfiles import StaticFilesapp = 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.pyfrom fastapi import FastAPIfrom fastapi.staticfiles import StaticFilesfrom fastapi.responses import HTMLResponsefrom fastapi.templating import Jinja2Templatesfrom fastapi import Requestapp = 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.pyfrom fastapi import FastAPIfrom fastapi.staticfiles import StaticFilesfrom fastapi.responses import HTMLResponsefrom fastapi.templating import Jinja2Templatesfrom fastapi import Requestapp = 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.pyfrom fastapi import FastAPIfrom fastapi.staticfiles import StaticFilesfrom fastapi.responses import HTMLResponsefrom fastapi.templating import Jinja2Templatesfrom fastapi import Requestapp = 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 以供应静态文件的根本知识，并供应了一些演示来帮助您入门。
