如何将Node.js的值传递至HTML供JS处理？能否作为HTML内JS参数？

嘿，你的两个问题本质上是同一个需求——把Node.js里的数据（不管是你定义的num，还是从数据库查询到的rows）传递给前端HTML页面的JavaScript使用对吧？我看了你当前的代码，核心问题是你直接把HTML文件原封不动返回给浏览器，服务器端的变量是在后端环境里的，前端完全访问不到。下面给你几个可行的解决方案，结合你的代码调整：

方案一：使用模板引擎（推荐，适合服务端渲染场景） #

模板引擎能让你直接在HTML文件里嵌入后端数据，Express支持很多模板引擎，比如EJS（语法和HTML接近，上手快）。

步骤1：安装并配置EJS #

首先安装EJS：

npm install ejs

然后修改你的app.js，添加模板引擎配置：

const express = require('express');
const path = require('path'); // 引入path模块处理文件路径
const app = express();
const idxRouter = require('./router/index.js');

// 设置模板引擎为EJS
app.set('view engine', 'ejs');
// 设置视图文件的存放目录（假设你把模板文件放在项目根目录的views文件夹里）
app.set('views', path.join(__dirname, 'views'));

app.use('/', idxRouter);

// 启动服务器
app.listen(3000, () => {
  console.log('服务器运行在3000端口');
});

步骤2：修改路由代码，传递数据到模板 #

把你的router/index.js改成这样（一定要用参数化查询防止SQL注入，你原来直接拼接num到SQL里很危险）：

const express = require('express');
const router = express.Router();
const db = require('../dbconfig/db');
const num = 2;

router.get('/', function(req,res){
  // 用参数化查询替代字符串拼接，避免SQL注入
  db.query('SELECT a.explain from explain a where no = ?', [num], function (err, rows) {
    if (err) {
      console.log(err);
      return res.status(500).send('数据库查询出错');
    }
    console.log(rows);
    // 渲染模板，把查询到的rows数据以data的名字传给模板
    res.render('index', { data: rows });
  });
});

module.exports = router;

步骤3：修改HTML为EJS模板，嵌入数据 #

把原来的index.html移动到views文件夹里，改名为index.ejs，然后在合适的位置（比如body标签末尾）添加脚本，直接使用后端传过来的数据：

<!-- 保留你原来的HTML内容 -->
<body>
  <!-- 你的页面内容 -->
  
  <script>
    // 用<%- %>把后端数据转成JSON字符串，前端JS就能直接用了
    const serverData = <%- JSON.stringify(data) %>;
    console.log('来自Node.js的数据：', serverData);
    // 这里可以对serverData做任何你需要的处理
  </script>
</body>

方案二：通过API接口异步请求数据（适合单页应用/动态加载场景） #

如果不想用模板引擎，也可以在后端写一个API接口，前端页面加载后用JavaScript异步请求数据。

步骤1：添加API路由 #

在router/index.js里新增一个路由：

// 新增API接口，返回数据库查询的数据
router.get('/api/get-data', (req, res) => {
  db.query('SELECT a.explain from explain a where no = ?', [num], (err, rows) => {
    if (err) {
      return res.status(500).json({ error: '数据库查询失败' });
    }
    // 把数据以JSON格式返回给前端
    res.json(rows);
  });
});

步骤2：前端HTML里的JavaScript请求数据 #

修改你的index.html，添加异步请求的代码：

<body>
  <!-- 你的页面内容 -->
  
  <script>
    // 页面加载完成后请求数据
    window.addEventListener('load', async () => {
      try {
        // 调用后端API
        const response = await fetch('/api/get-data');
        const serverData = await response.json();
        console.log('从API获取的数据：', serverData);
        // 在这里处理数据
      } catch (error) {
        console.error('请求数据出错：', error);
      }
    });
  </script>
</body>

为什么你原来的代码不行？ #

你之前是用fs.readFileSync直接读取HTML文件然后返回，这个过程中HTML文件完全是静态的，后端的num和rows变量只存在于服务器的内存里，浏览器拿到的就是纯HTML，根本不知道这些变量的存在。上面的两种方案都是把数据“注入”到前端能访问到的地方——要么在服务器端渲染的时候把数据写到HTML里，要么让前端主动去后端拿数据。

内容的提问来源于stack exchange，提问作者하재훈