快速入门flask应用（从入门到实战）

目录

前言：

了解一些网络通信的概念

什么是网络通信：

当我们访问一个网址的时候发生了什么：

1. 解析 URL：明确访问目标

2. DNS 域名解析：将 “名字” 转为 “地址”

3. 建立连接：TCP 三次握手（HTTPS 需额外 TLS 握手）

4. 发送 HTTP 请求：告诉服务器 “要什么”

5. 服务器处理请求并返回响应

6. 浏览器解析响应并渲染页面

7. 连接关闭：TCP 四次挥手

总结

1 flask教程

1.1flask安装

1.2第一个flask应用

1.2.1提示信息详解

1.3flask路由

1.3.1定义路由

1.3.2路由参数

1.3.3路由规则

1.3.4路由请求方法

1.3.5静态文件和模板

1.3.6路由优先级

1.4视图函数

1.4.1定义视图函数

1.4.2接收请求数据

1.4.3返回响应

1.4.4处理请求和响应

1.5flask模板渲染

1.5.1基本概念

1.5.2创建模板

1.5.3控制结构

---

前言：

Flask 是一个用 Python 编写的轻量级 Web 应用框架。

Flask 基于 WSGI（Web Server Gateway Interface）和 Jinja2 模板引擎，旨在帮助开发者快速、简便地创建 Web 应用。

Flask 被称为"微框架"，因为它使用简单的核心，用扩展增加其他功能。

了解一些网络通信的概念

什么是网络通信：

网络通信时不同设备上的不同程序之间的通信，请求资源的一端我们 称为客户端，提供资源的一端我们称为服务端

当我们访问一个网址的时候发生了什么：

1. 解析 URL：明确访问目标

浏览器首先会对输入的 URL（统一资源定位符）进行解析，拆解出关键信息：
协议：如http或https（决定数据传输的规则和安全性）；
域名：如www.example.com（服务器的 “名字”，需转换为 IP 地址）；
端口：协议默认端口（http默认 80，https默认 443，可省略）；
路径 / 参数：如/index.html?id=1（指定服务器上的具体资源）。

2. DNS 域名解析：将 “名字” 转为 “地址”

域名（如www.example.com）只是方便人类记忆的标识，计算机之间通信需要IP 地址（如192.168.1.1）。因此，浏览器需要通过DNS（域名系统） 把域名解析为 IP 地址，过程类似 “查通讯录”：

3. 建立连接：TCP 三次握手（HTTPS 需额外 TLS 握手）

拿到 IP 地址后，浏览器需要与目标服务器建立网络连接，核心是TCP 协议（保证数据可靠传输），通过 “三次握手” 确认连接：
第一次握手：浏览器发送 “连接请求”（SYN 包）给服务器；
第二次握手：服务器收到后，回复 “同意连接”（SYN+ACK 包）；
第三次握手：浏览器再回复 “确认收到”（ACK 包），连接正式建立。

4. 发送 HTTP 请求：告诉服务器 “要什么”

连接建立后，浏览器向服务器发送HTTP 请求（基于 TCP 传输），请求内容包括：
请求行：如GET /index.html HTTP/1.1（请求方法、资源路径、协议版本）；
请求头：包含浏览器信息（如User-Agent: Chrome/100.0）、接受的数据格式（Accept: text/html）、Cookie（用户身份信息）等；
请求体：仅 POST 等方法需要（如表单提交的参数）。

5. 服务器处理请求并返回响应

服务器（如 Nginx、Apache）收到请求后，按以下流程处理：
1. 解析请求：识别请求的资源（如index.html）、用户信息（Cookie）等；
2. 业务处理：可能调用后端程序（如 Java、Python 代码）、查询数据库（如 MySQL），生成需要返回的数据（如动态 HTML、JSON）；
3. 生成响应：将处理结果封装为HTTP 响应，包括：
状态码：如200 OK（成功）、404 Not Found（资源不存在）、500 Internal Server Error（服务器错误）；
响应头：如Content-Type: text/html（数据类型）、Cache-Control（缓存规则）、Set-Cookie（服务器向浏览器写入 Cookie）；
响应体：实际内容（如 HTML 代码、图片二进制数据）。

6. 浏览器解析响应并渲染页面

