如何在Express.js服务中将后端变量注入HTML文件？

当然有办法解决这个问题！你当前的代码是直接发送静态HTML文件，所以没法直接把变量n传递进去，不过我们可以通过几种常用的方式实现变量注入，同时先提醒你一个小问题：你的app.listen(3000)放在了路由处理函数里，这会导致每次访问根路径都尝试启动服务器，会抛出错误，记得把它移到路由外面，只执行一次哦。

下面给你三种实用的方案：

方案一：使用模板引擎（推荐，适合动态页面场景） #

Express支持多种模板引擎，比如EJS、Pug，这里以EJS为例，它和HTML语法很接近，学习成本低：

1. 先安装EJS：

npm install ejs

2. 修改你的Express代码，配置模板引擎并使用render方法传递变量：

var express = require('express'); 
var app = express();
var n = 3;

// 设置EJS为视图引擎
app.set('view engine', 'ejs');
// 如果想保留.html后缀的文件，可以额外配置这一行
// app.engine('html', require('ejs').renderFile);

app.get('/', function(req,res) { 
  // 把变量n作为参数传递给模板
  res.render('index', { n: n });
});

// 把listen移到外面，只启动一次服务器
app.listen(3000);

3. 修改你的HTML文件（如果用EJS后缀就改成index.ejs，如果配置了html引擎就保留index.html），在需要显示变量的地方用<%= n %>输出：

<p>变量n的值是：<%= n %></p>

方案二：手动读取文件并替换占位符（适合不想用模板引擎的简单场景） #

如果不想引入模板引擎，可以直接用Node的fs模块读取HTML文件，替换里面的占位符：

1. 修改Express代码：

var express = require('express'); 
var app = express();
var fs = require('fs');
var n = 3;

app.get('/', function(req,res) { 
  // 读取index.html文件
  fs.readFile(__dirname + '/index.html', 'utf8', function(err, data) {
    if (err) {
      return res.status(500).send('加载页面出错');
    }
    // 替换文件中的占位符，比如我们用{{n}}作为标记
    var updatedHtml = data.replace('{{n}}', n);
    res.send(updatedHtml);
  });
});

app.listen(3000);

2. 在index.html中添加占位符：

<p>变量n的值是：{{n}}</p>

方案三：前端通过API请求获取变量（适合完全静态的HTML页面） #

如果你的HTML页面需要保持纯静态，不想做任何修改，可以新增一个API端点让前端请求获取变量：

1. 修改Express代码，添加API路由并提供静态文件服务：

var express = require('express'); 
var app = express();
var n = 3;

// 启用静态文件服务，让index.html能正常访问
app.use(express.static(__dirname));

app.get('/', function(req,res) { 
  res.sendFile(__dirname + '/index.html');
});

// 新增API端点，返回变量n的值
app.get('/api/get-n', function(req,res) {
  res.json({ n: n });
});

app.listen(3000);

2. 在index.html中用JavaScript请求API并渲染变量：

<p>变量n的值是：<span id="n-value"></span></p>

<script>
// 发送请求获取变量
fetch('/api/get-n')
  .then(res => res.json())
  .then(data => {
    // 将变量值插入到页面中
    document.getElementById('n-value').textContent = data.n;
  })
  .catch(err => console.error('请求出错：', err));
</script>

选择哪种方案取决于你的实际场景：如果页面有较多动态内容，模板引擎是最优选择；如果只是简单替换几个变量，手动替换占位符就足够；如果要保持HTML完全静态，用API请求的方式更合适。

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