Python Flask完整指南：快速构建Web应用的实用教程

2 年 ago
清, 宇
13 minutes

引言

Flask是一个小巧且轻量级的Python Web框架，提供了一些有用的工具和功能，使得使用Python创建Web应用更加容易。它给开发者提供了灵活性，对于新手开发者来说是一个更易上手的框架，因为你可以仅仅使用一个Python文件快速构建Web应用。Flask也支持扩展，并且在开始之前不会强制指定特定的目录结构或要求复杂的样板代码。

作为本教程的一部分，您将使用Bootstrap工具包来为应用程序添加样式，使其在视觉上更具吸引力。Bootstrap将帮助您将响应式网页整合到您的网络应用程序中，而无需编写自己的HTML、CSS和JavaScript代码来实现这些目标。该工具包将让您专注于学习Flask的工作原理。

Flask使用Jinja模板引擎来动态构建HTML页面，使用Python中常见的概念，比如变量、循环、列表等等。在这个项目中，你将会使用这些模板。

在这个教程中，您将使用Python 3中的Flask和SQLite构建一个小型的网页博客。应用程序的用户可以查看数据库中的所有帖子，并点击帖子的标题来查看其内容。用户还可以添加一篇新帖子到数据库中，并编辑或删除现有的帖子。

信息

通过Silicon Cloud App平台简化部署Flask应用程序。仅需几分钟，即可从GitHub直接部署Flask。

先决条件

在您开始按照本指南操作之前，您需要准备以下物品：

  • 一个本地Python 3编程环境，请按照《如何安装和设置Python 3本地编程环境》系列教程中针对您发行版的说明进行操作。在本教程中，我们将我们的项目目录称为flask_blog。
  • 对Python 3概念的理解，例如数据类型、条件语句、for循环、函数等概念。如果您不熟悉Python，请查看我们的《Python 3编程指南》系列。

第一步 — 安装Flask

在这一步中，您将激活您的Python环境并使用pip软件包安装器安装Flask。

如果您还没有激活编程环境，请确保您已经在项目目录（flask_blog）中，并使用以下命令激活环境：

  1. source env/bin/activate

一旦您的编程环境被激活，您的提示符将会带有一个环境前缀，可能会显示如下：

  1.

这个前缀是指环境”env”当前处于活动状态，具体名称可能因其在创建时的命名方式而异。

注意

您可以使用Git，一个版本控制系统，有效地管理和跟踪您的项目的开发过程。要了解如何使用Git，您可以查看我们的《Git安装使用和分支简介》文章。
如果您正在使用Git，建议在.gitignore文件中忽略新创建的env目录，以避免跟踪与项目无关的文件。

现在你将安装Python包并将项目代码与主要的Python系统安装隔离开来。你将使用pip和python来完成这个操作。

要安装Flask，执行以下命令：

  1. pip install flask

安装完成后，请运行以下命令来确认安装。

  1. python -c "import flask; print(flask.__version__)"

你可以使用Python命令行界面，并带上选项-c来执行Python代码。接着，使用import flask导入flask包；然后通过flask.__version__变量打印Flask的版本。

输出将是类似以下版本号的格式：

输出
1.1.2

你已经创建了项目文件夹、虚拟环境并安装了Flask。现在你可以开始设置你的基础应用了。

第二步 – 创建一个基础应用程序

现在你已经设置好了编程环境，接下来你将开始使用Flask。在这一步中，你将在一个Python文件中创建一个小型的Web应用程序，并运行它来启动服务器，服务器将在浏览器上显示一些信息。

在你的flask_blog目录中，打开一个名为hello.py的文件进行编辑，可以使用nano或你喜欢的文本编辑器。

  1. nano hello.py

这个 hello.py 文件将作为处理 HTTP 请求的最简单示例。在它内部，你将会导入 Flask 对象，并创建一个返回 HTTP 响应的函数。在 hello.py 中编写以下代码。

flask_blog/hello.py

from flask import Flask

app = Flask(__name__)


@app.route('/')
def hello():
    return '你好，世界！'

在前面的代码块中，你首先从flask包中导入Flask对象。然后，你使用它来创建一个名为app的Flask应用程序实例。你传递了一个特殊的变量__name__，它保存着当前Python模块的名称。这用于告诉实例它所在的位置，因为Flask在幕后设置了一些路径，你需要这个信息。