浏览器收到响应后，核心任务是将响应体（如 HTML）转换为用户可见的页面，过程分为以下几步：
1. 解析 HTML，构建 DOM 树：
浏览器逐行解析 HTML 标签，将标签转换为 “文档对象模型”（DOM）—— 一个树形结构，每个节点对应 HTML 中的元素（如<div>、<p>）。
2. 解析 CSS，构建 CSSOM 树：
同时解析 CSS（包括<style>标签、外部.css文件），生成 “CSS 对象模型”（CSSOM）—— 记录每个元素的样式规则（如颜色、尺寸）。
3. 生成渲染树（Render Tree）：
结合 DOM 树和 CSSOM 树，筛选出可见元素（如隐藏的display: none元素会被排除），并为每个可见元素附加样式，形成渲染树。
4. 布局（回流）与绘制（重绘）：
◦ 布局：根据渲染树计算每个元素的位置、大小（如width: 100px在屏幕上的具体坐标）；
◦ 绘制：根据布局结果，将元素的颜色、背景等绘制到屏幕像素上，最终显示完整页面。
5. 加载额外资源：
HTML 中可能包含图片（<img>）、JavaScript（<script>）、字体等资源，浏览器会对这些资源发起额外的 HTTP 请求（重复步骤 3-5），并插入到页面中。

7. 连接关闭：TCP 四次挥手

页面加载完成后，若不再需要通信，浏览器与服务器通过 “四次挥手” 断开 TCP 连接：
浏览器发送 “断开请求”（FIN 包）；
服务器回复 “已收到，准备关闭”（ACK 包）；
服务器处理完剩余数据后，发送 “可以断开”（FIN 包）；
浏览器回复 “确认关闭”（ACK 包），连接断开。

总结

flask在网络通信中起到的作用就是第五步“5. 服务器处理请求并返回响应”

1 flask教程

1.1flask安装

如果你的计算机上安装了python可以使用pip管理器在命令行输入

pip install Flask

安装完成后，可以通过以下命令验证 Flask 是否安装成功：

pip show Flask

执行以上命令，显示结果类似如下：

1.2第一个flask应用

  为了python程序的编写方便建议安装一个python的集成开发ide我这里安装了 pycharm有需要我可以提供安装包。

 在pycharm新建一个py文件输入下面的代码点击运行，包含详细的注释

# 从flask模块中导入Flask类，Flask类是创建Web应用的核心
from flask import Flask# 创建Flask应用实例，__name__是Python的特殊变量，表示当前模块的名称
# Flask通过这个参数确定应用的根目录，用于查找模板、静态文件等资源
app = Flask(__name__)# 路由装饰器：将URL路径'/'与下面定义的home函数绑定
# 当用户访问网站根目录（如http://localhost:5000/）时，会执行home函数
@app.route('/')
def home():# 视图函数：处理根路径请求，返回的字符串会作为响应内容发送给浏览器return '欢迎来到我的第一个 Flask 网站!'# 路由装饰器：将URL路径'/about'与下面定义的about函数绑定
# 当用户访问http://localhost:5000/about时，会执行about函数
@app.route('/about')
def about():# 视图函数：处理/about路径请求，返回关于页面的内容return '这是关于页面'# 条件判断：当该脚本被直接运行时（而不是被其他模块导入时），执行下面的代码
# __name__在脚本直接运行时会被设为'__main__'，被导入时则为模块名
if __name__ == '__main__':# 启动Flask内置的开发服务器# debug=True表示开启调试模式：代码修改后自动重启服务器，且出错时显示详细错误信息app.run(debug=True)

在终端会出现类似这样的提示信息

 * Running on http://127.0.0.1:5000
Press CTRL+C to quit
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 104-396-281
127.0.0.1 - - [07/Aug/2025 17:04:12] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [07/Aug/2025 17:04:21] "GET /about HTTP/1.1" 200 -

1.2.1提示信息详解

1. WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
含义：这是最重要的警告信息
解释：
Flask 自带的服务器是开发专用服务器，只适合在本地开发测试时使用
它不适合生产环境（即正式上线的网站），因为：
性能不足：无法处理大量用户同时访问
安全性低：没有针对网络攻击的防护
 稳定性差：长时间运行可能崩溃
2. * Running on http://127.0.0.1:5000
含义：服务运行地址
解释：
你的网站运行在本机(127.0.0.1或localhost)
使用5000端口
打开浏览器访问这个地址即可查看网站
3. Press CTRL+C to quit
含义：停止服务器的操作提示
解释：在终端按Ctrl+C组合键可以安全停止服务器
4. * Restarting with stat
含义：调试模式下的自动重载功能已启用
解释：
当你修改代码并保存后，服务器会自动重启
这是由debug=True参数启用的功能
5. * Debugger is active!
含义：调试器已激活
解释：
如果程序出错，浏览器会显示详细错误信息和交互式调试器
可以查看变量值、调用栈等调试信息
6. * Debugger PIN: 104-396-281
含义：调试器的安全PIN码
 解释：
