前言

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

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

静态文件概念

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

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

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

绝对路径和相对路径

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

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

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

绝对路径

我们直接看下面的示例：

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

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

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

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

百度百科

相对路径

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

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

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

百度百科

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

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

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

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

flask加载静态文件

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

1. 创建 static 目录，images 目录

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

2. flask 中 url_for() 的使用

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

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

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

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

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

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

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

重点来看下，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   # 访问

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

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

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

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

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

添加我们的 HTML 代码：

                 
{{ username }}的公众号 - {{username}}杂谈
    

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

访问下页面：

看到页面成功显示图片，说明从项目路径而言，是没有问题的，资源成功被加载引入。

也许有人会想到一个问题，为什么模板里直接引用 flask 的函数？

在模板中可以直接使用，是因为 flask 在启动后，把一些常用的函数和对象添加到了模板上下文环境里。

上下文环境：在 web 项目中经常看到的一个词，大家可以将其理解为一个共享的大储水池，假设 A 管道想用 B 管道的东西，只需要把东西传入到蓄水池中，B 管道从中获取即可。

池中合成 B ，需要用到 A,C ，所以用蓄水池（上下文）传递。

在代码中，环境不同时，会遇到想用某个环境中的 A 变量，此时就可以通过上下文这样一个全局的中介进行获取。

总结

到这里，flask 的基础部分就介绍完了，是不是很简单呢？

来回顾一下大体框架：

1. 初识 flask ，快速搭建了一个最小的 web 应用
2. flask 整合模板，实现数据的动态化加载
3. flask 结合静态文件，实现相对路径的加载

web开发必备神器，微框架 - flask！你值得拥有~真香。。。

下篇文章介绍下，如何使用 Python 操作 MongoDB 数据库，敬请期待！

如果有什么问题，欢迎小伙伴们留言探讨！

推荐阅读：广西都市网