Flask快速入门基础教程

目录

前言

一、安装Flask

1.创建环境

2.激活环境

3.安装 Flask

二、创建最小的Flask应用程序

1.打开 vs code

2.创建 app.py 文件

3.编写代码

三、运行Flask应用程序

四、路由

1.基本路由

2.变量路由

3.唯一和重定向路由

五、渲染模板

1.创建templates文件夹

2.创建hello.html文件，内容如下：

3.在app.py中添加以下代码

4. 访问页面

---

前言

Flask是一个轻量级的Web框架，非常适合初学者快速入门Web开发。本次基础教程的操作系统是windows11，版本为python3.12，编辑器为vs code。

关于python安装，有以下两种

• python安装方式
• conda安装方式

关于vs code

• 下载并安装 vs code
• vs code 中的python入门指南

一、安装Flask

假设你已经安装了python环境，有python编程基础，并能够在终端直接使用关于python的命令来操作

1.创建环境

在终端（Windows Power Shell）执行以下命令来创建项目开发环境（可以一条条运行）

>> mkdir flask_tutorial
>> cd flask_tutorial
>> python -m venv .venv

• 创建项目文件夹
• 进入该文件夹
• 创建Python虚拟环境

使用 mkdir 命令创建 flask_tutorial 文件夹（我是在电脑桌面创建的），使用 cd 命令进入该文件夹，使用 python -m venv .venv 在该文件夹下执行命令并创建虚拟环境。

什么是虚拟环境

简单的讲，假设你已经有了一个python环境，你还可以基于该python创建多个子python环境，这些子python环境与主python环境并不冲突。使用主python环境创建一个个子python环境（都是以文件夹的形式存在）可以更好的使用相同版本的python来创建和开发多个项目，并且这些子python环境是与开发项目绑定在一起，随便删除都不影响主python环境的存在

python -m venv .venv 命令解析

在终端使用 python --help 查看命令使用方法，如图：

第一个下划线：python [option]         python是可执行的命令，[option]是可选项

第二个下划线：-m run library module as a script       -m是可选项，作用是将库模块当作脚本运行

venv 是个库模块， .venv是创建的虚拟环境名（本质上是个文件夹名）

2.激活环境

创建完虚拟环境，接着在终端激活该环境才能安装flask

（注：在flask_tutorial 文件夹下激活）

(base) PS C:\Users\26943\Desktop\flask_tutorial> .\.venv\Scripts\activate

激活环境成功会有个标志（.venv）如下：

(.venv) (base) PS C:\Users\26943\Desktop\flask_tutorial>

3.安装 Flask

激活虚拟环境后就可以使用命令 pip install Flask 安装flask了

(.venv) (base) PS C:\Users\26943\Desktop\flask_tutorial> pip install Flask

使用  ls .\.venv\Lib\site-packages\ 命令查看以成功安装的包（也可以手动点击到文件夹里查看）

(.venv) (base) PS C:\Users\26943\Desktop\flask_tutorial> ls .\.venv\Lib\site-packages\


    目录: C:\Users\26943\Desktop\flask_tutorial\.venv\Lib\site-packages


Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----         2024/8/13     18:04                blinker
da----         2024/8/13     18:04                blinker-1.8.2.dist-info
d-----         2024/8/13     18:04                click
da----         2024/8/13     18:04                click-8.1.7.dist-info
d-----         2024/8/13     18:04                colorama
da----         2024/8/13     18:04                colorama-0.4.6.dist-info
d-----         2024/8/13     18:04                flask
da----         2024/8/13     18:04                flask-3.0.3.dist-info
d-----         2024/8/13     18:04                itsdangerous
da----         2024/8/13     18:04                itsdangerous-2.2.0.dist-info
d-----         2024/8/13     18:04                jinja2
da----         2024/8/13     18:04                jinja2-3.1.4.dist-info
d-----         2024/8/13     18:04                markupsafe
da----         2024/8/13     18:04                MarkupSafe-2.1.5.dist-info
d-----         2024/8/13     17:02                pip
da----         2024/8/13     17:03                pip-24.0.dist-info
d-----         2024/8/13     18:04                werkzeug
da----         2024/8/13     18:04                werkzeug-3.0.3.dist-info

---

二、创建最小的Flask应用程序

既然环境准备完成后，咱就可以写代码了

1.打开 vs code

 在终端执行命令，打开vs code 编辑器（当然也可以直接用鼠标打开在进入到咱项目文件中）