当需要进入交互式调试控制台时，需要输入此PIN码验证身份
安全机制防止未经授权的代码执行

主要明白的是我们在运行代码后在浏览器访问http://127.0.0.1:5000就可以访问我们自己的网址了

1.3flask路由

下面我们将学习flask的各种组件

Flask 路由是 Web 应用程序中将 URL 映射到 Python 函数的机制。
Flask 路由是 Flask 应用的核心部分，用于处理不同 URL 的请求，并将请求的处理委托给相应的视图函数。

1.3.1定义路由

使用 @app.route('/path') 装饰器定义 URL 和视图函数的映射。把它理解成一个语法规则

实例

from flask import Flaskapp = Flask(__name__)@app.route('/')
def home():return 'Welcome to the Home Page!'

@app.route('/')：装饰器，用于定义路由。/ 表示根 URL。
def home()：视图函数，当访问根 URL 时，返回 'Welcome to the Home Page!'。

1.3.2路由参数

路由可以包含动态部分，通过在路由中指定参数，可以将 URL 中的部分数据传递给视图函数

@app.route('/greet/<name>')
def greet(name):return f'Hello, {name}!'

这里的 f 是 Python 中 f-string（格式化字符串字面量） 的标识，作用是让字符串支持直接嵌入变量或表达式的值，是一种简洁的字符串格式化方式（Python 3.6 及以上版本支持）。
具体来说，在 f'Hello, {name}!' 中：
字符串前的 f 告诉 Python：这是一个特殊的格式化字符串。
字符串中的 {name} 是一个 “占位符”，会被变量 name 的实际值替换。

1.3.3路由规则

路由规则支持不同类型的参数和匹配规则。
类型规则：
字符串（默认）： 匹配任意字符串。
整数（<int:name>）： 匹配整数值。
浮点数（<float:value>）： 匹配浮点数值。
路径（<path:name>）： 匹配任意字符，包括斜杠 /。

@app.route('/user/<int:user_id>')
def user_profile(user_id):return f'User ID: {user_id}'@app.route('/files/<path:filename>')
def serve_file(filename):return f'Serving file: {filename}'

@app.route('/user/<int:user_id>')：匹配整数类型的 user_id。
@app.route('/files/<path:filename>')：匹配包含斜杠的路径 filename。

1.3.4路由请求方法

Flask 路由支持不同的 HTTP 请求方法，如 GET、POST、PUT、DELETE 等。可以通过 methods 参数指定允许的请求方法。在 Flask 中，当使用 @app.route 定义路由时，如果不通过 methods 参数显式指定支持的 HTTP 请求方法，默认只支持 GET 方法！

@app.route('/submit', methods=['POST'])
def submit():return 'Form submitted!'

1.3.5静态文件和模板

静态文件（如 CSS、JavaScript、图片）可以通过 static 路由访问。模板文件则通过 templates 文件夹组织，用于渲染 HTML 页面。
静态文件访问：静态文件默认放在 static 文件夹中，Flask 提供了 url_for('static', filename='路径') 函数生成正确的访问路径。

1.3.6路由优先级

Flask 按照定义的顺序匹配路由，第一个匹配成功的路由将被处理。确保更具体的路由放在更一般的路由之前。

@app.route('/user/<int:user_id>')
def user_profile(user_id):return f'User ID: {user_id}'@app.route('/user')
def user_list():return 'User List'

/user/123 将匹配到 /user/<int:user_id>，而 /user 将匹配到 user_list。

1.4视图函数

视图函数是 Flask 应用中的核心部分，它负责处理请求并生成响应。
视图函数与路由紧密结合，通过路由将 URL 映射到具体的视图函数。

1.4.1定义视图函数

视图函数是一个普通的 Python 函数，它接收请求并返回响应。视图函数通常与路由配合使用，通过装饰器将 URL 映射到视图函数。

from flask import Flaskapp = Flask(__name__)@app.route('/')
def home():return 'Hello, World!'

@app.route('/')：将根 URL / 映射到 home 视图函数。
def home()：视图函数，返回字符串 'Hello, World!' 作为响应。

1.4.2接收请求数据

