Express.js如何将服务端变量传递至客户端并用于HTML渲染？

你当前用的res.sendFile只能返回静态HTML文件，无法直接注入服务端变量，可根据你的业务场景选择以下三种实现方案：

方案1：使用服务端模板引擎（常规场景首选） #

这是最通用的服务端渲染方案，以常用的EJS模板引擎为例：

1. 安装依赖：npm install ejs
2. 修改server.js配置：

const express = require('express');
const path = require('path');
const app = express();

// 配置视图引擎和模板存放目录
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

// 你的flag变量，初始值为false
let flag = false;

app.get('/', (req, res) => {
    // 渲染模板并传入服务端变量
    res.render('UiOfServer', { flag: flag });
});

3. 将原views/UiOfServer.html重命名为views/UiOfServer.ejs，添加渲染逻辑：

<!DOCTYPE html>
<html>
<body>
  <% if (flag) { %>
    <h1>flag为true时展示的标题</h1>
  <% } else { %>
    <!-- flag为false时的其他渲染逻辑 -->
    <p>当前flag状态为false</p>
  <% } %>
</body>
</html>

方案2：无需模板引擎，直接注入全局JS变量 #

如果不想引入模板引擎，可通过替换HTML占位符的方式注入变量，适合轻量场景：

1. server.js修改为：

const express = require('express');
const path = require('path');
const fs = require('fs/promises');
const app = express();

let flag = false;

app.get('/', async (req, res) => {
    // 读取静态HTML文件内容
    const htmlPath = path.join(__dirname, '/views/UiOfServer.html');
    let htmlContent = await fs.readFile(htmlPath, 'utf-8');
    // 序列化服务端变量注入到HTML
    const serverData = JSON.stringify({ flag: flag });
    htmlContent = htmlContent.replace('{{SERVER_DATA}}', serverData);
    res.send(htmlContent);
});

2. 在UiOfServer.html中添加逻辑接收变量：

<script>
// 解析服务端注入的变量
const serverData = JSON.parse('{{SERVER_DATA}}');
if (serverData.flag) {
  const h1 = document.createElement('h1');
  h1.textContent = 'flag为true时展示的标题';
  document.body.appendChild(h1);
} else {
  // flag为false时的其他逻辑
  console.log('flag为false，执行对应操作');
}
</script>

方案3：前端异步接口拉取变量（适合需动态更新的场景） #

如果页面加载后还需要实时更新flag状态，可通过接口单独获取变量：

1. server.js新增接口，原有静态页面返回逻辑不变：

// 原有返回静态HTML的路由保留
app.get('/' , (req, res) => {
    res.sendFile(path.join(__dirname+'/views/UiOfServer.html'));
});

// 新增变量查询接口
app.get('/api/server-config', (req, res) => {
  res.json({ flag: flag });
});

2. 前端UiOfServer.html添加异步请求逻辑：

<script>
window.onload = async () => {
  const res = await fetch('/api/server-config');
  const data = await res.json();
  if (data.flag) {
    document.body.insertAdjacentHTML('afterbegin', '<h1>flag为true时展示的标题</h1>');
  } else {
    // flag为false时的其他逻辑
  }
};
</script>

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