Node.js新手求助：如何将客户端JS复杂数组传递至服务端并存入MongoDB？

完全不需要为数组每个元素创建HTML元素，直接通过JSON格式的HTTP请求就能把客户端数组传递到服务端，以下是具体实现步骤：

1. 客户端：用Fetch API发送数组数据 #

在你的EJS页面中，通过原生Fetch API将客户端的数组以JSON格式发送到服务端，不需要依赖表单：

// 存储canvas点击数据的数组
let canvasData = [];

// 监听canvas点击，积累数据（替换成你的实际数据逻辑）
document.querySelector('canvas').addEventListener('click', (e) => {
  canvasData.push({
    x: e.offsetX,
    y: e.offsetY,
    clickTime: Date.now()
  });
});

// 触发提交的函数（比如绑定到某个按钮点击）
document.querySelector('#save-data-btn').addEventListener('click', async () => {
  try {
    const response = await fetch('/save-canvas-data', {
      method: 'POST',
      // 告诉服务端请求体是JSON格式
      headers: {
        'Content-Type': 'application/json',
      },
      // 将数组序列化为JSON字符串
      body: JSON.stringify({ canvasData })
    });

    if (response.ok) {
      alert('数据已成功存入数据库');
      canvasData = []; // 清空数组
    } else {
      alert('数据保存失败，请重试');
    }
  } catch (err) {
    console.error('请求出错:', err);
    alert('网络请求异常');
  }
});

2. 服务端：配置Express解析JSON并处理请求 #

首先确保Express启用JSON解析中间件，然后创建接收POST请求的路由，并用Mongoose将数据存入MongoDB：

第一步：基础配置与Mongoose模型 #

const express = require('express');
const mongoose = require('mongoose');
const app = express();

// 关键：启用JSON请求体解析，必须放在路由定义之前
app.use(express.json());

// 连接MongoDB（替换成你的数据库地址）
mongoose.connect('mongodb://localhost:27017/canvas-db')
  .then(() => console.log('MongoDB连接成功'))
  .catch(err => console.error('MongoDB连接失败:', err));

// 定义Mongoose Schema与Model（根据你的数组元素结构调整字段）
const CanvasRecordSchema = new mongoose.Schema({
  canvasData: [{
    x: Number,
    y: Number,
    clickTime: Number
  }],
  createdAt: { type: Date, default: Date.now }
});

const CanvasRecord = mongoose.model('CanvasRecord', CanvasRecordSchema);

第二步：创建接收数据的路由 #

// 接收客户端POST请求的路由
app.post('/save-canvas-data', async (req, res) => {
  try {
    const { canvasData } = req.body;

    // 验证数据格式
    if (!canvasData || !Array.isArray(canvasData)) {
      return res.status(400).send('无效的数据：必须传递数组格式的canvas数据');
    }

    // 创建新记录并存入数据库
    const newRecord = new CanvasRecord({ canvasData });
    await newRecord.save();

    res.status(200).send('数据保存成功');
  } catch (err) {
    console.error('数据库保存出错:', err);
    res.status(500).send('服务器内部错误');
  }
});

// EJS模板引擎配置
app.set('view engine', 'ejs');

// 启动服务器
const PORT = 3000;
app.listen(PORT, () => console.log(`服务器运行在 http://localhost:${PORT}`));

核心说明 #

• 客户端通过JSON.stringify()将数组转为JSON字符串，放在请求体中发送，服务端通过express.json()解析后，直接在req.body中拿到原始数组
• Mongoose模型可以直接存储数组类型的字段，不需要拆分元素
• 这种方式支持任意长度的数组，完全不需要创建多余的HTML元素

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