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

首先安装依赖

pip install aiofiles

我们看下如何使用

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

我们看下代码如何实现

1.创建两个目templates和static

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参数是项目中静态文件的目录。

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

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

文章首发在公众号,欢迎关注。

FastAPI 学习之路(三十八)Static Files的更多相关文章

  1. FastAPI 学习之路(十八)表单与文件

    系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...

  2. 学习之路三十八:Hook(钩子)的学习

    好久没写文章了,还记得年前面试了一家公司,为了检测一下我的学习能力,给了我一个任务,做一个自动登录并自动操作菜单的程序. 花了几天的时间研究了Hook以及使用WindowsAPI操作程序的知识,现在记 ...

  3. 学习之路三十九:新手学习 - Windows API

    来到了新公司,一开始就要做个程序去获取另外一个程序里的数据,哇,挑战性很大. 经过两周的学习,终于搞定,主要还是对Windows API有了更多的了解. 文中所有的消息常量,API,结构体都整理出来了 ...

  4. FastAPI 学习之路(十九)处理错误

    系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...

  5. FastAPI 学习之路(十二)接口几个额外信息和额外数据类型

    系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...

  6. FastAPI 学习之路(十四)响应模型

    系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...

  7. FastAPI 学习之路(十五)响应状态码

    系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...

  8. FastAPI 学习之路(十六)Form表单

    系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...

  9. FastAPI 学习之路(十)请求体的字段

    系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...

  10. Python小白学习之路(十八)—【内置函数三】

    一.对象操作 help() 功能:返回目标对象的帮助信息 举例: print(help(input)) #执行结果 Help on built-in function input in module ...

随机推荐

  1. 20210501 序列,熟练剖分(tree),建造游乐园(play)

    考场 \(65+5+0\),并列 rk2 最高分 \(55+10+10\) T1:等比数列可以写作 \(q^kx\),发现 \(q\le1000\) 且有一档分为 \(a_i\le100\),想到 \ ...

  2. freemodbus移植、实例及其测试方法

    Modbus简介 参考:Modbus​协议​深入​讲解 https://www.ni.com/zh-cn/innovations/white-papers/14/the-modbus-protocol ...

  3. Python - break、continue 的使用

    前置知识 break.continue 会结合循环使用的,所以要先学会循环哦 python 提供了两种循环语句 for 循环:https://www.cnblogs.com/poloyy/p/1508 ...

  4. Spring Boot中使用@Async的时候,千万别忘了线程池的配置!

    上一篇我们介绍了如何使用@Async注解来创建异步任务,我可以用这种方法来实现一些并发操作,以加速任务的执行效率.但是,如果只是如前文那样直接简单的创建来使用,可能还是会碰到一些问题.存在有什么问题呢 ...

  5. 5-7接口测试工具之jmeter的使用

    1.安装 免费的,安装jdk配好系统环境变量就能用了 2.jmeter测接口 获取用户信息,接口文档定义有2种请求方式 添加线程组-->添加http请求-->输入接口文档中说明的服务器名称 ...

  6. Ubuntu 引导修复

    Ubuntu 引导修复 前言 最近还在看 Docker 的教程,看到了"跨宿主机网络通信"的一节,于是想到去 Ubuntu 中 实践一番.结果发现 Ubuntu 进不去了.由于考虑 ...

  7. Anaconda配置国内镜像源

    1. 为conda配置(清华)镜像源 使用conda进行安装时,访问的是国外的网络,所以下载和安装包时会特别慢.我们需要更换到国内镜像源地址,这里我更换到国内的清华大学地址.(永久添加镜像) Wind ...

  8. RestFul的认识与详解

    RestFul :是一种软件架构风格,设计风格,而不是标准.提供了一组设计原则和约束条件. 简单概述: REST -- REpresentational State Transfer 直接翻译:表现层 ...

  9. springboot整合jsp报错

    今天在学springboot整合jsp时遇到了一个问题,虽然jsp不被spring官方推荐使用,但抱着学习的心态还是想解决一下这个问题.在写好了需要pom文件之后,访问网站得到了500的错误提示,后台 ...

  10. 学习PHP中的iconv扩展相关函数

    想必 iconv 这个扩展的相关函数大家多少都接触过,做为 PHP 的默认扩展它已经存在了很久,也是我们在操作字符编码时经常会使用的函数.不过除了 iconv() 这个函数外,你还知道它的其它函数吗? ...