在了解Flask框架之前，強烈建議跟著官網教程及說明進行學習：https://dormousehole.readthedocs.io/en/latest/tutorial/layout.html

一、路由

1.1 常規路由

@app.route('/')這是一個 裝飾器（Decorator），用于將 URL 路徑與 Python 函數綁定。'/' 代表 根路徑（主頁），例如訪問 http://localhost:5000/ 時會觸發 hello() 函數，hello() 函數又會返回 ‘Hello, World!’，瀏覽器會顯示該字符串。
@app.route('/first')定義路由 /first，訪問 http://localhost:5000/first 時會調用 first() 函數，first() 函數又會返回 ‘first路由’，瀏覽器會顯示該字符串。

當用戶訪問某個 URL（如 / 或 /first），Flask 會查找匹配的路由，并執行對應的函數。
函數的返回值（字符串、HTML、JSON 等）會作為 HTTP 響應返回給瀏覽器。

from flask import Flask
# 從flask庫中導入Flask類函數
app = Flask(__name__)
# 既然Flask是類函數，那就要實例化，app就是實例化的對象。其中__name__ 是一個 Python 特殊變量，表示當前模塊的名稱。
@app.route('/')
# 1、這是一個裝飾器（decorator），是 Python 的一個特殊語法。
# 2、@app.route() 裝飾器將 URL 路徑與下面的函數（def)綁定在一起。
# 3、此代碼中：'/' 表示網站的根路徑（即主頁），當代碼運行時，會調用hello函數。
# 4、@app.route('/')就是路由。
def hello():return 'Hello, World!'
@app.route('/first')
# 1、此處定義了first路由，裝飾器地址與定義的函數一致
# 2、當頁面加載first url時，會調用first函數
def first():return 'first路由'if __name__=='__main__':app.run()
# app.run() 是 Flask 提供的 開發服務器啟動方法，主要功能包括：
# 1、啟動一個本地 Web 服務器（默認地址：http://127.0.0.1:5000/）。
# 2、監聽 HTTP 請求，并根據定義的路由（@app.route）調用對應的函數。
# 3、提供調試信息（如訪問日志、錯誤提示等）。

1.2 動態路由

(1) 默認字符串類型 <variable>
(2) 整數類型 <int:variable>
(3) 浮點數類型 <float:variable>

@app.route('/user/<id>')
def index(id):if id == '1':return '返回 1'if id == str(2):return '返回 str(2)'
# 1、訪問 /user/1 → 返回 '返回 1'
# 2、訪問 /user/2 → 返回 '返回 str(2)'
# 3、訪問 /user/abc → 無匹配條件，返回空響應（可優化）# (1) 默認字符串類型 <variable>
@app.route('/user/<username>')
def show_user(username):return f'用戶名: {username}'
# 1、/user/alice → 用戶名: alice
# 2、/user/123 → 用戶名: 123# (2) 整數類型 <int:variable>
@app.route('/post/<int:post_id>')
def show_post(post_id):  # post_id 是整數return f'文章ID: {post_id}'
# 1、/post/42 → 文章ID: 42
# 2、/post/abc → 404 錯誤（不匹配）# (3) 浮點數類型 <float:variable>
@app.route('/weight/<float:kg>')
def show_weight(kg):return f'重量: {kg} 千克'
# 1、/weight/5.2 → 重量: 5.2 千克

1.3 路由的其他高級用法

(1) 多規則路由
(2) HTTP 方法限制

GET：用于 請求數據（如加載頁面、搜索）
POST：用于 提交數據（如登錄、注冊、上傳文件）

(1) 多規則路由
@app.route('/')
@app.route('/home')
def home():return '首頁'
# 訪問 / 或 /home 均返回 '首頁'
(2) HTTP 方法限制
@app.route('/login', methods=['GET', 'POST'])
def login():if request.method == 'POST':return '處理登錄'return '顯示登錄表單' 
# 1、/login 路由可以同時處理 GET 和 POST 請求。
# 2、根據請求方法的不同，執行不同的邏輯（例如：GET 顯示登錄表單，POST 處理登錄數據）。

二、變量規則

變量規則是 Flask 路由系統中用于動態匹配 URL 部分的關鍵特性，它允許你在 URL 中定義可變部分，并將這些部分作為參數傳遞給視圖函數。

2.1 示例1：字符串類型（默認）

@app.route('/user/<username>')
def show_user(username):return f"Hello, {username}!"

匹配 /user/john → username=“john”
不匹配 /user/john/（因為默認不允許斜杠）

