Fastapi 简明教程

FastAPI - Static Files

通常，需要在模板响应中包括一些资源，即便存在某些动态数据，这些资源也不会发生改变。此类资源称为静态资源。媒体文件（.png、.jpg 等）、用于运行某种前端代码的 JavaScript 文件或用于设置 HTML 格式的样式表（.CSS 文件）都是静态文件示例。

为了处理静态文件，你需要一个名为 aiofiles 的库

pip3 install aiofiles

接下来，从 fastapi.staticfiles 模块中导入 StaticFiles 类。它的对象是 FastAPI 应用程序对象 mount() 方法的参数之一，用于将当前应用程序文件夹中的 "static" 子文件夹指定为存储和提供应用程序的所有静态资源。

app.mount(app.mount("/static", StaticFiles(directory="static"), name="static")

Example

在以下示例中，FastAPI 徽标准备在 hello.html 模板中呈现。因此，“fa-logo.png” 文件首先放在 static 文件夹中。现在，可以将其用作 HTML 代码中 <img> 标签的 src 属性。

from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates
from fastapi.staticfiles import StaticFiles
app = FastAPI()
templates = Jinja2Templates(directory="templates")
app.mount("/static", StaticFiles(directory="static"), name="static")
@app.get("/hello/{name}", response_class=HTMLResponse)
async def hello(request: Request, name:str):
   return templates.TemplateResponse("hello.html", {"request": request, "name":name})

\templates\hello.html 的 HTML 代码如下 −

<html>
   <body>
      <h2>Hello {{name}} Welcome to FastAPI</h2>
      <img src="{{ url_for('static', path='fa-logo.png') }}" alt="" width="300">
   </body>
</html>
</pre>

运行 Uvicorn 服务器并访问 URL 如 [role="bare"] [role="bare"]http://localhost/hello/Vijay 。徽标显示在浏览器窗口中，如图所示。

static1

Example

以下是有关静态文件的另一个示例。JavaScript 代码 hello.js 包含一个 myfunction() 定义，将在以下 HTML 脚本 (\templates\hello.html) 中的 onload 事件中执行

<html>
   <head>
      <title>My Website</title>
      <script src="{{ url_for('static', path='hello.js') }}"></script>
   </head>
   <body onload="myFunction()">
      <div id="time" style="text-align:right; width="100%"></div>
      <h1><div id="ttl">{{ name }}</div></h1>
   </body>
</html>

hello.js 代码如下 − (\static\hello.js)

function myFunction() {
   var today = new Date();
   var h = today.getHours();
   var m = today.getMinutes();
   var s = today.getSeconds();
   var msg="";
   if (h<12) {
      msg="Good Morning, ";
   }
   if (h>=12 && h<18) {
      msg="Good Afternoon, ";
   }
   if (h>=18) {
      msg="Good Evening, ";
   }
   var x=document.getElementById('ttl').innerHTML;
   document.getElementById('ttl').innerHTML = msg+x;
   document.getElementById('time').innerHTML = h + ":" + m + ":" + s;
}

该函数检测当前时间的值，并根据一天中的时间为 msg 变量分配适当的值（早上好、下午好或晚上好）。

保存 /static/hello.js ，修改 \templates\hello.html 并重新启动服务器。浏览器应显示它下面的当前时间和相应的消息。

static2
static3