创建应用实例后，您可以使用它来处理传入的网络请求并向用户发送响应。@app.route是一个装饰器，它将普通的Python函数转换为Flask视图函数，将函数的返回值转换为HTTP响应，以便由HTTP客户端（例如Web浏览器）显示。您将值’/’传递给@app.route()，表示此函数将响应URL为/的网络请求，即主URL。

hello()视图函数作为响应返回字符串”你好，世界！”

保存并关闭文件。

为了运行您的网络应用程序，您首先需要告诉Flask应用程序在哪里找到（在您的情况下是hello.py文件），使用FLASK_APP环境变量。

  1. export FLASK_APP=hello

然后在开发模式下运行，使用FLASK_ENV环境变量。

  1. export FLASK_ENV=development

最后，使用flask run命令运行应用程序。

  1. flask run

一旦应用程序运行，输出会是这样的：

输出

 * Serving Flask app "hello" (lazy loading)
 * Environment: development
 * Debug mode: on
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

输出* Serving Flask app "hello" (lazy loading)
 * Environment: development
 * Debug mode: on
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 813-894-335

前面的输出包含了几个信息，比如：

  • 您正在运行的应用程序名称。
  • 应用程序正在运行的环境。
  • 调试模式：开启表示Flask调试器正在运行。这在开发过程中非常有用，因为当出现问题时，它会提供详细的错误信息，使故障排除更加容易。
  • 应用程序在本地URL http://127.0.0.1:5000/ 上运行，其中127.0.0.1 是代表您本地主机的IP地址，而:5000 是端口号。

在浏览器中打开并输入网址http://127.0.0.1:5000/，你将收到字符串”Hello, World!”作为响应，这表明你的应用程序成功运行。

警告

警告：Flask在开发环境中使用一个简单的Web服务器来提供我们的应用程序，这也意味着Flask调试器正在运行以便更容易地捕获错误。这个开发服务器不应该在生产部署中使用。请参阅Flask文档中的部署选项页面，了解更多信息，你也可以查看这个Flask部署教程。

你现在可以将开发服务器保持在终端中运行，并打开另一个终端窗口。进入存放hello.py的项目文件夹，激活虚拟环境，设置环境变量FLASK_ENV和FLASK_APP，然后继续进行下一步。（这些命令在此步骤中已经列出。）

注意

注意：当打开一个新的终端时，重要的是要记住激活虚拟环境并设置环境变量FLASK_ENV和FLASK_APP。

当一个Flask应用的开发服务器正在运行时，不可能使用相同的flask run命令运行另一个Flask应用。这是因为flask run默认使用端口号5000，一旦被占用，就不能再运行另一个应用，否则会收到类似以下错误的提示：

输出OSError: [Errno 98] Address already in use

为了解决这个问题，可以通过按下CTRL+C停止当前运行的服务器，然后再次运行flask run；或者如果想同时运行两者，可以将一个不同的端口号传递给-p参数，例如，要在端口号5001上运行另一个应用，请使用以下命令：

flask run -p 5001

你现在有一个小的Flask Web应用程序。你已经运行了应用程序并在Web浏览器上显示了信息。接下来，你将在应用程序中使用HTML文件。

步骤3 — 使用HTML模板

目前您的应用程序只显示一个简单的消息，没有任何HTML。Web应用程序主要使用HTML来显示访问者的信息，因此您现在需要在应用程序中添加HTML文件，以便在Web浏览器上显示。

Flask提供了一个render_template()的辅助函数，它允许使用Jinja模板引擎。通过在.html文件中编写HTML代码并在HTML代码中使用逻辑，可以更轻松地管理HTML。您将使用这些HTML文件模板来构建应用程序的所有页面，例如显示当前博客文章的主页，博客文章页面，用户可以添加新文章的页面等等。

在这一步中，你将在一个新文件中创建你的主要 Flask 应用程序。

首先，在你的flask_blog目录中，使用nano或你喜欢的编辑器创建并编辑app.py文件。这个文件将保存你用于创建博客应用程序的所有代码。

  1. nano app.py

在这个新的文件中，你将导入 Flask 对象以创建一个 Flask 应用实例，就像之前做过的一样。你还将导入 render_template() 辅助函数，这个函数可以让你渲染存在于即将创建的模板文件夹中的 HTML 模板文件。文件将包含一个单一的视图函数，负责处理对主要的 / 路由的请求。添加以下内容：