2.2 示例2：整數類型

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

匹配 /post/42 → post_id=42（整數）
不匹配 /post/abc（因為無法轉換為整數）

2.3 示例3：路徑類型

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

匹配 /path/one/two/three → subpath=“one/two/three”

三、自定義轉換器

需要知道<>是提取參數的作用
那么例如<int:id>中的int就是轉換器
Flask 的自定義轉換器基于== Werkzeug== 的 BaseConverter 類，其核心由三部分組成：

1. 正則表達式：定義 URL 變量部分的匹配規則
2. to_python 方法：將 URL 字符串轉換為 Python 對象
3. to_url 方法：將 Python 對象轉換回 URL 字符串

from werkzeug.routing import BaseConverterclass RegexConverter(BaseConverter):def __init__(self, url_map, *items):super(RegexConverter, self).__init__(url_map)self.regex = items[0]app.url_map.converters['regex'] = RegexConverter@app.route('/regex/<regex("[a-z]{3}"):value>')
def show_regex(value):return f'Value: {value}'

3.1 核心組件詳解

1. DynamicRegexConverter 類

class DynamicRegexConverter(BaseConverter):

繼承自 BaseConverter，這是所有Flask轉換器的基類，主要目的是允許在路由定義中動態指定正則表達式。

2. init 方法

def __init__(self, url_map, *args):super().__init__(url_map)self.regex = args[0]  # 從路由定義中獲取正則表達式

url_map: Flask自動傳入的URL映射對象
*args: 捕獲所有額外的位置參數
args[0]: 獲取路由定義中傳入的第一個參數（即正則表達式字符串）

3. 轉換器注冊

app.url_map.converters['dregex'] = DynamicRegexConverter

將自定義轉換器注冊到Flask應用中，dregex是轉換器的名稱，將在路由中使用

4. 路由定義

@app.route('/product/<dregex("[A-Z]{3}-\d{4}"):product_code>')

分解路由參數部分：
<dregex(“[A-Z]{3}-\d{4}”):product_code>
dregex: 使用的轉換器名稱
[A-Z]{3}-\d{4}: 傳遞給轉換器的正則表達式參數
product_code: 視圖函數接收的參數名

3.2 工作流程詳解

1. 當訪問 /product/ABC-1234 時：

• 路由匹配階段：
  Flask 看到 dregex 轉換器，會使用 “[A-Z]{3}-\d{4}” 作為正則表達式，檢查 “ABC-1234” 是否匹配該模式。
• 正則表達式解析：
  [A-Z]{3}: 3個大寫字母 → “ABC”
  -: 連字符 → “-”
  \d{4}: 4個數字 → “1234”
• 參數傳遞：
  將 “ABC-1234” 作為 product_code 參數傳遞給視圖函數

2. 如果訪問無效URL如 /product/abc-123：

• 正則匹配失敗（需要大寫字母）
• Flask 自動返回 404 Not Found

四、form表單

想象表單就像你去銀行填的表格：
表格紙 = 標簽
填寫項 = 字段（姓名、電話等）
提交按鈕 = 柜臺工作人員收走表格

4.1 表單的三大組成部分

1. 前端部分（HTML）

<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<form action="/submit" method="POST"><label>姓名：<input type="text" name="username"></label><label>密碼：<input type="password" name="pwd"></label><button type="submit">提交</button>
</form>
</body>
</html>

• action：表格交給誰（哪個URL）
• method：郵寄方式（GET像明信片，POST像密封信件）
• name：每個字段的標識（后端靠這個找數據）

2. 后端部分（Flask）

from flask import request
from flask import Flask
# 從flask庫中導入Flask類函數
app = Flask(__name__)
@app.route('/submit', methods=['POST'])
def handle_form():# 獲取表單數據name = request.form['username']  # 根據name獲取password = request.form['pwd']# 相當于銀行職員查看表格內容print(f"收到：用戶名{name}，密碼{password}")return "提交成功！"

3. 數據傳輸過程

• 用戶填寫 → 點擊提交 → 瀏覽器打包數據 → 發送到服務器 → Flask拆包處理

五、request請求

1. 基本屬性

• request.method: 請求方法（GET, POST等）
• request.url: 完整的請求URL
• request.path: URL的路徑部分
• request.host: 主機名
• request.headers: 請求頭字典

2. 請求方法重點

• GET請求

• 用于獲取資源
• 參數通過URL傳遞

username = request.args.get('username')
# 或獲取所有參數
args = request.args.to_dict()

• POST請求

• 用于提交數據
• 參數通過請求體傳遞

