如何在Flask的HTML模板中执行db.execute数据库操作？

前端JavaScript无法直接调用sqlite3模块操作服务器端数据库——一方面sqlite3是Python专属模块，前端环境不支持；另一方面直接在前端操作数据库存在严重安全风险。必须通过后端API接口实现数据更新，具体步骤如下：

1. 后端Flask编写更新接口 #

在你的Flask主文件（比如app.py）中添加一个POST路由，负责接收前端请求并执行数据库UPDATE操作：

from flask import Flask, request, jsonify, render_template
import sqlite3

app = Flask(__name__)

# 渲染settings页面
@app.route('/settings')
def settings_page():
    return render_template('settings.html')

# 数据库更新接口
@app.route('/api/update-record', methods=['POST'])
def update_record():
    try:
        # 解析前端传递的JSON数据
        req_data = request.get_json()
        target_value = req_data.get('value')
        record_id = req_data.get('record_id')  # 假设用ID作为更新条件，可根据你的表结构调整

        if not target_value or not record_id:
            return jsonify({'status': 'error', 'message': '参数缺失'}), 400

        # 连接数据库执行更新（参数化查询防止SQL注入）
        conn = sqlite3.connect('administration.db')
        cursor = conn.cursor()
        # 替换为你的表名、字段名和更新条件
        cursor.execute("UPDATE your_table SET target_column = ? WHERE id = ?", 
                      (target_value, record_id))
        conn.commit()
        conn.close()

        return jsonify({'status': 'success', 'message': '数据更新完成'})
    except Exception as e:
        return jsonify({'status': 'error', 'message': str(e)}), 500

2. 前端settings.html绑定点击事件 #

在模板中给<td>绑定点击事件，通过fetch发送请求到后端接口：

<!-- 示例结构：td包含输入框，用data属性存储记录ID -->
<td onclick="handleUpdate(this)">
  <input type="text" class="update-input" value="初始值" data-record-id="1">
</td>

<script>
function handleUpdate(tdElement) {
  // 获取输入框的值和对应记录ID
  const input = tdElement.querySelector('.update-input');
  const updateValue = input.value.trim();
  const recordId = input.dataset.recordId;

  if (!updateValue) {
    alert('请输入有效内容');
    return;
  }

  // 发送POST请求到后端接口
  fetch('/api/update-record', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      value: updateValue,
      record_id: recordId
    })
  })
  .then(res => res.json())
  .then(data => {
    if (data.status === 'success') {
      alert('更新成功');
      // 可选：更新页面显示状态
    } else {
      alert(`更新失败：${data.message}`);
    }
  })
  .catch(err => {
    console.error('请求异常:', err);
    alert('网络请求出错，请稍后重试');
  });
}
</script>

关键注意事项 #

• 必须使用参数化查询（代码中的?占位符），避免SQL注入攻击
• 后端要做好异常捕获，返回清晰的错误信息
• 前端通过data-*属性传递记录标识（如ID），避免硬编码
• 可根据实际需求调整接口的参数、数据库表名和更新条件

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