点击HTML元素后如何更新Flask应用数据库中的用户积分？

你遇到的核心问题是前端JavaScript无法直接操作后端数据库，必须通过前后端交互的方式：前端发送请求到后端接口，由后端完成数据库的更新操作。下面是完整的实现方案：

1. 后端新增积分更新API接口 #

首先在你的Flask蓝图中添加一个POST路由，专门处理用户积分增加的请求（用POST而非GET，因为这是修改数据的操作，更符合REST规范，也更安全）：

from flask import jsonify, request

@bp.route('/add-points', methods=['POST'])
@login_required
def add_points():
    # 获取当前登录用户
    user = current_user
    # 这里可以固定加20积分，也可以从请求体接收自定义数值（比如不同活动加不同分）
    add_amount = request.json.get('points', 20)
    user.points += add_amount
    db.session.commit()
    # 返回更新后的积分和成功状态
    return jsonify({
        'success': True,
        'new_points': user.points
    })

把积分增加的逻辑放在后端，能避免前端篡改积分数值（比如用户修改JS里的20为1000），确保业务规则的安全性。

2. 修改前端JavaScript发送请求 #

更新你的getPoints函数，使用fetch API向后端的/add-points接口发送请求，完成积分更新，同时可以同步更新页面上的积分显示：

<!-- 先在页面上添加一个显示当前积分的元素，方便用户直观查看 -->
<div class="w3-margin">当前积分：<span id="user-points">{{ current_user.points }}</span></div>

<a data-toggle="collapse" class="w3-large" href="#tip4" onclick="getPoints(this)">点击获取20积分</a>

<script>
async function getPoints(elem) {
    // 点击后暂时禁用元素，防止重复提交
    elem.disabled = true;
    try {
        // 发送POST请求到后端接口
        const response = await fetch('/add-points', {
            method: 'POST',
            // 启用CSRF保护的Flask应用必须携带这个令牌，否则请求会被拒绝
            headers: {
                'X-CSRFToken': getCookie('csrf_token'),
                'Content-Type': 'application/json'
            },
            // 如果需要传递自定义积分值，可以在这里传
            // body: JSON.stringify({ points: 20 })
        });

        const data = await response.json();
        if (data.success) {
            // 更新页面上显示的积分
            document.getElementById('user-points').textContent = data.new_points;
            alert('积分已增加！当前积分：' + data.new_points);
        } else {
            alert('积分更新失败，请稍后重试');
        }
    } catch (error) {
        console.error('请求出错:', error);
        alert('网络错误，无法更新积分');
    } finally {
        // 请求完成后恢复元素可点击状态
        elem.disabled = false;
    }
}

// 辅助函数：获取Flask-WTF生成的CSRF令牌
function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
</script>

3. 关键注意事项 #

• CSRF保护：如果你的Flask应用使用了Flask-WTF（通常表单验证会用到），POST请求必须携带CSRF令牌，否则会被后端拒绝，上面的getCookie函数就是用来获取这个令牌的。
• 重复提交防护：通过禁用点击元素的方式，避免用户短时间内多次点击导致积分重复增加。
• 业务逻辑扩展：如果不同活动需要增加不同积分，可以在前端请求时通过body传递数值，后端接收后处理，让接口更灵活。

内容的提问来源于stack exchange，提问作者Asif Hasan