如何使用 Flask 和 Python 3 创建第一个网络应用程序

_ 作者选择了 免费和开源基金作为 写给捐款计划的一部分接受捐款。

介绍

Flask是一个轻量级的Python网络框架,提供用于在Python语言中创建Web应用程序的有用的工具和功能,它为开发人员提供了灵活性,并且是新开发人员的易于访问的框架,因为您可以使用单个Python文件快速构建Web应用程序。

学习Flask将允许您在Python中快速创建Web应用程序,您可以利用Python库为您的Web应用程序添加高级功能,例如在数据库中存储数据或验证Web表格。

在本教程中,您将构建一个小型网页应用程序,在浏览器上渲染HTML文本。您将安装Flask,编写和运行Flask应用程序,并在开发模式下运行应用程序。您将使用路由来显示不同的网页,在您的网页应用程序中为不同的目的。

前提条件

第1步:安装瓶子

在此步骤中,您将激活您的Python环境并使用 pip包安装程序安装Flask。

首先,如果您尚未启用您的编程环境:

1source env/bin/activate

一旦激活了编程环境,请使用pip install命令安装Flask:

1pip install flask

安装完成后,您将在输出的最后部分看到安装的包列表,类似于以下情况:

1[secondary_label Output]
2...
3
4Installing collected packages: Werkzeug, MarkupSafe, Jinja2, itsdangerous, click, flask
5Successfully installed Jinja2-3.0.1 MarkupSafe-2.0.1 Werkzeug-2.0.1 click-8.0.1 flask-2.0.1 itsdangerous-2.0.1

这意味着安装 Flask 还安装了几个其他包. 这些包是 Flask 需要执行不同的功能的依赖。

您已经创建了项目文件夹、虚拟环境并安装了 Flask。

第2步:创建一个简单的应用程序

现在你已经设置了你的编程环境,你将开始使用Flask. 在这个步骤中,你将创建一个小型的FlaskWeb应用程序在Python文件中,你将写HTML代码显示在浏览器中。

在您的flask_app目录中,打开名为app.py的文件进行编辑,使用nano或您最喜欢的文本编辑器:

1nano app.py

请在app.py文件中写下以下代码:

1[label flask_app/app.py]
2
3from flask import Flask
4
5app = Flask(__name__)
6
7@app.route('/')
8def hello():
9    return '<h1>Hello, World!</h1>'

保存并关闭文件。

在上面的代码块中,你首先从flask包中导入Flask对象,然后使用它来创建你的Flask应用程序实例,给它命名app。你传递了特殊的变量__name__,其中包含当前Python模块的名称。

一旦创建了),将正则 Python 函数转换为 flask_view 函数_,将函数的返回值转换为HTTP响应,由HTTP客户端显示,如网页浏览器. 您将 ' /' 的值传递给 Qapp. route( ) 。 表示该功能将响应网络对URL /'的要求,URL是主要URL.

视图函数返回字符串 `'

Hello, World!

' 作为 HTTP 响应。

现在你有一个简单的Flask应用程序在Python文件中,名为)`视图函数的结果。

步骤3 - 运行应用程序

创建包含 Flask 应用程序的文件后,您将使用 Flask 命令行接口运行该文件,启动开发服务器,并在浏览器中将您在上一步中输入的 HTML 代码作为hello()视图函数的返回值。

首先,在您的)使用以下命令(在Windows中,使用):

1export FLASK_APP=app

然后指定您希望在开发模式下运行应用程序(因此您可以使用调试器来捕捉错误)使用环境变量FLASK_ENV:

1export FLASK_ENV=development

最后,使用flask run命令运行应用程序:

1flask run

一旦应用程序运行,输出将是这样的东西:

1[secondary_label Output]
2 * Serving Flask app "app" (lazy loading)
3 * Environment: development
4 * Debug mode: on
5 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
6 * Restarting with stat
7 * Debugger is active!
8 * Debugger PIN: 296-353-699

