如果使用前后台不分离的开发方式,那么模板文件中使用的静态文件,比如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. vue 导出excel后端返回乱码下载不了的解析问题

    有俩种方法可以用 第一种方法: 解析:直接解析并且下载后端的乱码  this.download('后端给的导出excel的方法', {        ...this.queryParams  }, ` ...

  2. Python之requests模块-request api

    requests所有功能都能通过"requests/api.py"中的方法访问.它们分别是: requests.request(method, url, **kwargs) req ...

  3. SpringBoot整合定时任务----Scheduled注解实现(一个注解全解决)

    一.使用场景 定时任务在开发中还是比较常见的,比如:定时发送邮件,定时发送信息,定时更新资源,定时更新数据等等... 二.准备工作 在Spring Boot程序中不需要引入其他Maven依赖 (因为s ...

  4. 【SpringMVC】HttpMessageConverter报文信息转换器

    HttpMessageConverter HttpMessageConverter,报文信息转换器,将请求报文转换为Java对象,或将Java对象转换为响应报文 HttpMessageConverte ...

  5. 机械硬盘换到SSD后系统引导报错代码0xc000000e

    由于机械硬盘IO不够用,系统使用起来非常的缓慢,特意购买了新的SSD进行了替换.机械硬盘的IO在70左右,SSD的IO在1000-4000左右指普通消费SSD. 由于不想安装系统,就直接把机械硬盘的数 ...

  6. (4)ElasticSearch在linux环境中搭建集群

    1.概述 一个运行中的Elasticsearch实例称为一个节点(node),而集群是由一个或者多个拥有相同cluster.name配置的节点组成,它们共同承担数据和负载的压力.当有节点加入集群中或者 ...

  7. 多Host情况下IDEA无法启动Tomcat的问题

    学习Java Web,学到将WAR包部署到Tomcat中时,遇到一个问题. 部署WAR包的过程本身没什么问题,把.war文件放在<Tomcat安装目录>/webapps/中,然后修改< ...

  8. Fastjson反序列化漏洞基础

    Fastjson反序列化漏洞基础 FastJson是alibaba的一款开源JSON解析库,可用于将Java对象转换为其JSON表示形式,也可以用于将JSON字符串转换为等效的Java对象. 0x0 ...

  9. python动态网站爬虫实战(requests+xpath+demjson+redis)

    目录 前言 一.主要思路 1.观察网站 2.编写爬虫代码 二.爬虫实战 1.登陆获取cookie 2.请求资源列表页面,定位获得左侧目录每一章的跳转url(难点) 3.请求每个跳转url,定位右侧下载 ...

  10. PHP的那些魔术方法(一)

    在PHP中,有一堆魔术方法,服务于类和对象.PHP虽然也是纯种的面向对象语言,但是之前的PHP还真不是,所以有一些面向对象的标准实现并不完善,比如重载.但是,我们可以通过一些魔术方法来弥补,例如__c ...