FastAPI 模板:提供静态文件 -fpic 静态库
qiyuwang 2024-10-06 12:17 23 浏览 0 评论
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 以提供静态文件的基础知识，并提供了一些演示来帮助您入门。
- 上一篇：.Net8 Blazor 尝鲜 尝鲜字幕
- 下一篇：网页开发中的提示词 提醒网页
相关推荐
- 别再乱找了!这才是 Alist 本地安装挂载的正确打开方式
-
一、探秘Alist的神奇世界在这个数据爆炸的时代，我们的生活里充斥着各种各样的网盘服务，百度网盘、阿里云盘、腾讯微云等等，它们成了我们存储资料的得力助手。但随着网盘数量的增多，管理这些分散在不同平...
- 如何将数据从旧iPhone传输到新iPhone 16?这五个方法你必须知道!
-
前不久，苹果发布了备受期待的iPhone16系列，新机型搭载了更强大的芯片、更流畅的操作体验，还有备受热议的全新摄像系统。无论你是冲着A18仿生芯片，还是更丰富的动态岛功能，相信很多果粉早已跃跃欲试...
- 大数据传输的定义与大数据传输解决方案的选择
-
当我们需要处理大量的数据时，我们就要把数据从一个地方移动到另一个地方。这个过程就叫做大数据传输。它通常需要用到高速的网络连接、分散的存储系统和数据传输协议，以保证数据的快速、可靠和安全的移动。常用的大...
- 【工具】在线传输文件工具（在线文件互传）
-
前言在线传输文件工具主要是用于在不同的设备之间，如手机、电脑、平板等快速便捷地传送文件。告别使用USB传统传输文件的方式。...
- 如何使用 CAN-FD 在 LPC5500 上传输数据
-
目录1引言2CAN-FD3示例演示1引言...
- 轻松同步:将照片从三星手机传输到iPad的简便方法
-
概括想要在新iPad上查看三星照片吗？但是，如果您不知道如何将照片从三星手机传输到iPad，则无法在iPad上查看图片。为此，本文分享了7个有用的方法，以便您可以使用它们在不同操作系统之...
- 常见又地道的网络缩写:美剧中常说的SFW到底是个啥?
-
在这堂课中，让我们来学习更多在数字网络世界中常用的有趣网络用语。7shifts/unsplashhttp,https“http”和“https”是万维网（www）传输文件用的协议。“http”是hy...
- 每天学会一个计算机网络协议之FTP
-
开始行文之前提出一个问题，相信大家在看完本文后一定可以回答当我们在网站上填写注册信息的时候，需要我们上传照片，上传的过程发生了什么？下面引入我们的主角，FTP文件传输协议FTPFileTransf...
- 即用即走，这3款文件分享工具真香
-
打工人的日常，免不了「文件分享存储服务」的需求。我们一般会选择不同的网盘，但是大家也知道，网盘不是限速就是叫你充值。今天跟大家简单推荐3款文件分享工具，既可以免登录匿名使用，而且操作简单稳定性也不错。...
- 安卓手机里的文件和照片与Mac互传的办法
-
因为HandShake一段时间未更新，似乎目前不可操作。我一时间未找到更好的「传输」办法，经实践操作，向大家介绍一下「安卓手机」，包括「一加」、「索尼」，都可用此方法，来进行文件传输到Mac的...
- 软网推荐:同一个平台选择不同的传输方法
-
平时上网的时候，我们经常要分享一些文件给其他朋友，一般通过云服务平台来实现。今天笔者给大家介绍的Worksphere传输服务，它提供了两种不同的分享方式，方便我们根据实际需要进行选择。一个链接分享所有...
- 跨平台不限速的免费文件传输网站（跨平台不限速的免费文件传输网站是什么）
-
大家好，欢迎来到天天惠分享，不知道各位平时都是用什么方法来进行文件跨平台传输的呢？是百度网盘?微信还是QQ?亦或是有线传输。虽然这些方法都可以达到传输的目的，但都有各自的缺陷，使用起来一言难尽。比如百...
- 全网最全最详细的全平台文件传输方法，解决你文件传输问题(一)
-
前言想必现在大多数人文件传输的方法还是使用qq微信，但是qq微信的文件传输有时候真是，...
- 文件传输工具有哪些?这3款堪称办公必备!
-
在不同设备间，想把文件从一台设备传输到另一台，尤其是大体积文件，更是免不了用到文件传输工具，可以说文件传输工具已成为提升效率的关键载体。面对海量文档、设计素材、会议纪要的流转需求，传统邮件附件、U盘拷...
- 小白也能用的跨网文件交换系统!10款简单易上手的文件摆渡工具
-
跨网文件交换系统对于需要频繁在不同网络环境中进行文件共享的用户来说至关重要。以下是10款简单易上手的文件摆渡工具，适合小白用户使用，帮助他们高效地分享和传输文件。10款简单易上手的跨网文件交换工具1....
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- navicat无法连接mysql服务器 (65)
- 下横线怎么打 (71)
- flash插件怎么安装 (60)
- lol体验服怎么进 (66)
- ae插件怎么安装 (62)
- yum卸载 (75)
- .key文件 (63)
- cad一打开就致命错误是怎么回事 (61)
- rpm文件怎么安装 (66)
- linux取消挂载 (81)
- ie代理配置错误 (61)
- ajax error (67)
- centos7 重启网络 (67)
- centos6下载 (58)
- mysql 外网访问权限 (69)
- centos查看内核版本 (61)
- ps错误16 (66)
- nodejs读取json文件 (64)
- centos7 1810 (59)
- 加载com加载项时运行错误 (67)
- php打乱数组顺序 (68)
- cad安装失败怎么解决 (58)
- 因文件头错误而不能打开怎么解决 (68)
- js判断字符串为空 (62)
- centos查看端口 (64)