username = request.form.get('username')
# 或獲取所有參數
form_data = request.form.to_dict()

3. request對象 和HTTP方法(GET/POST)

• request對象：是Flask提供的"萬能容器"，包含了當前請求的所有信息
• HTTP方法：只是request對象中記錄的一個屬性(request.method)，表示本次請求的類型
• 通俗理解：把HTTP請求比作快遞包裹，request對象就是整個包裹（包含內容物、寄件人信息、快遞單等），而GET/POST等HTTP方法只是快遞單上的"快遞類型"選項

4. 總結

• GET請求的參數會放在request.args中
• POST請求的參數會放在request.form或request.json中
• 其他數據(如文件)放在request.files中

六、重定向

重定向(Redirect)是Web開發中的一種關鍵機制，它允許服務器指示客戶端(瀏覽器)自動轉向另一個URL。

1. 基本重定向方法

from flask import redirect
from flask import Flask
app = Flask(__name__)
# 硬編碼URL方式(不推薦)
@app.route('/old')
def old_page():return redirect('/new-url')  # 默認302臨時重定向# 使用url_for方式(推薦)
@app.route('/new')
def new_page():return redirect(url_for('profile', username='admin'))

2. url_for的核心優勢
   url_for()函數是Flask提供的URL構建器，它① 動態生成URL：基于視圖函數名而非硬編碼路徑；②自動處理URL編碼：特殊字符會自動轉義；③支持參數傳遞：方便構建帶查詢參數的URL；④便于維護：URL變更只需修改路由定義，不影響視圖函數。
3. 重定向與url_for的深度配合

• 帶參數的重定向

@app.route('/product/<int:product_id>')
def product_detail(product_id):# 如果產品ID已更新，自動跳轉到新IDnew_id = get_updated_id(product_id)if new_id != product_id:# 使用url_for自動構建新URLreturn redirect(url_for('product_detail', product_id=new_id), code=301)return f"顯示產品{product_id}詳情"

七、abort函數

abort函數是Flask中用于立即終止請求處理并返回HTTP錯誤響應的核心工具，其本質是通過拋出特殊異常來實現請求終止的。

# Flask內部的簡化實現
from werkzeug.exceptions import HTTPException
def abort(status_code, *args, **kwargs):# 查找對應的異常類exception = _aborter.mapping.get(status_code, HTTPException)# 拋出異常raise exception(*args, **kwargs)

八、綜合板塊

1、前后端數據交互

1.1、通信基礎

1. 協議：基于HTTP/HTTPS協議
2. 數據格式：JSON為主（也可用XML、FormData等）
3. 交互方式：

• 前端發起請求（Fetch/Axios/jQuery AJAX）
• 后端接收處理并返回響應
• 前端處理響應更新UI

1.2、后端代碼

from flask import Flask, request, jsonify
app = Flask(__name__)
# 內存數據庫
tasks = [{"id": 1, "task": "學習Flask", "done": False}
]
@app.route('/api/tasks', methods=['GET', 'POST'])
def handle_tasks():if request.method == 'GET':return jsonify({"tasks": tasks})  # 返回所有任務if request.method == 'POST':new_task = request.get_json()  # 獲取前端發送的JSON數據new_task["id"] = len(tasks) + 1tasks.append(new_task)return jsonify(new_task), 201  # 返回新創建的任務
@app.route('/api/tasks/<int:task_id>', methods=['PUT'])
def update_task(task_id):task = next((t for t in tasks if t["id"] == task_id), None)if not task:return jsonify({"error": "任務不存在"}), 404update_data = request.get_json()task.update(update_data)  # 更新任務數據return jsonify(task)
if __name__ == '__main__':app.run()

1.3、前端代碼

<!DOCTYPE html>
<html>
<body><h1>任務列表</h1><ul id="taskList"></ul> <input type="text" id="taskInput" placeholder="新任務"><button onclick="addTask()">添加</button><script>// 獲取任務列表async function fetchTasks() {const response = await fetch('/api/tasks');const data = await response.json();renderTasks(data.tasks);}// 添加新任務async function addTask() {const taskText = document.getElementById('taskInput').value;const response = await fetch('/api/tasks', {method: 'POST',headers: { 'Content-Type': 'application/json' },body: JSON.stringify({ task: taskText, done: false })});fetchTasks(); // 刷新列表}// 更新任務狀態async function toggleTask(id) {await fetch(`/api/tasks/${id}`, {method: 'PUT',headers: { 'Content-Type': 'application/json' },body: JSON.stringify({ done: true })});fetchTasks(); // 刷新列表}// 渲染任務列表function renderTasks(tasks) {const list = document.getElementById('taskList');list.innerHTML = tasks.map(task => `<li onclick="toggleTask(${task.id})">${task.task} - ${task.done ? '?' : '?'}</li>`).join('');}// 初始化加載fetchTasks();</script>
</body>
</html>

