使用Flask+PostgreSQL时如何实现客户端画布数据动态同步至数据库？

错误原因 #

1. pg是Node.js服务端专用的PostgreSQL连接库，无法在浏览器环境的前端代码中运行，自然会报pg is not defined错误。
2. 前端直连数据库是完全不可行的方案：数据库连接凭证会明文暴露在前端代码中，所有访问网站的用户都能拿到权限直接删改全量数据，风险极高。

实现方案 #

结合你使用Flask做后端的技术栈，正确实现逻辑为前端发请求给后端，由后端完成数据库更新操作，具体分两步：

步骤1：编写Flask后端更新接口

首先安装所需依赖：

pip install flask psycopg2-binary flask-cors

在Flask入口文件（如app.py）中添加更新接口：

from flask import Flask, request, jsonify
from flask_cors import CORS
import psycopg2

app = Flask(__name__)
CORS(app) # 解决前端跨域请求问题

# 数据库连接配置，仅服务端可见
DB_CONFIG = {
    "host": "localhost",
    "database": "sketch2photo",
    "user": "postgres",
    "password": "database1",
    "port": 5432
}

@app.post("/api/update_element")
def update_element():
    params = request.get_json()
    target_id = params.get("target_id")
    targetx = params.get("targetx")
    targety = params.get("targety")
    sizex = params.get("sizex")
    sizey = params.get("sizey")
    
    if not all([target_id, targetx, targety, sizex, sizey]):
        return jsonify({"status": "error", "msg": "参数缺失"}), 400
    
    try:
        conn = psycopg2.connect(**DB_CONFIG)
        cur = conn.cursor()
        cur.execute("""
            UPDATE files 
            SET targetx = %s, targety = %s, sizex = %s, sizey = %s 
            WHERE target_id = %s
        """, (targetx, targety, sizex, sizey, target_id))
        conn.commit()
        cur.close()
        conn.close()
        return jsonify({"status": "success", "msg": "参数更新成功"})
    except Exception as e:
        return jsonify({"status": "error", "msg": str(e)}), 500

if __name__ == "__main__":
    app.run(debug=True)

步骤2：修改前端请求逻辑

删除原有前端代码中所有PostgreSQL连接相关内容，替换为调用后端接口的逻辑：

async function handleMouseOut(e){
    selver = -1
    selimg = -1
    draggingImage = false 

    // 可优化：仅更新当前被修改的元素，无需全量遍历，减少性能消耗
    for (let i = 0; i < images.length; i++) {
        const img = images[i];
        try {
            const res = await fetch("http://localhost:5000/api/update_element", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    target_id: i,
                    targetx: img.ul.x,
                    targety: img.ul.y,
                    sizex: img.ur.x - img.ul.x,
                    sizey: img.ll.y - img.ul.y
                })
            })
            const data = await res.json()
            if (data.status === "success") {
                console.log(`元素${i}参数更新成功`)
            } else {
                console.error(`元素${i}更新失败:`, data.msg)
            }
        } catch (err) {
            console.error(`请求失败:`, err)
        }
    }
}

优化建议 #

• 给元素增加isModified标记，仅更新被用户修改过的元素，减少不必要的接口请求和数据库操作。
• 上线前增加用户身份校验逻辑，确保用户只能修改自己创建的元素，避免数据被恶意篡改。
• 后端数据库连接可改用连接池实现，避免每次请求新建连接，提升服务性能。

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