(.venv) (base) PS C:\Users\26943\Desktop\flask_tutorial> code .

2.创建 app.py 文件

在 vs code 创建 app.py 文件（鼠标点点，键盘敲敲），如下图

3.编写代码

在 app.py 中编写一个最小的 Flask 应用程序，代码如下

from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello():
    return 'Hello, Flask!'

if __name__ == '__main__':
    app.run(debug=True)

---

三、运行Flask应用程序

右上箭头是运行操作，下边的箭头是运行代码完成界面，使用浏览器进入 http://127.0.0.1:5000 查看页面，或者按住 Ctrl + 左键点击链接进入。

结果如下图：

---

四、路由

创建第一个flask应用程序后咱也算是入门了，接着就讲讲路由，啥是路由呢。路由指的是将不同的 URL路径映射到相应的处理函数或视图函数的机制。举个例子，上面咱编写的一个 Flask 应用中，@app.route('/') 这个装饰器就将 / （就是咱使用浏览器访问的这个链接​http://127.0.0.1:5000​/）这个 URL 路径与下面的处理函数（就是咱定义的hello()函数）关联起来，当用户访问 / 时，框架就会调用这个处理函数来处理请求并返回相应的内容（就咱定义hello()函数的返回值return 'Hello, Flask!'）。

1.基本路由

基本路由就是指定URL，如 '/' 或 '/hello' 

• 访问地址：http://127.0.0.1:5000 或者 http://127.0.0.1:5000/

@app.route('/')
def hello():
    return 'Hello, Flask!'

• 访问地址：http://127.0.0.1:5000/hello

​@app.route('/hello')
def hello():
    return 'Hello, Flask!'

2.变量路由

通过使用 <variable_name> 标记部分来向 URL 添加变量部分。然后，你的函数将接收 <variable_name> 作为关键字参数。或者，你可以使用转换器来指定参数的类型，例如 <converter:variable_name>。

转换器类型

string	（默认）接受任何不带斜杠的文本
int	接受正整数
接受正整数	接受正浮点值
path	与 string 类似，但还接受斜杠
uuid	接受 UUID 字符串

from markupsafe import escape

@app.route('/user/<username>')
def show_user_profile(username):
    return f'User {escape(username)}'

@app.route('/post/<int:post_id>')
def show_post(post_id):
    return f'Post {post_id}'

@app.route('/path/<path:subpath>')
def show_subpath(subpath):
    return f'Subpath {escape(subpath)}'

• 若 <username> 值为 wgs 则 访问链接为：http://127.0.0.1:5000/user/wgs
• 若 <int:post_id> 值为 2525 则 访问链接为：http://127.0.0.1:5000/post/2525
• 若 <path:subpath> 值为 /user/wgs 则 访问链接为：http://127.0.0.1:5000/path/user/wgs

3.唯一和重定向路由

以下两个规则在使用尾部斜杠方面有所不同。

@app.route('/projects/')
def projects():
    return 'The project page'

@app.route('/about')
def about():
    return 'The about page'

• projects 端点的规范 URL 带有尾部斜杠。它类似于文件系统中的文件夹。如果您在没有尾部斜杠的情况下访问 URL（/projects），Flask 会将您重定向到带有尾部斜杠的规范 URL（/projects/）。所以可访问链接为 http://127.0.0.1:5000/projects/ 或者为 http://127.0.0.1:5000/projects
• about 端点的规范 URL 没有尾部斜杠。它类似于文件的路径名。使用尾部斜杠访问 URL（/about/）会产生 404“未找到”错误。这有助于保持这些资源的 URL 唯一，从而帮助搜索引擎避免两次索引同一页面。所以可访问链接为 127.0.0.1:5000/about

---

五、渲染模板

除了可以直接通过以上方法返回网页内容外，还可以将数据传递给HTML模板，再通过函数调用HTML模板返回网页内容。

1.创建templates文件夹

2.创建hello.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>
    <h1>{{ name }}</h1>
</body>
</html>

3.在app.py中添加代码

from flask import render_template

@app.route('/hello/<name>')
def hello_template(name):
    return render_template('hello.html', name=name)

4. 访问页面

 通过浏览器访问链接 http://127.0.0.1:5000/hello/wgs

---

最后，更多信息请前往 flask 中文文档（欢迎使用 Flask — Flask 文档 (3.0.x) - Flask 中文）