2.5 静态文件

在Flask Web程序中也可以使用静态文件，例如在使用PyCharm创建Flask项目后，通常会自动创建一个static目录，这个目录便是静态目录，通常在里面保存图片、JS脚本文件和标签等素材文件。在本节的内容中，将详细讲解在Flask Web程序中使用静态文件的知识。

2.5.1 静态文件介绍

在Web应用程序中经常用到静态文件，例如JavaScript文件或支持网页显示的CSS文件。为了便于系统维护，通常将这些文件集中保存到一个文件夹中进行管理。在Flask Web程序中，通常将静态文件保存到static目录中，此时对静态文件的引用被当成一个特殊的路由，即/static/<filename>。请看下面的演示代码。

上述代码设置调用的静态文件地址如下所示。

在默认情况下，Flask会定位到Web程序的根目录中名为static的子目录，然后在static目录中寻找静态文件。如果Web程序非常大，可以继续在static中创建多个不同含义的子目录，然后在子目录中保存不同静态文件。

2.5.2 使用静态文件

例如在模板文件templates/base.html中，将一个图片作为系统的图标，图标文件img1.ico保存在静态文件目录static中，这个图标文件img1.ico会显示在浏览器的地址栏中。文件base.html的具体实现代码如下所示。

通过上述代码可知，通常将图标的声明代码放到head块的末尾。

请读者看下面的实例，演示了在Flask Web程序中使用静态脚本文件的过程。

源码路径：daima\2\2-5\jingtai\

1）编写Flask文件jing.py，设置程序运行后加载执行模板文件default.html。文件jing.py的具体实现代码如下所示。

2）在文件夹templates中新建模板文件index.html，设置一个HTML按钮的OnClick事件，单击按钮后通过方法url_for()设置调用文件hello.js中定义的JavaScript函数。文件index.html的具体实现代码如下所示。

3）文件hello.js保存在静态文件目录static中，功能是通过函数sayHello()显示一个提醒框效果。文件hello.js的具体实现代码如下所示。

运行文件jing.py，在浏览器中输入“http://127.0.0.1:5000/”后会加载显示模板文件index.html，执行效果如图2-8所示。单击按钮“点击我啊”后会显示一个提醒框，如图2-9所示。