【11天从零基础入门flask】第 4 章：静态文件

迪小莫学AI

于 2025-02-08 00:30:00 发布

阅读量803

点赞数 20

文章标签： flask python 后端

本文链接：https://blog.youkuaiyun.com/qq_17405059/article/details/145478366

版权

第 4 章：静态文件

4.1 静态文件介绍

静态文件（Static Files）是与 Web 应用程序的模板和逻辑无关的文件，通常是前端资源，如图像、CSS 样式表、JavaScript 脚本等。静态文件与动态内容不同，内容通常在服务器生成时已经固定，不需要根据用户请求动态变化。

在 Flask 中，我们需要将这些静态文件存储在名为 static 的文件夹中。Flask 会自动为这些静态文件生成 URL 路径，让我们能够在模板中轻松引用它们。

创建 static 文件夹：

首先，在项目根目录下创建一个 static 文件夹：

$ mkdir static

此时，你可以将所有静态资源（如图像、CSS、JavaScript 文件等）放入 static 文件夹中，Flask 会根据该文件夹自动生成相应的 URL。

4.2 生成静态文件 URL

在 Flask 中，访问静态文件的 URL 是通过 url_for() 函数动态生成的。这样做的好处是，Flask 会自动为文件生成正确的路径，并且当你移动文件时，不需要手动更新每个引用路径。

例如，如果你在 static 文件夹中放了一个 foo.jpg 图片，你可以在模板中使用以下代码来引用它：

<img src="{{ url_for('static', filename='foo.jpg') }}">

解释：

url_for('static', filename='foo.jpg')：这个函数会生成指向 foo.jpg 图片的 URL，Flask 会自动生成 /static/foo.jpg 这样的路径。

这种方式让你能够轻松地在模板中引用静态文件，而不需要担心文件路径的变化。

4.3 添加 Favicon

Favicon（收藏夹图标）是浏览器标签页上显示的小图标。你可以将一个图标放置在浏览器标签页中，帮助用户识别你的网站。为了在 Flask 应用中使用 Favicon，我们只需要将图标文件放置在 static 文件夹中，并在 HTML 模板的 <head> 标签中引用它。

步骤：

将 Favicon 图标（可以是 .ico、.png 或 .gif 格式）放入 static 文件夹。
在模板中通过 url_for() 引用图标文件：

<head>
    ...
    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
</head>

刷新页面后，你将能够看到浏览器标签页上显示你设置的 Favicon 图标。

4.4 添加图片

为了让我们的页面更具吸引力，我们可以添加一些图片。我们将添加两张图片：

一个头像图片，显示在页面的标题旁边。
一个动画图片，显示在页面底部的龙猫动图。

步骤：

在 static 文件夹中创建一个子文件夹 images，将图片放入该文件夹。

$ cd static
$ mkdir images

在模板中通过 url_for() 引用图片：

<h2>
    <img alt="Avatar" class="avatar" src="{{ url_for('static', filename='images/avatar.png') }}">
    {{ name }}'s Watchlist
</h2>
...
<img alt="Walking Totoro" class="totoro" src="{{ url_for('static', filename='images/totoro.gif') }}">

解释：

{{ url_for('static', filename='images/avatar.png') }}：动态生成头像图片的 URL。
{{ url_for('static', filename='images/totoro.gif') }}：动态生成龙猫动图的 URL。

这样就可以将图片插入到页面中。你可以使用任何你喜欢的图片，或从示例程序的 GitHub 仓库中下载这些图片。

4.5 添加 CSS

为了让页面看起来更美观，我们可以添加 CSS 来定义页面样式。我们将为页面创建一个 CSS 文件，并在模板中引入它。

步骤：

在 static 文件夹中创建一个 style.css 文件，并定义页面样式：

/* 页面整体 */
body {
    margin: auto;
    max-width: 580px;
    font-size: 14px;
    font-family: Helvetica, Arial, sans-serif;
}

/* 页脚 */
footer {
    color: #888;
    margin-top: 15px;
    text-align: center;
    padding: 10px;
}

/* 头像 */
.avatar {
    width: 40px;
}

/* 电影列表 */
.movie-list {
    list-style-type: none;
    padding: 0;
    margin-bottom: 10px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.movie-list li {
    padding: 12px 24px;
    border-bottom: 1px solid #ddd;
}

.movie-list li:last-child {
    border-bottom:none;
}

.movie-list li:hover {
    background-color: #f8f9fa;
}

/* 龙猫图片 */
.totoro {
    display: block;
    margin: 0 auto;
    height: 100px;
}

在模板中通过 url_for() 引入 CSS 文件：

<head>
    ...
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" type="text/css">
</head>

解释：

url_for('static', filename='style.css')：生成指向 style.css 文件的 URL。

注意：浏览器会缓存静态文件（如 CSS、JavaScript 等），如果你修改了 CSS 文件内容，可能需要清除浏览器缓存以查看更新。不同浏览器的清除缓存快捷键如下：

Google Chrome：Ctrl + F5（Windows/Linux）或 Command + Shift + R（Mac）
Firefox：Ctrl + F5（Windows/Linux）或 Command + Shift + R（Mac）
Safari：Command + Option + R（Mac）

4.6 本章小结

到目前为止，我们已经完成了主页的静态资源添加。通过使用 static 文件夹和 url_for() 函数，我们能够轻松地管理和引用静态文件，包括图像、CSS 和其他前端资源。这些静态文件使得页面更加美观和互动。

下一步：在接下来的章节中，我们将进一步扩展程序功能，学习如何与数据库交互并处理动态数据。

进阶提示

前端框架：如果你对 CSS 和布局感到困难，可以考虑使用一些前端框架如 Bootstrap、Semantic UI 或 Foundation，它们提供了丰富的 UI 元素和布局系统，能够帮助你快速构建响应式页面。
Flask 与 Bootstrap 集成：如果你计划使用 Bootstrap，可以安装 Flask-Bootstrap 扩展，它简化了在 Flask 应用中使用 Bootstrap 的步骤。你可以在 Flask 中轻松集成样式和组件。
动态生成静态文件：Flask 支持一些动态生成的静态文件（例如用户上传的文件）。你可以结合 Flask 的文件上传功能来动态处理用户提交的文件。