在了解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框架内还有很多高级用法，后续用到再进行更新吧~