Python flask入门-EW帮帮网

在了解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 类，其核心由三部分组成：

正则表达式：定义 URL 变量部分的匹配规则
to_python 方法：将 URL 字符串转换为 Python 对象
to_url 方法：将 Python 对象转换回 URL 字符串

from werkzeug.routing import BaseConverter

class 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 核心组件详解

DynamicRegexConverter 类

class DynamicRegexConverter(BaseConverter):

继承自 BaseConverter，这是所有Flask转换器的基类，主要目的是允许在路由定义中动态指定正则表达式。

init 方法

def __init__(self, url_map, *args):
    super().__init__(url_map)
    self.regex = args[0]  # 从路由定义中获取正则表达式

url_map: Flask自动传入的URL映射对象
*args: 捕获所有额外的位置参数
args[0]: 获取路由定义中传入的第一个参数（即正则表达式字符串）

转换器注册

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

将自定义转换器注册到Flask应用中，dregex是转换器的名称，将在路由中使用

路由定义

@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 工作流程详解

当访问 /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 参数传递给视图函数

如果访问无效URL如 /product/abc-123：

正则匹配失败（需要大写字母）
Flask 自动返回 404 Not Found

四、form表单

想象表单就像你去银行填的表格：
表格纸 = 标签
填写项 = 字段（姓名、电话等）
提交按钮 = 柜台工作人员收走表格

4.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：每个字段的标识（后端靠这个找数据）

后端部分（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 "提交成功！"

数据传输过程

用户填写 → 点击提交 → 浏览器打包数据 → 发送到服务器 → Flask拆包处理

五、request请求

基本属性

request.method: 请求方法（GET, POST等）

request.url: 完整的请求URL

request.path: URL的路径部分

request.host: 主机名

request.headers: 请求头字典

请求方法重点

GET请求

用于获取资源

参数通过URL传递

username = request.args.get('username')
# 或获取所有参数
args = request.args.to_dict()

POST请求

用于提交数据

参数通过请求体传递

username = request.form.get('username')
# 或获取所有参数
form_data = request.form.to_dict()

request对象和HTTP方法(GET/POST)

request对象：是Flask提供的"万能容器"，包含了当前请求的所有信息
HTTP方法：只是request对象中记录的一个属性(request.method)，表示本次请求的类型
通俗理解：把HTTP请求比作快递包裹，request对象就是整个包裹（包含内容物、寄件人信息、快递单等），而GET/POST等HTTP方法只是快递单上的"快递类型"选项

总结

GET请求的参数会放在request.args中
POST请求的参数会放在request.form或request.json中
其他数据(如文件)放在request.files中

六、重定向

重定向(Redirect)是Web开发中的一种关键机制，它允许服务器指示客户端(浏览器)自动转向另一个URL。

基本重定向方法

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'))

url_for的核心优势
url_for()函数是Flask提供的URL构建器，它① 动态生成URL：基于视图函数名而非硬编码路径；②自动处理URL编码：特殊字符会自动转义；③支持参数传递：方便构建带查询参数的URL；④便于维护：URL变更只需修改路由定义，不影响视图函数。
重定向与url_for的深度配合

带参数的重定向

@app.route('/product/<int:product_id>')
def product_detail(product_id):
    # 如果产品ID已更新，自动跳转到新ID
    new_id = get_updated_id(product_id)
    if new_id != product_id:
        # 使用url_for自动构建新URL
        return 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、通信基础

协议：基于HTTP/HTTPS协议
数据格式：JSON为主（也可用XML、FormData等）
交互方式：

前端发起请求（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) + 1
        tasks.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": "任务不存在"}), 404
    update_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 使用方法

初始化请求

fetch('/system/score_first/score_first')

这行代码使用fetch函数发起一个GET请求到指定的URL（/system/score_first/score_first）。fetch返回一个Promise对象，该对象在请求完成后会被解析或拒绝。

处理响应

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

请求成功后，response对象包含了服务器的响应。这里使用.json()方法将响应体解析为JSON格式，并返回一个新的Promise，该Promise在解析完成后会返回解析后的JSON数据。

更新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)方法应用这些更新。

错误处理

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

如果在请求过程中发生错误（如网络问题、服务器错误等），则执行.catch方法中的回调函数，并将错误信息打印到控制台。

jQuery $.ajax 使用方法

初始化请求

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

这里使用$.ajax方法配置了一个AJAX请求。url指定了请求的URL，type指定了请求类型（GET），dataType指定了预期的服务器响应的数据类型（JSON）。

成功回调

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

当请求成功时，success回调函数被调用，并传入解析后的响应数据（data）。

错误回调

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

如果请求失败，error回调函数被调用。

🐾 （三） $. aja x 获取后端数据加载文档对象模型 ‘$ (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框架内还有很多高级用法，后续用到再进行更新吧~

Python flask入门