如何通过HTML按钮增减Flask路由中app.py的num变量并刷新显示？

你的原代码里num是视图函数的局部变量，每次请求页面都会被重置为1，没法保存状态。要实现点击按钮增减数值并刷新展示的效果，得用Flask的session来在多次请求间维持数值状态——因为HTTP是无状态协议，session可以帮我们存储用户的状态数据。

后端代码修改 #

先配置SECRET_KEY用于session加密，再在路由里处理增减请求：

from flask import Flask, render_template, request, session

app = Flask(__name__)
app.secret_key = 'your_custom_secret_key'  # 替换成任意字符串作为加密密钥

@app.route('/', methods=['GET', 'POST'])
def note():
    # 首次访问时初始化session里的num为1
    if 'num' not in session:
        session['num'] = 1
    
    # 处理POST请求（更安全，推荐用这种）
    if request.method == 'POST':
        action = request.form.get('action')
        if action == 'add':
            session['num'] += 1
        elif action == 'sub' and session['num'] > 0:  # 可选：防止数值变成负数
            session['num'] -= 1
    
    # 处理GET请求（简单直观，适合小型场景）
    elif request.method == 'GET':
        if request.args.get('add'):
            session['num'] += 1
        elif request.args.get('sub') and session['num'] > 0:
            session['num'] -= 1
    
    num = session['num']
    return render_template('home.html', num=num)

前端模板（home.html） #

提供两种实现方式，选其中一种就行：

方式1：表单POST请求（推荐）

<!DOCTYPE html>
<html>
<head>
    <title>数值计数器</title>
</head>
<body>
    <h2>当前数值：{{ num }}</h2>
    <form method="POST" action="/">
        <button type="submit" name="action" value="add">加1</button>
        <button type="submit" name="action" value="sub">减1</button>
    </form>
</body>
</html>

方式2：链接GET请求

<!DOCTYPE html>
<html>
<head>
    <title>数值计数器</title>
</head>
<body>
    <h2>当前数值：{{ num }}</h2>
    <a href="/?add=1"><button>加1</button></a>
    <a href="/?sub=1"><button>减1</button></a>
</body>
</html>

原理说明 #

session会把数值加密后存在客户端Cookie里，每次请求时Flask自动读取解密，修改后再加密返回给客户端，以此实现跨请求的状态保持。如果是多用户使用，每个用户的session数据相互独立，不会互相干扰。

内容的提问来源于stack exchange，提问作者Mt Khalifa