flask_blog/app.py
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

index()视图函数返回调用render_template（）函数并将index.html作为参数的结果，这会告诉render_template（）在templates文件夹中查找名为index.html的文件。然而，现在这个文件夹和文件都不存在，如果你在这一点上运行应用程序，你将会得到一个错误。尽管如此，你仍然会运行它，以便熟悉这个常见的异常情况。然后，你会通过创建所需的文件夹和文件来解决这个问题。

保存并退出文件。

在运行 Hello 应用程序的另一个终端中，使用 CTRL+C 停止开发服务器。

在运行应用程序之前，请确保正确指定FLASK_APP环境变量的值，因为您不再使用应用程序hello。

  1. export FLASK_APP=app
  2. flask run

在浏览器中打开URL http://127.0.0.1:5000/，将会显示调试器页面，并告知你未找到index.html模板。代码中引起该错误的主要行将被突出显示，本例中是return render_template(‘index.html’)这一行。

如果您点击这一行，调试器将会显示更多的代码，这样您就能获得更多的上下文来帮助您解决问题。

Flask调试器

要修复这个错误，在你的flask_blog目录下创建一个名为templates的文件夹。然后在其中打开一个名为index.html的文件进行编辑。

  1. mkdir templates
  2. nano templates/index.html

接下来，在index.html文件中添加以下HTML代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Flask博客</title>
</head>
<body>
   <h1>欢迎来到Flask博客</h1>
</body>
</html>

保存文件并使用浏览器导航到 http://127.0.0.1:5000/，或刷新页面。此时浏览器应该在一个<h1>标签中显示文字”欢迎来到Flask博客”。

除了模板文件夹，Flask Web应用通常还有一个用于托管静态文件的静态文件夹，例如CSS文件、JavaScript文件和应用程序使用的图片。

你可以创建一个style.css样式表文件来为你的应用添加CSS样式。首先，在你的主flask_blog目录中创建一个名为static的文件夹。

  1. mkdir static

然后在static目录中创建一个名为css的文件夹来存放.css文件。通常会这样做来将静态文件组织到专用的文件夹中，因此JavaScript文件通常存放在一个名为js的文件夹中，图片则放在一个名为images（或img）的文件夹中等等。下面的命令将在static目录中创建css文件夹。

  1. mkdir static/css

然后打开位于css目录内的style.css文件进行编辑。

  1. nano static/css/style.css

将下面的CSS规则添加到你的style.css文件中。

h1 {
    border: 2px #eee solid;
    color: brown;
    text-align: center;
    padding: 10px;
}

这段CSS代码将给<h1>标签添加边框、将颜色改为棕色、居中文本，并为其添加少许内边距。

保存并关闭文件。

接下来，打开index.html模板文件进行编辑。

  1. nano templates/index.html

你要在index.html模板文件的<head>部分中添加一个style.css文件的链接。

. . .
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <title>Flask博客</title>
</head>
. . .

在这里，您使用url_for()辅助函数来生成文件的正确位置。第一个参数指定您正在链接到一个静态文件，第二个参数是静态目录内文件的路径。

保存并关闭文件。

当您刷新应用程序的首页时，您会注意到”欢迎来到Flask博客”的文本现在是棕色的，居中显示，并被一个边框包围。

您可以使用CSS语言来为应用程序添加样式并使用自己的设计使其更具吸引力。然而，如果您不是网页设计师，或者不熟悉CSS，那么您可以使用Bootstrap工具包来提供易于使用的组件来为应用程序添加样式。在这个项目中，我们将使用Bootstrap。

您可能已经猜到了，创建另一个HTML模板意味着需要重复编写index.html模板中已有的大部分HTML代码。您可以借助一个基础模板文件来避免不必要的代码重复，所有HTML文件都将继承该基础模板文件。请查看Jinja中的模板继承以获取更多信息。

为了制作基本模板，首先在您的模板目录中创建一个名为base.html的文件。

  1. nano templates/base.html

在您的base.html模板中键入以下代码。

基于Flask的博客模板的HTML文件。


  
    
    
    

    
    

    <mark>{% block title %} {% endblock %}</mark>
  
  
    
    

        {% block content %} {% endblock %}

完成编辑后，保存并关闭文件。

前面代码块中的大部分代码是标准HTML和Bootstrap所需的代码。 标签为Web浏览器提供信息，标签链接Bootstrap CSS文件，