FastAPI 学习之路(三十八)Static Files

简介: FastAPI 学习之路(三十八)Static Files

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


   首先安装依赖


pip install aiofiles


我们看下如何使用


     我们去定义一个页面,展示我们对应的一张图片。

   我们看下代码如何实现


 1.创建两个目templates和static


image.png


   2.分别去放置一个文件test.png和home.html


   home.html代码如下


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="{{ url_for('static',path='/test.png') }}" style="width: 100px;height: 100px">
</body>
</html>


  3. 我们看下如何在fastapi中使用


from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates
from fastapi import FastAPI, Request
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参数是项目中静态文件的目录。


   然后我们启动下。访问下看看效果


image.png


我们已经实现我们设计的效果,很简单。

相关文章
|
NoSQL Redis 数据库
FastAPI(六十七)实战开发《在线课程学习系统》接口开发--用户登陆接口开发
FastAPI(六十七)实战开发《在线课程学习系统》接口开发--用户登陆接口开发
|
NoSQL 测试技术 Redis
FastAPI(八十四)实战开发《在线课程学习系统》--接口测试(下)
FastAPI(八十四)实战开发《在线课程学习系统》--接口测试(下)
FastAPI(八十四)实战开发《在线课程学习系统》--接口测试(下)
|
存储 测试技术 数据安全/隐私保护
FastAPI(八十三)实战开发《在线课程学习系统》--注册接口单元测试
FastAPI(八十三)实战开发《在线课程学习系统》--注册接口单元测试
FastAPI(八十三)实战开发《在线课程学习系统》--注册接口单元测试
FastAPI(42)- Static Files 静态资源
FastAPI(42)- Static Files 静态资源
483 0
|
测试技术 数据安全/隐私保护
FastAPI(八十四)实战开发《在线课程学习系统》--接口测试(上)
FastAPI(八十四)实战开发《在线课程学习系统》--接口测试(上)
FastAPI(八十二)实战开发《在线课程学习系统》接口开发-- 课程上架下架
FastAPI(八十二)实战开发《在线课程学习系统》接口开发-- 课程上架下架
|
NoSQL Redis 数据库
FastAPI(八十一)实战开发《在线课程学习系统》接口开发-- 推荐课程列表与课程点赞
FastAPI(八十一)实战开发《在线课程学习系统》接口开发-- 推荐课程列表与课程点赞
FastAPI(八十)实战开发《在线课程学习系统》接口开发-- 课程列表
FastAPI(八十)实战开发《在线课程学习系统》接口开发-- 课程列表
FastAPI(七十九)实战开发《在线课程学习系统》接口开发-- 加入课程和退出课程
FastAPI(七十九)实战开发《在线课程学习系统》接口开发-- 加入课程和退出课程
FastAPI(七十八)实战开发《在线课程学习系统》接口开发-- 评论
FastAPI(七十八)实战开发《在线课程学习系统》接口开发-- 评论