Node.js无需模板引擎：能否直接向现成HTML文件传递数据？

完全可以不借助模板引擎向现成HTML文件传递数据，模板引擎绝对不是必需的。下面给你两种实用的实现方式：

方法一：后端读取HTML后替换占位符 #

直接用Node.js的文件系统模块读取HTML文件，把文件里预先定义的占位符（比如{{xxx}}）替换成你要传递的数据，再返回给客户端。

示例代码（Express）：

const express = require('express');
const fs = require('fs').promises;
const app = express();

app.get('/', async (req, res) => {
  try {
    // 读取本地的HTML文件
    let htmlContent = await fs.readFile('./public/index.html', 'utf8');
    // 准备要传递的数据
    const userInfo = { nickname: 'Swifty', skill: 'Express入门' };
    // 替换HTML里的占位符
    htmlContent = htmlContent.replace('{{nickname}}', userInfo.nickname)
                             .replace('{{skill}}', userInfo.skill);
    // 返回处理后的HTML
    res.send(htmlContent);
  } catch (err) {
    res.status(500).send('加载页面失败');
  }
});

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

对应的index.html片段：

<div class="user-card">
  <h3>昵称：{{nickname}}</h3>
  <p>技能：{{skill}}</p>
</div>

方法二：前端通过接口动态拉取数据 #

后端只提供数据接口（返回JSON格式），前端HTML页面加载完成后，用fetch请求接口拿到数据，再通过DOM操作把数据渲染到页面上。

示例后端接口：

app.get('/api/user-data', (req, res) => {
  res.json({ nickname: 'Swifty', skill: 'Express入门' });
});

前端HTML里的JS逻辑：

<script>
window.onload = async () => {
  // 请求后端数据接口
  const resp = await fetch('/api/user-data');
  const userInfo = await resp.json();
  // 把数据渲染到页面
  document.querySelector('.nickname').textContent = userInfo.nickname;
  document.querySelector('.skill').textContent = userInfo.skill;
};
</script>

<div class="user-card">
  <h3>昵称：<span class="nickname"></span></h3>
  <p>技能：<span class="skill"></span></p>
</div>

总结 #

模板引擎（比如EJS、Pug）的作用是简化后端数据与HTML视图的绑定流程，让你不用手动写占位符替换逻辑，但它不是实现数据传递的唯一方式。如果你的需求简单，上面两种方法完全够用；如果页面复杂、数据量大，再考虑引入模板引擎提升开发效率。

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