篇一、Flask打造 Python Web 开发的灵活框架，实现简易登录。要求有 Python、HTML 和 CSS 基础。

zy阿二

已于 2023-03-05 12:14:28 修改

阅读量1.4k

点赞数 1

文章标签： flask python 前端

于 2023-03-04 16:33:33 首次发布

本文链接：https://blog.csdn.net/aoeryule/article/details/129333843

版权

本文介绍了Flask框架的基础知识，包括安装、创建第一个应用、定义路由、参数传递以及返回JSON响应。通过示例代码展示了如何使用Flask搭建简单的Web应用，并与Django进行了对比，适合Python初学者。

摘要由CSDN通过智能技术生成

⭐ 简介：大家好，我是zy阿二，我是一名对知识充满渴望的自由职业者。
☘️ 最近我沉溺于Python的学习中。你所看到的是我的学习笔记。
❤️ 如果对你有帮助，请关注、点赞，让我们共同进步。有不足之处请留言指正！

1. Flask打造 Python Web 开发的灵活框架，实现简易登录。入门篇【本文】

2. Flask中默认集成了Jinja2，用于web应用程序中生成动态内容。进阶篇

本文建立在有一定的 Python、HTML 和 CSS 基础的前提下展开
本文使用VScode作为代码编辑器演示

前言

你可能在犹豫是学Django还是Flask，这几乎是唯二的Python前端框架。以下是 Flask 和 Django 的 Github 地址：
Flask: https://github.com/pallets/flask
Django: https://github.com/django/django
Flask 和 Django在Github上的回响
他们分别获得了 6.2万和6.9万的星；所以她们都是非常优秀的框架。如果你足够的强大、自信，你可以直接选择学习Django，因为在大型的项目中，Django更受青睐。

但是，虽然 Flask 被广泛用于开发小型到中型的 Web 应用程序，但它也可以用于构建大型项目。

以下是国内外用 Flask 框架构建的大型项目：

公司名称	描述
Twilio	云通信平台。
Netflix	流媒体视频服务提供商。
Uber	共乘服务平台，出行服务。
喜马拉雅	音频分享平台，提供音乐、有声读物、电台等内容。
豆瓣FM	基于豆瓣音乐数据的个性化音乐推荐平台。
大众点评	本地生活服务平台，各种本地生活服务。
贝壳找房	在线房地产平台，各种房地产服务。

所以如果您是初学者，并且想要学习使用Flask构建Web应用程序，那么这篇教程是一个很好的起点。我们将从基础开始，一步步地带领您了解Flask的各种功能，并教您如何将它们用于您的应用程序中。

1. 安装Flask和第一个Demo

安装Falsk包
pip install Flask
更新Flask包
pip install --upgrade pip Flask
查看本机Flask版本信息
pip show Flask
本文Flask Version: 2.2.3

以下是一个 Flask 的简单示例，在浏览器中显示 “Hello, World!”：

# 导入 Flask 类。这是必要的！无需解释的！
from flask import Flask

# 实例化Flask。这也是必要的！无需解释的！记住就行！
app = Flask(__name__)

# 装饰器来定义访问的路径，固定写法，@app.route('/') 我们只需要更改括号中的内容。
# 在这个示例中，我们定义了一个根目录用 '/' 表示
# 即访问的地址为：http://127.0.0.1:5000/
@app.route('/')
def hello_world():
	# 返回 "Hello, World!"。
    return '<h1> Hello, World! </h1>'

if __name__ == '__main__':
	# app.run() 方法来启动应用程序。这也是必要的！无需解释的！记住就行！
    app.run()

这将会启动一个本地服务器，并将应用程序绑定到默认的端口（通常是 5000）。
执行代码后输出：

 * Serving Flask app '2'
 * Debug mode: off
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on http://127.0.0.1:5000
Press CTRL+C to quit

通过浏览器访问 URL：http://127.0.0.1:5000 ，得到如下画面。
在这里插入图片描述

99%相同的demo，仅修改了

from flask import Flask

app = Flask(__name__)

