Fork me on GitHub

FastAPI配置系列(二) 静态文件配置

一、使用方式

如果使用前后台不分离的开发方式，那么模板文件中使用的静态文件，比如css/js等文件的目录需要在后台进行配置，以便模板渲染是能正确读到这些静态文件。

1、安装依赖

通过StaticFiles，使用一个目录自动为静态文件服务。需要先安装aiofiles，可以通过：

pip install aiofiles

2、使用StaticFiles

假设现在项目的目录是这样的：

│—main.py
│
├─static
│  │  bootstrap.css
│  │  bootstrap.js
│  │
│  └─fonts
│          glyphicons-halflings-regular.eot
│          glyphicons-halflings-regular.svg
│          glyphicons-halflings-regular.ttf
│          glyphicons-halflings-regular.woff
│          glyphicons-halflings-regular.woff2
│
└─templates
        home.html
  • main.py
from fastapi import FastAPI, Request
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates

app = FastAPI()

templates = Jinja2Templates(directory="./templates")

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

@app.get("/")
def home(request: Request):
    return templates.TemplateResponse(
        "home.html",
        {
            "request": request
        }
    )

通过mount将StaticFiles实例挂载到一个特定的路径上。其中StaticFile类中传递的directory参数是项目中静态文件的目录。

  • home.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静态文件测试</title>
    <link rel="stylesheet" href="{{ url_for('static',path='/bootstrap.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',path='/bootstrap.js') }}">
</head>
<body>
<div class="container">
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>

在模板文件中引入静态文件地址。

二、Mounting

"Mounting"意味着添加一个完全独立的应用在一个特定的路径上，然后负责处理所有的子路径。对于StaticFile类中的三个参数：

1、“/static”

所有子应用的子路径将会挂载到实例上。所以任何以“/static”开头的路径资源都可以访问到。在上面的应用中访问根目录，返回home.html页面，这个页面中访问的静态文件地址：

Request URL: http://127.0.0.1:8000/static/bootstrap.css
...

2、directory="./static"

表示的是应用的静态文件的实际目录。

3、name="static"

给一个名称，用于FastAPI内部调用，所以在home.html中可以使用如下url_for的调用方式引入静态文件：

<link rel="stylesheet" href="{{ url_for('static',path='/bootstrap.css') }}">

 

posted @ 2021-06-06 15:09  iveBoy  阅读(5516)  评论(0)  编辑  收藏  举报
TOP