如果使用前后台不分离的开发方式，那么模板文件中使用的静态文件，比如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. JAVA 之 每日一记 之 算法 （ 长按键入 ）

    题目详解: 你的朋友正在使用键盘输入他的名字 name.偶尔,在键入字符 c 时,按键可能会被长按,而字符可能被输入 1 次或多次. 你将会检查键盘输入的字符 typed.如果它对应的可能是你的朋友的 ...

  2. Redis详解（二）——

    https://www.cnblogs.com/yeya/p/14274948.html https://www.cnblogs.com/liang24/tag/redis/

  3. 这篇 Java 基础，我吹不动了

    Hey guys,这里是程序员cxuan,欢迎你收看我最新一期的文章,这篇文章我补充了一些关于<Java基础核心总结>的内容,修改了部分错别字和语句不通顺的地方,并且对内部类.泛型等内容进 ...

  4. 【Git】给不同目录配置不同的用户名和邮箱

    场景 使用 git 时,对于公司项目和个人项目想用不同的用户名和邮箱提交,简单的解决方式就是对 git 仓库单独配置 user.name 和 user.email: 直接修改当前仓库的 .git/co ...

  5. request,response统一编码

    方法:统一使用编码(例如UTF-8编码)解决session或jsp等各种值传递时的中文乱码问题 request.setCharacterEncoding("UTF-8"); res ...

  6. PHP中非常好玩的Calendar扩展学习

    为什么说这个 Calendar 扩展很好玩呢?因为你基本用不到它!这个扩展是一套关于日期历法的扩展,但是对于我们来说,它没有农历的相关操作,所以对于我们中国人来说这个扩展并没有什么实际的作用.不过这并 ...

  7. 在PHP中如何为匿名函数指定this？

    在之前的文章中,我们已经学习过匿名函数的使用,没有看过的小伙伴可以进入传送门先去了解下闭包匿名函数的用法,传送:还不知道PHP有闭包?那你真OUT了. 关于闭包匿名函数,在JS中有个很典型的问题就是要 ...

  8. 修改MAC系统下默认PHP版本(解决自带版本和环境版本冲突)

    https://www.jianshu.com/p/d080d06557be 更改环境变量来修改默认的php版本 新建一个.bas_profile文件并编辑 vim ~/.bash_profile 然 ...

  9. openldap集成ssh 登录

    一 安装nslcd服务 yum install nss-pam-ldapd 二.修改vi /etc/nslcd.conf这个配置文件 修改uri 和base的值 改为你的ldap的地址和用户名 三.  ...

  10. Centos7.6安装python3.6.8

    yum -y install bzip2-devel expat-devel gdbm-devel readline-devel sqlite-devel libffi-devel tk-devel ...