Node.js+Express项目：DOM触发数据库操作的结构规划与报错解决

你犯了一个典型的前后端代码混淆的错误：insertData.js是Node.js后端代码（依赖Node.js模块、MongoDB客户端等仅在服务器环境存在的资源），直接在前端HTML里引入会导致浏览器无法识别这些后端依赖，自然报错。

正确的做法是通过前后端接口通信实现需求，步骤如下：

1. 调整项目结构（规范前后端分离） #

确保前端静态资源（HTML、前端JS、CSS）统一放在public文件夹下，后端代码在根目录：

你的项目/
├── app.js          # Express入口
├── insertData.js   # 后端数据库操作逻辑
└── public/
    ├── index.html  # 前端页面
    └── script.js   # 前端交互逻辑（原想在insertData里写的DOM操作放这）

2. 改造后端代码 #

app.js（Express服务器） #

添加接口路由，接收前端提交的用时数据：

const express = require('express');
const app = express();
const insertData = require('./insertData');

// 解析JSON请求体
app.use(express.json());
// 托管前端静态资源
app.use(express.static('public'));

// 定义提交用时的POST接口
app.post('/api/submit-time', async (req, res) => {
  try {
    const { time } = req.body;
    await insertData.saveUserTime(time);
    res.status(200).json({ success: true, msg: '用时已保存' });
  } catch (err) {
    console.error(err);
    res.status(500).json({ success: false, msg: '保存失败' });
  }
});

app.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000');
});

insertData.js（专注数据库操作） #

只保留后端数据库逻辑，暴露调用方法：

const mongoose = require('mongoose');

// 连接MongoDB
mongoose.connect('mongodb://localhost:27017/your-db-name')
  .then(() => console.log('MongoDB连接成功'))
  .catch(err => console.error('MongoDB连接失败', err));

// 定义用时记录模型
const TimeRecordSchema = new mongoose.Schema({
  time: Number,
  createTime: { type: Date, default: Date.now }
});
const TimeRecord = mongoose.model('TimeRecord', TimeRecordSchema);

// 暴露保存用时的方法
exports.saveUserTime = async (time) => {
  const record = new TimeRecord({ time });
  await record.save();
};

3. 前端代码实现交互 #

index.html #

引入前端专属的交互JS，不要碰后端代码：

<!DOCTYPE html>
<html>
<head>
  <title>计时游戏</title>
</head>
<body>
  <!-- 你的游戏界面 -->
  <p>你的用时：<span id="userTime">0</span>秒</p>
  <button id="submitBtn">提交用时</button>

  <script src="script.js"></script>
</body>
</html>

script.js（前端交互逻辑） #

监听按钮点击，发送请求到后端接口：

const submitBtn = document.getElementById('submitBtn');
const userTimeEl = document.getElementById('userTime');

submitBtn.addEventListener('click', async () => {
  // 从游戏逻辑中获取实际用时，这里用示例值代替
  const userTime = Number(userTimeEl.textContent);

  try {
    const res = await fetch('/api/submit-time', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ time: userTime })
    });
    const result = await res.json();
    alert(result.msg);
  } catch (err) {
    console.error('提交出错', err);
    alert('提交失败，请重试');
  }
});

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