上一个输出有几个信息,如:

  • 您正在运行的应用程序的名称(「应用程序」)。 * 应用程序正在运行的环境(「开发」)。 * `Debug 模式: on' 意味着 Flask 调试器正在运行. 这是在开发时有用的,因为它在事情发生错误时提供详细的错误消息,这使得解决问题更容易。

打开浏览器并输入URL http://127.0.0.1:5000/. 您将看到题目中的文字 Hello, World! 作为回复。 这确认您的应用程序正在成功运行。

"Hello, World!" in an H1 heading

如果要停止开发服务器,请按CTRL+C

< $ > [警告] 警告: Flask使用简单的网络服务器在开发环境中为您提供应用程序服务,这也意味着Flask调试器正在运行,以方便捕捉出错. 您不应该在生产部署中使用此开发服务器 。 请参看弗拉克文档上的[部署选项] (https://flask.palletsprojects.com/en/2.0.x/deploying/)页,以了解更多信息. 您也可以检查此[用 Gunicorn 的 Flask 部署教程 (https://andsky.com/tech/tutorials/how-to-serve-flask-applications-with-gunicorn-and-nginx-on-ubuntu-20-04) 或 [这个用 uWSGI (https://andsky.com/tech/tutorials/how-to-serve-flask-applications-with-uwsgi-and-nginx-on-ubuntu-20-04) 或使用 DigitalOcean App 平台,通过遵循 [如何使用 Gunicorn 的 Flask 应用到 App 平台 (https://andsky.com/tech/tutorials/how-to-deploy-a-flask-app-using-gunicorn-to-app-platform) 的教程来部署您的 Flask 应用程序 。 < $ > (美元)

若要繼續開發「app.py」應用程式,請讓開發伺服器運行,然後開啟另一個終端窗口。 移動到「flask_app」目錄,啟用虛擬環境,設定環境變量「FLASK_ENV」和「FLASK_APP」,然後繼續進行下一個步驟。

注意: 打开新终端或关闭正在运行开发服务器的终端时,重要的是要记住激活虚拟环境并设置环境变量FLASK_ENVFLASK_APP,以便flask run命令正常工作。

您只需要在一个终端窗口中运行服务器一次。

虽然 Flask 应用程序的开发服务器已经运行,但无法使用相同的 flask run 命令运行另一个 Flask 应用程序. 这是因为 flask run 默认使用的端口号码是 5000,一旦它被打开,它就无法运行另一个应用程序,因此您会收到类似以下的错误:

1[secondary_label Output]
2OSError: [Errno 98] Address already in use

要解决此问题,要么停止当前通过CTRL+C运行的服务器,然后再次运行flask run,要么如果要同时运行两个应用程序,可以将不同的端口号传递给-p参数,例如,要在端口5001上运行另一个应用程序,请使用以下命令:

1flask run -p 5001

有了这个,你可以有一个应用程序运行在http://127.0.0.1:5000/和另一个在http://127.0.0.1:5001/如果你想。

現在你有一個小型的Flask網頁應用程式。你已經執行了你的應用程式並在網頁瀏覽器上顯示了資訊。接下來,你將了解路線以及如何使用它們來服務多個網頁。

步骤 4 — 路线和视图功能

在此步骤中,您将为您的应用程序添加几个路径,以根据所请求的 URL 显示不同的页面,您还将了解查看功能以及如何使用它们。

例如,http://127.0.0.1:5000/是可以用来显示索引页面的主要路线,URL http://127.0.0.1:5000/'可能是关于页面的另一个路线,为访问者提供有关您的Web应用程序的一些信息。同样,您可以创建一条路线,允许用户在http://127.0.0.1:5000/login上登录到您的应用程序。

您的 Flask 应用程序目前有一个路径,为用户提供主URL(http://127.0.0.1:5000/)的请求。 要向您展示如何将新网页添加到您的应用程序中,您将编辑您的应用程序文件,以添加另一个路径,该路径在 http://127.0.0.1:5000/about上为您的 Web 应用程序提供信息。

首先,打开你的app.py文件来编辑:

1nano app.py

通过在文件末尾添加以下突出代码来编辑文件:

 1[label flask_app/app.py]
 2from flask import Flask
 3
 4app = Flask(__name__)
 5
 6@app.route('/')
 7def hello():
 8    return '<h1>Hello, World!</h1>'
 9
10@app.route('/about/')
11def about():
12    return '<h3>This is a Flask web application.</h3>'

保存并关闭文件。

您添加了一個名為「about()」的新函數,此函數配有「@app.route()」裝飾器,將其轉化為處理「http://127.0.1:5000/about」終端點的要求的 _view 函數。

当开发服务器运行时,请使用您的浏览器访问以下URL:

1http://127.0.0.1:5000/about

您将看到文本这是一个Flask Web 应用程序在一个<h3>HTML标题中渲染。

您还可以为一个视图函数使用多个路径. 例如,您可以将索引页面服务于 //index/. 为此,打开您的 app.py 文件以进行编辑:

1nano app.py

通过将另一个装饰器添加到hello()视图函数来编辑文件:

 1[label flask_app/app.py]
 2from flask import Flask
 3
 4app = Flask(__name__)
 5
 6@app.route('/')
 7@app.route('/index/')
 8def hello():
 9    return '<h1>Hello, World!</h1>'
10
11@app.route('/about/')
12def about():
13    return '<h3>This is a Flask web application.</h3>'

保存并关闭文件。

添加此新装饰程序后,您可以访问索引页面在http://127.0.0.1:5000/和http://127.0.0.1:5000/index

您现在了解路由是什么,如何使用它们来创建视图函数,以及如何将新路由添加到您的应用程序中。

第5步:动态路线

在此步骤中,您将使用动态路线来允许用户与应用程序进行交互,您将创建一个路线,该路线将使用通过URL传递的单词,并添加两个数字并显示结果的路线。

相反,用户与页面上的元素相互作用,这取决于用户的输入和行动导致不同的URL,但为本教程的目的,您将编辑URL来展示如何使应用程序以不同的URL做出不同的响应。

首先,打开你的app.py文件来编辑:

1nano app.py

如果您允许用户向您的 Web 应用程序提交某些内容,例如 URL 中的一个值,如下面的编辑中所做的,您应该始终记住,您的应用程序不应该直接显示不受信任的数据(用户提交的数据)。

编辑app.py并在Flask导入的顶部添加下列行:

1[label flask_app/app.py]
2from markupsafe import escape
3from flask import Flask
4
5# ...

然后,将下列路径添加到文件的末尾:

1[label flask_app/app.py]
2# ...
3
4@app.route('/capitalize/<word>/')
5def capitalize(word):
6    return '<h1>{}</h1>'.format(escape(word.capitalize()))

保存并关闭文件。

这个新路径有一个变量部分)`视图函数中。该参数与URL变量相同的名称()。

