如何通过HTML按钮修改Flask路由中app.py的变量num？

你当前代码里的num是路由函数的局部变量，每次请求都会重新赋值为1，根本没法保存状态。要实现持久的加减功能，得用**会话（session）**存储数值（适合用户独立计数场景），或用全局存储方案（适合所有用户共享计数），下面先讲最常用的用户独立计数实现方式：

1. 修改Flask后端代码（app.py） #

需要配置SECRET_KEY启用session，用session保存num的状态：

from flask import Flask, render_template, session, redirect, url_for

app = Flask(__name__)
# 必须设置secret_key才能使用session，可自行替换为任意字符串
app.secret_key = 'your_custom_secret_key'

@app.route('/')
def note():
    # 初始化session中的num，不存在则设为1
    if 'num' not in session:
        session['num'] = 1
    return render_template('home.html', num=session['num'])

# 处理加1请求
@app.route('/increment')
def increment():
    session['num'] = session.get('num', 1) + 1
    # 重定向回首页刷新显示新数值
    return redirect(url_for('note'))

# 处理减1请求，可选限制最小值为0
@app.route('/decrement')
def decrement():
    session['num'] = max(session.get('num', 1) - 1, 0)
    return redirect(url_for('note'))

2. 编写HTML模板（templates/home.html） #

用表单+按钮触发加减请求，也可以用<a>标签直接跳转路由：

<!DOCTYPE html>
<html>
<head>
    <title>数值计数器</title>
</head>
<body>
    <h1>当前数值：{{ num }}</h1>
    <!-- 加1按钮 -->
    <form action="{{ url_for('increment') }}" method="GET">
        <button type="submit">加1</button>
    </form>
    <!-- 减1按钮 -->
    <form action="{{ url_for('decrement') }}" method="GET" style="margin-top: 10px;">
        <button type="submit">减1</button>
    </form>
</body>
</html>

额外补充（无刷新更新方案） #

如果想要页面不刷新就更新数值，可以用AJAX实现：

修改HTML模板 #

<!DOCTYPE html>
<html>
<head>
    <title>无刷新计数器</title>
</head>
<body>
    <h1 id="num-display">当前数值：{{ num }}</h1>
    <button onclick="updateNum('increment')">加1</button>
    <button onclick="updateNum('decrement')" style="margin-left: 10px;">减1</button>

    <script>
        function updateNum(action) {
            fetch(`/${action}`)
                .then(response => response.json())
                .then(data => {
                    document.getElementById('num-display').textContent = `当前数值：${data.num}`;
                });
        }
    </script>
</body>
</html>

修改后端路由（返回JSON而非重定向） #

@app.route('/increment')
def increment():
    session['num'] = session.get('num', 1) + 1
    return {'num': session['num']}

@app.route('/decrement')
def decrement():
    session['num'] = max(session.get('num', 1) - 1, 0)
    return {'num': session['num']}

关键说明 #

• 用session的原因：HTTP请求是无状态的，局部变量num会在请求结束后销毁，session可在用户的多次请求间保留状态（数据加密存储在客户端cookie或服务器端）。
• 若要实现全局共享计数（所有用户看到同一个数值），不建议用全局变量（多线程环境下有线程安全问题），更可靠的方式是用数据库（如SQLite）或Redis存储数值。

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