2、javascript中的 fetch API和 $.ajax API

🐾 （一）javascript中的 var 和 $
var：var 是一個關鍵字，用于聲明變量。
$： $ 是jQuery函數的別名，通常用于選擇DOM元素、創建jQuery對象等。
🐾 （二）javascript中的 fetch API 和 $.ajax API
（1）Fetch API： 是一個現代Web API，用于執行網絡請求。 基于Promise設計，使得處理異步操作更加直觀和易于管理。 提供了.then()和.catch()方法來處理Promise的解析和拒絕。
（2）jQuery $.ajax： 是jQuery庫中的一個方法，用于發送異步HTTP請求。 提供了豐富的配置選項和回調函數，用于處理請求和響應。 支持多種類型的請求（GET、POST等）和數據格式（JSON、XML等）。

• Fetch API 使用方法

1. 初始化請求

fetch('/system/score_first/score_first')

這行代碼使用fetch函數發起一個GET請求到指定的URL（/system/score_first/score_first）。fetch返回一個Promise對象，該對象在請求完成后會被解析或拒絕。

2. 處理響應

.then(response => response.json())

請求成功后，response對象包含了服務器的響應。這里使用.json()方法將響應體解析為JSON格式，并返回一個新的Promise，該Promise在解析完成后會返回解析后的JSON數據。

3. 更新ECharts圖表

.then(data => {option1.xAxis[0].data = data.xData;option1.series[0].data = data.yData;myChart1.setOption(option1);
})

解析后的JSON數據（data）被用來更新ECharts的配置項（option1）。這里假設option1是一個已經定義好的ECharts配置項對象，它包含了圖表的各種配置（如標題、坐標軸、系列等）。然后，使用myChart1.setOption(option1)方法應用這些更新。

4. 錯誤處理

.catch(error => {console.error('Error fetching data:', error);
});

如果在請求過程中發生錯誤（如網絡問題、服務器錯誤等），則執行.catch方法中的回調函數，并將錯誤信息打印到控制臺。

• jQuery $.ajax 使用方法

1. 初始化請求

$.ajax({url: '/system/score_first/score_first',type: 'GET',dataType: 'json',// ...
});

這里使用$.ajax方法配置了一個AJAX請求。url指定了請求的URL，type指定了請求類型（GET），dataType指定了預期的服務器響應的數據類型（JSON）。

2. 成功回調

success: function(data) {option1.xAxis[0].data = data.xData;option1.series[0].data = data.yData;myChart1.setOption(option1);
}

當請求成功時，success回調函數被調用，并傳入解析后的響應數據（data）。

3. 錯誤回調

error: function(xhr, status, error) {console.error('Error fetching data:', error);
}

如果請求失敗，error回調函數被調用。

🐾 （三）$.ajax獲取后端數據加載文檔對象模型‘$(document).ready(function() { … }); 這段代碼的作用是確保DOM（文檔對象模型）完全加載和解析完成后再執行包含在其中的$.ajax等代碼。`

// 1  fetch方法
var myChart1 = echarts.init(document.getElementById('echarts-records'), 'walden')
function mychart1(time){if(time=='year1'){fetch('/system/score_first/score_first')  .then(response => response.json())  .then(data => {   option1.xAxis[0].data = data.xData;   option1.series[0].data = data.yData;   myChart1.setOption(option1);  })  .catch(error => {  console.error('Error fetching data:', error);  })});
});// 2  $.ajax方法
var myChart1 = echarts.init(document.getElementById('echarts-records'), 'walden')
function mychart1(time){if(time=='year1'){$.ajax({  url: '/system/score_first/score_first',  type: 'GET',  dataType: 'json',  success: function(data) {option1.xAxis[0].data = data.xData;   option1.series[0].data = data.yData;   myChart1.setOption(option1);  }error: function(xhr, status, error) {console.error('Error fetching data:', error);}});
});// 3  $.ajax獲取后端數據加載文檔對象模型
$(document).ready(function() {$.ajax({url: 'some-url',method: 'GET',success: function(data) {}});
});

🐾 總結：到這flask框架的基本概念就結束了，其實flask框架內還有很多高級用法，后續用到再進行更新吧~