flask入门（三）静态文件

原创

咪哥杂谈 2023-01-11 00:41:41 ©著作权

文章标签 flask python 静态文件相对路径 文章分类 运维

©著作权归作者所有：来自51CTO博客作者咪哥杂谈的原创作品，请联系作者获取转载授权，否则将追究法律责任

flask入门（三）静态文件

前言

上篇文章讲到 flask 的模板文件如何使用，印象模糊的朋友可以回顾一下flask入门（二）（不用写代码的前端！）

今天的主题 - flask 和静态文件结合的使用技巧。

静态文件概念

先来简单的介绍下，静态文件是什么？

静态文件（static files），在通常的 web 项目下，指的是内容不需要动态生成的文件。比如图片、CSS 文件和 JavaScript 脚本等。

就像下面通过 F12 审查元素时的图片，点击资源下，就可以看到服务器提供的一些静态文件。

flask入门（三）静态文件_flask

flask入门（三）静态文件_静态文件_02

绝对路径和相对路径

计算机中常会说到的文件路径概念，绝对路径和相对路径。有人可能会有疑问，为什么突然要讲这个概念？

实际上，在 web 项目中，加载静态文件的路径书写，对于新手朋友们来说一直是一个头疼的问题，当初我就是这么过来的，毕业设计的时候自己写网页，本地测试的好好的，加载图片和样式等没问题，但是一上传到服务器上，立马就加载不出来了。

所以，在说明静态文件和 flask 结合使用之前，先把路径的概念弄明白，就会明白在 flask 框架中，为什么要使用这样那样的方法了。

绝对路径

我们直接看下面的示例：

现在我电脑上有个文件夹，其中有一些照片，假设现在 horse 这个照片：

flask入门（三）静态文件_python_03

那么此张照片的绝对路径即：

/Users/sy/Desktop/make-money/picture/horse.png

完整的描述文件位置的路径就是绝对路径，以web站点根目录为参考基础的目录路径。绝对路径名的指定是从树型目录结构顶部的根目录开始到某个目录或文件的路径，由一系列连续的目录组成，中间用斜线分隔，直到要指定的目录或文件，路径中的最后一个名称即为要指向的目录或文件。
百度百科

相对路径

还是以 horse.png 为例，如果同在一个 picture 目录下，此时如果有个 .py 的脚本。如果想直接读取到 png 文件，则不需要进行绝对路径的编写，直接写 horse.png 的名称即可读取到。

因为 horse 与 get-pic 是相对的，即相对路径。

flask入门（三）静态文件_python_04

相对路径就是指由这个文件所在的路径引起的跟其它文件（或文件夹）的路径关系。使用相对路径可以为我们带来非常多的便利。HTML绝对路径(absolute path)指带域名的文件的完整路径。
百度百科

相对路径的好处是什么呢？对于服务端开发来说，相对路径可以理解为灵活。它是找一个参照物而设定自己的路径的。

假如一个静态文件写在程序中，如果有一天项目的名字换了，或者换了个位置，那你还需要自己去修改静态文件中的路径，否则静态文件将会加载不出来。

而此时若是用相对路径就没有这样的问题了，相对路径一般在 web 项目中依赖于项目本身的根目录。

PS：根目录，一般默认项目名称文件夹下的目录。比如这次的项目，我建立个叫 traffic 的文件夹，那么 traffic 这层的文件目录即为根目录。

flask加载静态文件

上面说的基础概念，如果你明白以后，接下来咱们看下，如何将 flask 与静态文件联系起来。

1. 创建 static 目录，images 目录

flask入门（三）静态文件_python_05

创建完毕后，我们将 js、css、图片等资源放到 static 目录下。这里以图片为例，让我们的页面直接加载处于本地的图片。所以在 images 文件夹下放一张图片，在 static 下放一张网站图标的图片。

flask入门（三）静态文件_python_06

2. flask 中 url_for() 的使用

url_for() 是 flask 框架提供的一个函数，第一个参数可以传入作为代表某个路由的端点（endpoint），它最主要的作用是用来生成 URL，避免了开发者手写 URL 的情况。

使用 url_for() 生成的 url 即相对路径，有些开发者喜欢用绝对路径来进行文件的路径定义。（这样是极其不友好的，不灵活！）

这么说可能大家还是觉得抽象，下面用个小 demo 来演示下:

@app.route('/user/<username>')
def user_info(username):
    return f'地址上传入的用户名称: {username} ！~'

flask入门（三）静态文件_python_07

在 Python 脚本里，url_for()函数需要从 flask包中导入，这次的代码中多了两个函数，一个是 user_info ，一个是 test_url_for。

user_info中使用了，当我们访问这个地址时，需要手动的传入一个参数。例如这样：

http://localhost:8080/user/mige  #访问

flask入门（三）静态文件_静态文件_08

重点来看下，test_url_for 函数。

@app.route('/test')
def test_url_for():
    print(url_for('hello_world'))  # 输出：/
    print(url_for('user_info', username='mige'))  # 输出：/user/mige
    print(url_for('user_info', username='zatan'))  # 输出：/user/zatan
    print(url_for('test_url_for'))  # 输出：/test
    # 下面这个调用传入了多余的关键字参数，它们会被作为查询字符串附加到 URL 后面。
    print(url_for('test_url_for', num=4 ** 2))  # 输出：/test?num=16
    return 'Test page'

它的路由给的是 /test，所以我们来访问下这个地址，看下控制台中会打印出什么？

http://localhost:8080/test   # 访问

flask入门（三）静态文件_相对路径_09

url_for函数中，第一个参数便是端点。可以观察到，在 python 文件中便是带有 @app.route 装饰的函数名称。而第二个参数比较灵活，根据不同场景传入不同参数。

就控制台打印而言，可以看到路径输出是相对路径，这样一来使用此函数便可以在路径上相对灵活了。

3. 使用 url_for 来加载静态文件

在了解到上述概念后，开始使用函数来整合我们的静态文件。

对于静态文件，需要传入的端点值是 static (我们创建的文件夹名字)，同时使用 filename 参数来传入相对于 static 文件夹的文件路径。

添加我们的 HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交通统计</title>
     <link rel="icon" href="{{ url_for('static', filename='traffic.ico') }}">
</head>
<body>
    <h1>{{ username }}的公众号 - {{username}}杂谈</h1>
    <img alt="slime" src="{{ url_for('static', filename='images/002.png') }}">
</body>
</html>

相比上篇文章，多了 link 和 img 这两个标签。同时注意，在引用图片路径时，使用的是 {{url_for}} 的形式，而不是绝对路径。

访问下页面：

flask入门（三）静态文件_静态文件_10