request 是 Flask 处理用户输入的核心工具，通过它可以轻松获取 URL 参数、表单数据、JSON 数据、文件等请求信息。掌握 request.method、request.args、request.form、request.get_json() 等常用属性和方法，就能应对绝大多数 Web 交互场景！

视图函数可以接收不同类型的请求数据，包括 URL 参数、表单数据、查询参数等。
获取 URL 参数：

@app.route('/greet/<name>')
def greet(name):return f'Hello, {name}!'

<name> 是一个 URL 参数，传递到视图函数 greet。

获取表单数据：

from flask import [e-mail]('/submit', methods=['POST'])
def submit():username = request.form.get('username')return f'Form submitted by {username}!'

request.form.get('username')：获取 POST 请求中表单数据的 username 字段。

获取查询参数：

@app.route('/search')
def search():query = request.args.get('query')return f'Search results for: {query}'

1.4.3返回响应

视图函数可以返回多种类型的响应，包括字符串、HTML、JSON、或自定义响应对象。
返回字符串：

@app.route('/message')
def message():return 'This is a simple message.'

返回 HTML 模板：

from flask import [e-mail]('/hello/<name>')
def hello(name):return render_template('hello.html', name=name)

render_template('hello.html', name=name)：渲染 HTML 模板 hello.html，并将 name 变量传递给模板。
返回 JSON 数据：

from flask import [e-mail]('/api/data')
def api_data():data = {'key': 'value'}return jsonify(data)

jsonify(data)：将 Python 字典转换为 JSON 响应。
返回自定义响应对象：

from flask import [e-mail]('/custom')
def custom_response():response = Response('Custom response with headers', status=200)response.headers['X-Custom-Header'] = 'Value'return response

Response('Custom response with headers', status=200)：创建自定义响应对象，并设置响应头。

1.4.4处理请求和响应

视图函数可以访问请求对象，并根据请求数据生成响应。可以使用 request 对象来获取请求的信息，使用 make_response 来创建自定义响应。
使用 request 对象：

from flask import [e-mail]('/info')
def info():user_agent = request.headers.get('User-Agent')return f'Your user agent is {user_agent}'

request.headers.get('User-Agent')：获取请求头中的 User-Agent 信息。
使用 make_response：

from flask import [e-mail]('/header')
def custom_header():response = make_response('Response with custom header')response.headers['X-Custom-Header'] = 'Value'return response

make_response('Response with custom header')：创建响应对象并设置自定义头信息。

1.5flask模板渲染

模板是包含占位符的 HTML 文件。
Flask 使用 Jinja2 模板引擎来处理模板渲染。模板渲染允许你将动态内容插入到 HTML 页面中，使得应用能够生成动态的网页内容。

1.5.1基本概念

模板是包含占位符的 HTML 文件。
Flask 使用 Jinja2 模板引擎来渲染这些模板，将 Python 数据插入到 HTML 中，从而生成最终的网页。

1.5.2创建模板

模板文件通常放在项目的 templates 文件夹中。
Flask 会自动从这个文件夹中查找模板文件。
创建模板文件：在项目目录下创建 templates 文件夹，并在其中创建一个 HTML 文件，如 index.html。
templates/index.html 文件代码：

<!DOCTYPE html>
<html>
<head><title>Welcome</title>
</head>
<body><h1>{{ title }}</h1><p>Hello, {{ name }}!</p>
</body>
</html>

{{ title }} 和 {{ name }} 是模板占位符，将在渲染时被替换成实际的值。
在视图函数中渲染模板：
app.py 文件代码：

from flask import Flask, render_templateapp = Flask(__name__)@app.route('/')
def home():return render_template('index.html', title='Welcome Page', name='John Doe')if __name__ == '__main__':app.run(debug=True)

render_template('index.html', title='Welcome Page', name='John Doe')：渲染 index.html 模板，并将 title 和 name 变量传递给模板。

1.5.3控制结构

Jinja2 提供了多种控制结构，用于在模板中实现条件逻辑和循环。
条件语句：

{% if user %}<p>Welcome, {{ user }}!</p>
{% else %}<p>Please log in.</p>
{% endif %}

{% if user %}：检查 user 变量是否存在，如果存在，则显示欢迎消息，否则显示登录提示。
循环语句

<ul>
{% for item in items %}<li>{{ item }}</li>
{% endfor %}
</ul>

{% for item in items %}：遍历 items 列表，并为每个项生成一个 <li> 元素。

关注博主接下来做一个接入摄像头并且实现各类物品识别的网站！