如何使用SocketIO批量存储并发送多组数据？快餐管理系统需求

核心思路 #

放弃隐藏输入框追加数据的方式，改用JavaScript内存数组+JSON序列化管理订单数据，既能高效维护选中的食品ID，又能一次性打包发送给服务器，后续配合服务器生成订单号存入SQL即可。

具体实现方案 #

1. 前端订单数据管理 #

初始化数组存储选中的食品ID，点击食品按钮时更新数组，提交时将数组转为JSON字符串发送：

// 初始化订单数组
let orderItems = [];

// 食品按钮点击事件（假设按钮通过data-food-id存储食品ID）
document.querySelectorAll('.food-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const foodId = btn.dataset.foodId;
    // 避免重复添加同一款食品
    if (!orderItems.includes(foodId)) {
      orderItems.push(foodId);
    }
    // 实时更新页面的订单预览
    updateOrderPreview();
  });
});

// 提交订单到服务器
function submitOrder() {
  if (orderItems.length === 0) return;
  
  fetch('/api/submit-order', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ items: orderItems })
  })
  .then(res => res.json())
  .then(data => {
    // 展示服务器返回的订单编号与状态（仿麦当劳看板样式）
    showOrderStatus(data.orderId, data.status);
    // 清空本地订单数据
    orderItems = [];
    updateOrderPreview();
  });
}

// 辅助函数：更新页面订单预览
function updateOrderPreview() {
  document.getElementById('order-preview').textContent = `已选食品ID：${orderItems.join(', ')}`;
}

2. 服务器端处理与SQL存储 #

服务器接收JSON格式的订单数据后，生成唯一订单编号，将订单编号、食品ID列表存入SQL数据库（可拆分存入关联表，符合数据库设计范式）：

示例（Node.js + MySQL）：

const express = require('express');
const mysql = require('mysql2');
const app = express();
app.use(express.json());

// 数据库连接配置
const db = mysql.createConnection({
  host: 'localhost',
  user: 'your-db-user',
  password: 'your-db-pwd',
  database: 'fastfood_db'
});

// 提交订单接口
app.post('/api/submit-order', (req, res) => {
  const { items } = req.body;
  if (!items || items.length === 0) {
    return res.status(400).json({ error: '订单不能为空' });
  }

  // 生成唯一订单编号（示例：时间戳+4位随机数）
  const orderId = Date.now() + '-' + Math.floor(Math.random() * 10000);
  const status = '待制作'; // 初始状态

  // 插入主订单表
  const insertOrderSql = `INSERT INTO orders (order_id, status, created_at) VALUES (?, ?, NOW())`;
  db.query(insertOrderSql, [orderId, status], (err) => {
    if (err) throw err;

    // 插入订单详情表（拆分食品ID，便于后续统计查询）
    const insertDetailSql = `INSERT INTO order_details (order_id, food_id) VALUES ?`;
    const detailValues = items.map(id => [orderId, id]);
    db.query(insertDetailSql, [detailValues], (err) => {
      if (err) throw err;
      // 返回订单信息给前端
      res.json({ orderId, status });
    });
  });
});

app.listen(3000, () => console.log('服务器已启动'));

3. 备选方案：LocalStorage持久化未提交订单 #

如果需要页面刷新后保留未提交的订单，可将数组同步存入LocalStorage：

// 页面加载时恢复订单数据
window.addEventListener('load', () => {
  const savedOrder = localStorage.getItem('pendingOrder');
  if (savedOrder) {
    orderItems = JSON.parse(savedOrder);
    updateOrderPreview();
  }
});

// 更新订单数组时同步到LocalStorage
function updateOrderArray(foodId) {
  if (!orderItems.includes(foodId)) {
    orderItems.push(foodId);
    localStorage.setItem('pendingOrder', JSON.stringify(orderItems));
  }
}

方案优势 #

• 比隐藏输入框追加数据更易维护，避免字符串拼接的混乱
• 数组操作灵活，可轻松实现添加、删除、去重等逻辑
• JSON序列化后传输数据体积小，服务器解析成本低
• 配合数据库关联表存储，符合SQL设计范式，便于后续订单查询与统计

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