一、使用方式
如果使用前后台不分离的开发方式，那么模板文件中使用的静态文件，比如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') }}">