如何将客户端动态更新的数组传入Express路由并写入PostgreSQL数据库

我开发了一款基于Google Maps API的地点搜索应用，每次用户搜索新地点时，前端app.js里的markersData数组会动态更新。我需要把这个数组的数据通过Express路由写入PostgreSQL数据库，但之前尝试用module.exports导出数组到后端路由文件的方法行不通（客户端代码无法被Node.js直接引用），想知道最优的实现方案。

最优方案是通过HTTP POST请求将前端数据传递到后端接口，这是前后端分离场景下数据交互的标准方式，具体实现步骤如下：

1. 前端修改：发送POST请求传递数据 #

在前端places_changed事件处理逻辑中，每次更新markersData后（或触发用户保存操作时），将新增标记数据和所需的mapId一起发送到后端接口。以下是用原生fetch实现的代码：

let markersData = [];

searchBox.addListener("places_changed", () => {
  const places = searchBox.getPlaces();
  if (places.length == 0) return;

  const bounds = new google.maps.LatLngBounds();
  const newMarkers = []; // 存储本次新增的标记，避免重复发送全部数据

  places.forEach((place) => {
    if (!place.geometry || !place.geometry.location) {
      console.log("Returned place contains no geometry");
      return;
    }

    const lat = place.geometry.location.lat();
    const lng = place.geometry.location.lng();
    const name = place.name;
    const marker = { lat, lng, name };
    
    markersData.push(marker);
    newMarkers.push(marker); // 收集本次新增的标记

    if (place.geometry.viewport) {
      bounds.union(place.geometry.viewport);
    } else {
      bounds.extend(place.geometry.location);
    }
  });

  // 发送POST请求到后端接口，mapId需替换为实际获取逻辑（如URL参数、用户会话）
  const mapId = 1; // 示例值，根据业务场景调整
  fetch("/api/markers", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ markers: newMarkers, mapId }),
  })
  .then(response => response.json())
  .then(data => console.log("数据保存成功:", data))
  .catch(error => console.error("保存失败:", error));
});

2. 后端修改：编写POST路由处理数据 #

修改Express路由文件，创建POST接口接收前端数据，批量写入PostgreSQL：

const express = require('express');
const router = express.Router();
const db = require('../db/connection');

// 处理标记数据的POST请求
router.post('/api/markers', async (req, res) => {
  try {
    const { markers, mapId } = req.body;

    // 参数校验
    if (!markers || !Array.isArray(markers) || !mapId) {
      return res.status(400).json({ error: "缺少必要参数" });
    }

    // 批量插入数据，使用Promise.all处理多请求，或改用PostgreSQL批量语法优化性能
    const insertPromises = markers.map(marker => {
      const query = `
        INSERT INTO points (latitude, longitude, name, map_id)
        VALUES ($1, $2, $3, $4)
        RETURNING *;
      `;
      return db.query(query, [marker.lat, marker.lng, marker.name, mapId]);
    });

    const results = await Promise.all(insertPromises);
    const insertedRows = results.reduce((total, result) => total + result.rowCount, 0);
    
    res.status(200).json({ message: `成功插入${insertedRows}条数据` });
  } catch (err) {
    console.error(err);
    res.status(500).json({ error: "数据库插入失败" });
  }
});

module.exports = router;

关键注意事项 #

• 防重复插入：给points表添加唯一约束（如(latitude, longitude, map_id)），避免同一位置重复写入。
• mapId安全：若mapId和用户会话绑定，建议从后端session/JWT令牌中获取，不要完全依赖前端传递，防止篡改。
• 错误处理：前端需处理网络错误、后端返回异常的情况；后端返回清晰的错误信息，便于调试。
• 性能优化：若一次新增大量标记，改用PostgreSQL批量插入语法（如VALUES (...), (...), (...)），减少数据库请求次数。

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