如何从Node.js路由向HTML脚本传递MongoDB的JSON数据？

嘿，我完全懂你不想折腾模板引擎、不想用文件中转的心情，这里有两个不用学新东西就能搞定的优雅方案，完美适配你的需求：

方案一：直接在HTML中注入全局数据（无需模板引擎） #

这个方法本质是把MongoDB数据转换成JSON字符串，直接嵌到HTML里变成全局变量，前端脚本直接就能用，完全不用依赖模板引擎：

步骤1：修改app.js的路由逻辑 #

先从MongoDB获取数据，再读取index.html内容，把预设的占位符替换成实际数据：

const fs = require('fs');
const path = require('path');

// 假设你已经有MongoDB的模型定义，比如YourModel
app.use("/", async (req, res) => {
  try {
    // 从MongoDB查询数据，lean()返回普通JSON对象，方便后续处理
    const mongoData = await YourModel.find().lean();
    // 读取index.html文件的原始内容
    const rawHtml = fs.readFileSync(path.join(__dirname, "index.html"), 'utf8');
    // 把HTML中的占位符{{MONGO_DATA}}替换成JSON格式的数据
    const finalHtml = rawHtml.replace('{{MONGO_DATA}}', JSON.stringify(mongoData));
    res.send(finalHtml);
  } catch (err) {
    console.error('Failed to load data or HTML:', err);
    res.status(500).send('Server error');
  }
});

步骤2：修改index.html的脚本 #

在你的填充脚本前，先定义一个全局变量接收注入的数据：

<!-- 先注入全局数据 -->
<script>
  const mongoData = {{MONGO_DATA}};
</script>

<!-- 你的填充下拉框脚本 -->
<script>
  document.addEventListener("DOMContentLoaded", function() {
    // 注意：如果mongoData是对象，用Object.entries遍历更安全（避免遍历原型链）
    for (const [key, value] of Object.entries(mongoData)) {
      const option = document.createElement('option');
      option.innerHTML = key; // 这里可以根据你的数据结构改成value或者其他字段
      option.value = key;
      document.getElementById('Active_Sessions').append(option);
    }
  });
</script>

这个方法的优势是简单直接，没有额外的网络请求，适合数据不怎么变动的场景。

方案二：前端通过Fetch请求API接口获取数据（更符合现代开发规范） #

这个方法是前后端分离的思路，前端主动请求后端提供的API接口拿数据，更灵活也更规范，而且完全不用修改HTML的静态内容：

步骤1：在app.js中新增API路由 #

专门用来返回MongoDB的数据：

// 假设你已经有MongoDB的模型定义YourModel
app.get("/api/mongo-data", async (req, res) => {
  try {
    const mongoData = await YourModel.find().lean();
    res.json(mongoData);
  } catch (err) {
    console.error('Failed to fetch data:', err);
    res.status(500).json({ error: 'Failed to load data from database' });
  }
});

// 原有的返回index.html的路由保持不变
app.use("/",(req,res) => {
  res.sendFile(__dirname + "/index.html")
});

步骤2：修改前端脚本用Fetch获取数据 #

把原来的直接遍历mongoData改成先请求API再处理：

<script>
  document.addEventListener("DOMContentLoaded", async function() {
    try {
      // 请求后端的API接口获取数据
      const response = await fetch('/api/mongo-data');
      if (!response.ok) throw new Error('Failed to fetch data');
      const mongoData = await response.json();

      // 填充下拉框的逻辑和之前一致
      for (const [key, value] of Object.entries(mongoData)) {
        const option = document.createElement('option');
        option.innerHTML = key;
        option.value = key;
        document.getElementById('Active_Sessions').append(option);
      }
    } catch (err) {
      console.error('Error loading data:', err);
      // 可以在这里加个友好的错误提示，比如给用户显示"加载失败"
    }
  });
</script>

这个方法的优势是扩展性强，比如后续数据更新了，前端可以不用刷新页面直接重新请求API，也更符合前后端职责分离的原则。

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