# 这次，我们定义了路径： '/home'
# 即访问地址为：http://127.0.0.1:5000/home
@app.route('/home')
def hello_world():
	# 返回 "Hello, World!"。
    return '<h1> Hello, World! </h1>'

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

执行代码后输出内容也完全相同:

 * Serving Flask app '2'
 * Debug mode: off
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on http://127.0.0.1:5000
Press CTRL+C to quit

但是我们现在想去访问就要写 URL：http://127.0.0.1:5000/home
在这里插入图片描述
否则：

那么当然我们可以写更复杂的路径，例如： @app.route('/user/profile/name/changename')
所以每一个前端的web页面都对应一个后端的Python函数。

2. 参数的传递

from flask import Flask

app = Flask(__name__)

# 这次，我们定义了路径： '/home/<id>'
# 运行代码后访问：http://127.0.0.1:5000/home/123
# 或：http://127.0.0.1:5000/home/123
# 或：http://127.0.0.1:5000/home/qwe
# 或：http://127.0.0.1:5000/home/你好
# 即home/后面的内容都会被赋值给 id
@app.route('/home/<id>')
# 那么就需要把 id 作为参数传入函数中
def hello_world(id):
    # 然后再把带有 id 的字符串返回给浏览器
    return f'<h1> Hello, {id} </h1>'


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

当我们运行代码，并访问http://127.0.0.1:5000/home/你好后：
在这里插入图片描述

那么聪明的小伙伴就想到了，以下几点
1. id参数的类型。在上面我们是没有定义的。例如：int，float，str 等… 例如：@app.route('/home/<int:id>') 这里我们把id 定义为是一个int，此时再去访问http://127.0.0.1:5000/home/你好就会显示：
  
  但是访问http://127.0.0.1:5000/home/123则可以正常显示：
2. 这里我们只做了简单的接受和返回，并没有做任何处理。比如我们可以做四则运算后再返回结果。

from flask import Flask

app = Flask(__name__)

# 运行代码后访问 http://127.0.0.1:5000/home/123
@app.route('/home/<int:id>')
def hello_world(id):
# 此次，我们在return中把 id*2 返回了。
    return f'<h1> Hello, {id*2} </h1>'


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

返回了id*2 此时得到的必然就是246了。那么依此类推要做更复杂的操作肯定也都顺理成章了。
在这里插入图片描述

3. key:value的形式传递参数

from flask import Flask, request

app = Flask(__name__)

# 运行代码后访问 http://127.0.0.1:5000/home?page=9
@app.route('/home')
def hello() -> str:
    # 加入了参数page，如果没有传入参数page，那么默认值为1
    # 
    # request.args.get('page') 可以提取链接后面的 page= 的值
    page = request.args.get('page', default=1, type=int)
    return f'<h1> 页码： {page} </h1>'


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

在这里插入图片描述

from flask import Flask, request

app = Flask(__name__)

# 运行代码后访问 http://127.0.0.1:5000/home?page=9&seach=flask
@app.route('/home')
def hello() -> str:
    # 这次我们获取了2个参数，分别是链接中page= 和 seach = 的值
    page = request.args.get('page', default=1, type=int)
    seach = request.args.get('seach', type=str)
    return f'<h1> 页码： {page} 搜索：{seach} </h1>'


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

页面：
在这里插入图片描述

现在我们已经了解了参数传递的方法。
那么如果你只想要用Flask后端制作API，基本已经掌握方法了。
以下是一个返回 JSON 格式响应的 Flask 示例代码：

from flask import Flask, jsonify

app = Flask(__name__)

# 运行代码后访问 http://127.0.0.1:5000/json
@app.route('/json')
def get_json():
    data = {'name': 'John', 'age': 30}
    return jsonify(data)

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

以下是一个返回 JSON 文件的 Flask 示例代码：

from flask import Flask, send_file

app = Flask(__name__)

# 运行代码后访问 http://127.0.0.1:5000/json_file
@app.route('/json_file')
def get_json_file():
	# 指定要返回的json文件路径
    json_file_path= './data.json'
    # 指定响应类型为 application/json，以确保客户端可以正确解析它。
    return send_file(json_file_path, mimetype='application/json')

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

