快速入門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 request@app.route('/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 render_template@app.route('/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 jsonify@app.route('/api/data')
def api_data():data = {'key': 'value'}return jsonify(data)

jsonify(data)：將 Python 字典轉換為 JSON 響應。
返回自定義響應對象：

from flask import Response@app.route('/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 request@app.route('/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 make_response@app.route('/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> 元素。

關注博主接下來做一個接入攝像頭并且實現各類物品識別的網站！