如何将数据从客户端动态发送到数据库？

Question

我正在尝试建立一个允许用户制作草图的网站。与草图一起，用户传入targetX、targetY、sizeX 和sizeY 等值，指定最终草图的尺寸和目标顶点。用户绘制元素并单击保存后，该元素将添加到右侧的另一个画布，其中包含用户到目前为止绘制的所有元素。此画布还允许用户调整元素的大小并将其拖动到用户希望它们在草图中的任何位置。我正在使用 Flask 来托管网站，并使用 PostgreSQL 来存储元素和上述值。

网页看起来像这样：

对于当前的草图画布，我想要做的是，当用户拖动元素并调整其大小时，我想同时更新数据库中的这些值。

PostgreSQL 数据库如下所示（数据列被截断以适合此处）：

我试图做的是：

var pg = require('pg');
var conString = "postgres://postgres:database1@localhost:5432/sketch2photo";
client = new pg.Client(conString);

然后在代码中我尝试将值更新为：

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

    var client = new Client(conString);
    client.connect();

    images.forEach((img, i) => {
        //update the target values in the database
        client.query("UPDATE files SET targetx = $1, targety = $2, sizex = $3, sizey = $4 WHERE target_id = $5", [img.ul.x, img.ul.y, img.ur.x - img.ul.x, img.ll.y - img.ul.y, i], (err, res) => {
            if (err) {
                console.log(err.stack);
            } else {
                console.log("target updated");
            }
        });

    })
    client.end();
}

但这不起作用，并显示pg is not defined 并且还弄乱了画布的其他功能。我试图搜索更多关于它的信息，我发现我们无法从客户端连接到数据库，因为它可能会引起安全问题。我该如何继续执行此操作？

我对 JavaScript 和 Web 开发非常陌生，因此任何输入都会非常有帮助。

Answer 1

您不应该连接到数据库客户端，即从浏览器。如果您查看pg 的兼容性，它适用于nodejs

您不应该从浏览器连接的主要原因是您将暴露任何身份验证凭据。如 cmets 中所述，您应该通过应用程序服务器连接到数据库，例如express 并让浏览器中的客户端调用服务器上的 API 端点