FastAPI 学习之路（三十八）Static Files
如果使用前后台不分离的开发方式，那么模板文件中使用的静态文件，比如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的更多相关文章
- FastAPI 学习之路（十八）表单与文件
系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...
- 学习之路三十八：Hook(钩子)的学习
好久没写文章了,还记得年前面试了一家公司,为了检测一下我的学习能力,给了我一个任务,做一个自动登录并自动操作菜单的程序. 花了几天的时间研究了Hook以及使用WindowsAPI操作程序的知识,现在记 ...
- 学习之路三十九：新手学习 - Windows API
来到了新公司,一开始就要做个程序去获取另外一个程序里的数据,哇,挑战性很大. 经过两周的学习,终于搞定,主要还是对Windows API有了更多的了解. 文中所有的消息常量,API,结构体都整理出来了 ...
- FastAPI 学习之路（十九）处理错误
系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...
- FastAPI 学习之路（十二）接口几个额外信息和额外数据类型
系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...
- FastAPI 学习之路（十四）响应模型
系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...
- FastAPI 学习之路（十五）响应状态码
系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...
- FastAPI 学习之路（十六）Form表单
系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...
- FastAPI 学习之路（十）请求体的字段
系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...
- Python小白学习之路（十八）—【内置函数三】
一.对象操作 help() 功能:返回目标对象的帮助信息 举例: print(help(input)) #执行结果 Help on built-in function input in module ...
随机推荐
- vue 手机号码隐藏中间
template {{ phone | mobileFilter }} data export default { filters:{ mobileFilter(val){ ...
- 一、Git分布式版本控制系统
1.引入 在开发一个软件项目时,本地只有几十行代码或几百行代码时还可以维护,但当代码达到一定的数量后或两三个人共同开发一个项目时,就很容易会出现代码混乱.冲突.排错难等问题.一旦开发完工以后发现整个项 ...
- Kubernetes-kubectl介绍
前言 本篇是Kubernetes第三篇,大家一定要把环境搭建起来,看是解决不了问题的,必须实战.本篇重要介绍kubectl的使用. Kubernetes系列文章: Kubernetes介绍 Kuber ...
- aes加解密前后端-前端
一.ajax请求前端 f12请求和响应参数效果: 1.在前端封装ajax的公共Util的js中,封装ajax请求的地方,在beforeSend方法和成功之后的回调函数success方法中: var p ...
- kubectl工具的windows\linux安装方法
kubectl 安装 下载kubectl二进制文件 curl -LO https://storage.googleapis.com/kubernetes-release/release/v1.10.0 ...
- scrum项目冲刺_day11 第一阶段总结
"智能垃圾分类APP"第一阶段总结 总任务: 一.appUI页面(已完成) 二.首页功能: 1.图像识别功能(已完成) 2.语音识别功能(已完成) 3.垃圾搜索功能(基本完成) 4 ...
- C++ windows 函数讲解（一）获得屏幕分辨率
先上代码: #include<bits/stdc++.h> #include<windows.h> using namespace std; int main() { int ...
- Consul+Ocelot+Polly在.NetCore中使用(.NET5)-网关Ocelot+Consul
相关文章 Consul+Ocelot+Polly在.NetCore中使用(.NET5)-Consul服务注册,服务发现 Consul+Ocelot+Polly在.NetCore中使用(.NET5)-网 ...
- 链式调用+对象属性与遍历+this指向+caller/callee
之前的作业: 提示: 在开发的时候尽量在函数内部将作用都给调用好,在外部就能够直接使用 链式调用: 正常这样是不行的,因为没有具体返回值: return 具体的对象,这样的才是链式操作,jquery ...
- LR11自带网站
LR自带的飞机订票系统 启动服务:安装路径\HP\LoadRunner\WebTours下的StartServer.bat 打开网页:地址 http://127.0.0.1:1080/WebTour ...