你使用你之前导入的 escape() 函数来将 word 字符串作为文本,这对于避免 [跨网站脚本(XSS)攻击]至关重要(https://owasp.org/www-community/attacks/xss/)。如果用户提交恶意的 JavaScript 代替一个词, escape() 将作为文本,浏览器将不会运行它,使您的 Web 应用程序安全。

要在 HTML 標題中顯示「

」的頭字,您可以使用 Python 方法「format()」,更多關於此方法,請參閱 如何在 Python 中使用 String Formatters 3

当开发服务器运行时,打开您的浏览器并访问以下URL. 您可以用您所选择的任何单词代替突出的单词。

1http://127.0.0.1:5000/capitalize/hello
2http://127.0.0.1:5000/capitalize/flask
3http://127.0.0.1:5000/capitalize/python

您可以看到页面上的<h1>标签中的URL中的单词。

您也可以在路径中使用多个变量. 要证明这一点,您将添加一个路径,将两个正整数合并在一起,并显示结果。

打开您的app.py文件来编辑:

1nano app.py

将下列路径添加到文件的末尾:

1[label flask_app/app.py]
2# ...
3
4@app.route('/add/<int:n1>/<int:n2>/')
5def add(n1, n2):
6    return '<h1>{}</h1>'.format(n1 + n2)

保存并关闭文件。

在此路线中,您使用的是 special converter int 和 URL 变量 (/add/<int:n1>/<int:n2>/) 仅接受正整数。 默认情况下,URL 变量被认为是字符串,并且被视为字符串。

当开发服务器运行时,打开您的浏览器并访问以下URL:

1http://127.0.0.1:5000/add/5/5/

结果将是两个数字的总和(在这种情况下‘10’)。

您现在了解如何使用动态路径在单一路径中显示不同的响应,取决于所请求的 URL。

步骤6 - 调试一个Flask应用程序

在开发 Web 应用程序时,您通常会遇到应用程序显示错误而不是您预期的行为的情况。您可能会错误地编写变量或忘记定义或导入函数。为了更容易解决这些问题,Flask 在开发模式下运行应用程序时提供调试器。

要展示如何处理错误,您将创建一条路径,从用户名列表中欢迎用户。

打开您的app.py文件来编辑:

1nano app.py

将下列路径添加到文件的末尾:

1[label flask_app/app.py]
2# ...
3
4@app.route('/users/<int:user_id>/')
5def greet_user(user_id):
6    users = ['Bob', 'Jane', 'Adam']
7    return '<h2>Hi {}</h2>'.format(users[user_id])

保存并关闭文件。

在上述路线中,`greet_user ()' 视图函数从).

当开发服务器运行时,打开您的浏览器并访问以下URL:

1http://127.0.0.1:5000/users/0
2http://127.0.0.1:5000/users/1
3http://127.0.0.1:5000/users/2

您将收到以下答案:

1[secondary_label Output]
2Hi Bob
3Hi Jane
4Hi Adam

到目前为止,这很好,但当您向不存在的用户请求问候时,可能会出现错误。

1http://127.0.0.1:5000/users/3

你会看到一个看起来像这样的页面:

Flask Debugger

在顶部,页面为您提供Python例外的名称,即 IndexError,表示列表索引(3在这种情况下)不在列表的范围内(仅从 02,因为列表只有三个项目)。

traceback的最后两行通常给出错误的源头,在你的情况下,线条可能如下:

1File "/home/USER/flask_app/app.py", line 28, in greet_user
2    return '<h2>Hi {}</h2>'.format(users[user_id])

这会告诉你,错误源于 app.py 文件内部的 greet_user() 函数,具体在 return 行。

知道引出例外的原始行将帮助您确定代码中的错误,并决定如何修复它。

在这种情况下,您可以使用简单的)错误,这是一个HTTP错误,告诉用户他们正在寻找的页面不存在。

打开您的app.py文件来编辑:

1nano app.py

要用 HTTP 404 错误来响应,您需要 Flask 的 abort() 函数,可用于 HTTP 错误响应。 更改文件中的第二行,以便也导入此函数:

1[label flask_app/app.py]
2from markupsafe import escape
3from flask import Flask, abort

然后编辑greet_user()视图函数以显示如下:

 1[label flask_app/app.py]
 2# ...
 3
 4@app.route('/users/<int:user_id>/')
 5def greet_user(user_id):
 6    users = ['Bob', 'Jane', 'Adam']
 7    try:
 8        return '<h2>Hi {}</h2>'.format(users[user_id])
 9    except IndexError:
10        abort(404)

如果没有错误,这意味着)` Flask 帮助函数以 HTTP 404 错误响应。

现在,随着开发服务器运行,请再次访问 URL:

1http://127.0.0.1:5000/users/3

这次你会看到一个标准的404错误页面,通知用户该页面不存在。

到本教程结束时,你的app.py文件将看起来像这样:

 1[label flask_app/app.py]
 2from markupsafe import escape
 3from flask import Flask, abort
 4
 5app = Flask(__name__)
 6
 7@app.route('/')
 8@app.route('/index/')
 9def hello():
10    return '<h1>Hello, World!</h1>'
11
12@app.route('/about/')
13def about():
14    return '<h3>This is a Flask web application.</h3>'
15
16@app.route('/capitalize/<word>/')
17def capitalize(word):
18    return '<h1>{}</h1>'.format(escape(word.capitalize()))
19
20@app.route('/add/<int:n1>/<int:n2>/')
21def add(n1, n2):
22    return '<h1>{}</h1>'.format(n1 + n2)
23
24@app.route('/users/<int:user_id>/')
25def greet_user(user_id):
26    users = ['Bob', 'Jane', 'Adam']
27    try:
28        return '<h2>Hi {}</h2>'.format(users[user_id])
29    except IndexError:
30        abort(404)

现在你有一个一般的想法,如何使用Flask调试器来解决你的错误,并帮助你确定适当的行动方式来修复它们。

结论

您现在对Flask是什么,如何安装它,以及如何使用它来编写Web应用程序,如何运行开发服务器,以及如何使用路由器和查看功能来显示不同的Web页面,以服务于特定目的的一般了解。

如果您想了解更多关于Flask的信息,请访问Flask主题页面(https://andsky.com/tags/flask)。

Published At
Categories with 技术
comments powered by Disqus