4. return HTML文件，使得页面更加美观。

重要根据Flask设定，必须在你写Flask的py文件下创建一个名为：templates 的文件夹。
后续将我们的HTML文件统一存放在此目录下。

当然您可以在 Flask 使用其他名称的文件夹，而不仅限于 templates，可以通过使用 app = Flask(__name__, template_folder='your_template_folder_name') 来指定自定义的模板文件夹路径。非必要不整活

并在templates文件夹下创建一个> login.html <，并写入代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>登录</title>

</head>

<body>
    <h1> 登 录</h1>
    <!-- 提前设定好表单、请求类型和路径，等下会用到 -->
    <form method="post" action="/login">
        <!-- 记住这里2个输入框的name属性，等下会用到 -->
        <!-- 记住这里2个输入框的name属性，等下会用到 -->
        <!-- 记住这里2个输入框的name属性，等下会用到 -->
        <input type="text" name='user' placeholder="用户名">
        <input type="password" name='pwd' placeholder="密码">
        <input type="submit" value="提交">
    </form>
</body>

</html>

再写python代码如下：

from flask import Flask, render_template

app = Flask(__name__)

# 运行代码后访问 http://127.0.0.1:5000/login
@app.route('/login')
def login():
    return render_template('login.html')

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

运行后访问，得到如下页面：
在这里插入图片描述

那么下一步我们需要知道用户在前端输入的内容，并检查结果是否正确返回不同的内容。
其实还需要额外解决1个问题，那就是当你在页面上点击“提交”按钮后，页面显示：

这是因为提交按钮会被包装在一个 HTML 表单中，当你在前端页面中点击 "提交"按钮时，浏览器会向后端发送一个 HTTP 请求，并且将表单的数据提交到服务器。同时我们知道，直接访问网站通常用的是GET请求，而提交表单用的是POST请求。这些我们在HTML中已经准备好了。所以我们只需要修改py代码如下：

from flask import Flask, request, render_template


app = Flask(__name__)

# 运行代码后访问 http://127.0.0.1:5000/login
# 定义login视图函数有2个方法，一GET方法，二POST方法
@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'GET':
        return render_template('login.html')
    # request.form方法可以直接获取表单的详细内容
    print(request.form)
    # 也可以直接使用索引的方式获取表单中的值
    # 方法1：直接用索引取。还记得让你们刚刚在html中让你们记的user和pwd吗
    print('直接用索引取,帐号、密码：', request.form['user'], request.form['pwd'])
    # 方法2：使用get方法取
    print('get方法取值,帐号、密码：', request.form.get('user'), request.form.get('pwd'))
    # 注意：如果使用索引方式访问字典中不存在的键，将会抛出 KeyError 异常。因此，推荐使用 get 方法获取值，避免程序因异常而崩溃。

    # 判断设定默认账号密码是否正确
    if request.form.get('user') == 'admin' and request.form.get('pwd') == '123456':
        return '登录成功'
    return '账号或密码错误！'


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

在这里插入图片描述
输出内容：

 * Serving Flask app '1'
 * Debug mode: off
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on http://127.0.0.1:5000
Press CTRL+C to quit
127.0.0.1 - - [04/Mar/2023 16:10:00] "GET /login HTTP/1.1" 200 -
ImmutableMultiDict([('user', 'admin'), ('pwd', '123456')])
直接用索引取,帐号、密码： admin 123456
get方法取值,帐号、密码： admin 123456

5. 本章节完结。下篇讲Flask中的Jinja2。即在HTML中执行的代码。

2. Flask中默认集成了Jinja2，用于web应用程序中生成动态内容。进阶篇

zy阿二

关注

1
点赞
踩
29

收藏

觉得还不错? 一键收藏
打赏
0
评论
篇一、Flask打造 Python Web 开发的灵活框架，实现简易登录。要求有 Python、HTML 和 CSS 基础。

Flask打造 Python Web 开发的灵活框架，本文建立在有一定的 Python、HTML 和 CSS 基础的前提下展开
复制链接

扫一扫