如果使用前后台不分离的开发方式,那么模板文件中使用的静态文件,比如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. openresty 自动 deploy github repository

    配置 deploy key 配置 webhooks https://gist.github.com/hangj/ce6aabac77e96b010e3b361e18422013

  2. ubuntu18.04 更换镜像源

    废话不多说,直接上图了 1. 首先选software & update 2. 点这个,然后选择others,选择China 建议选择清华源,不建议选择mirrors.aliyun.com,因为 ...

  3. Django项目中的模板继承

    1. 定义一个基础的页面HTML文件base.html <!DOCTYPE html> <html lang="en"> <head> < ...

  4. iMX6UL配置MCP2515模块(SPI转CAN)——基于迅为iTOP-iMX6UL开发板

    写在前面   在文章"嵌入式Linux的CAN总线配置--基于迅为iTOP-4412开发板"中我给4412开发板配置了SPI转CAN模块,使用的是不带设备树的内核.在本篇文章中,要 ...

  5. docker日常使用指南

    docker日常使用指南 目录 docker日常使用指南 前言 1.基础知识 1.1 docker是什么 1.2 与虚拟机(VM)的区别 1.3 镜像与容器 2.安装 2.1 在线安装 2.2 离线安 ...

  6. Jenkins持续集成接口压测

    步骤 自动化压测- jmeter + shell Jenkins与jmeter压测,环境要求 自动压测运行逻辑 Jmeter输出压力测试报告 压测报告与Jenkins集成 Jenkins任务:源码同步 ...

  7. IPSec协议框架

    文章目录 1. IPSec简介 1.1 起源 1.2 定义 1.3 受益 2. IPSec原理描述 2.1 IPSec协议框架 2.1.1 安全联盟 2.1.2 安全协议 报文头结构 2.1.3 封装 ...

  8. Jsoup快速查询

    一.selector选择器 二.Xpath查询

  9. XXE从0到1

    XXE从0到1 1. XXE概述 XXE(XML External Entity Injection)即XML外部实体注入.漏洞是在对不安全的外部实体数据进行处理时引发的安全问题. 下面我们主要介绍P ...

  10. Linux内核下包过滤框架——iptables&netfilter

    iptables & netfilter 1.简介 netfilter/iptables(下文中简称为iptables)组成Linux内核下的包过滤防火墙,完成封包过滤.封包重定向和网络地址转 ...