如何在HTML文件中使用Express服务端传递的自定义变量？

你目前的写法无法直接在index.html中获取title变量，因为Express的res.sendFile()方法的本质是发送静态HTML文件，第二个参数是文件读取的配置项，并不会作为模板变量注入到HTML内容中。

方案1：使用模板引擎（推荐） #

Express支持EJS、Pug等模板引擎，可直接实现变量注入，以EJS为例：

• 安装依赖：执行命令npm install ejs
• 在Express入口文件中配置模板引擎：

// 指定模板文件存放目录，可自行修改路径
app.set('views', './views')
// 注册EJS为模板引擎
app.set('view engine', 'ejs')

• 将原index.html文件重命名为index.ejs，移动到上述配置的views文件夹中
• 修改路由代码，把res.sendFile替换为res.render：

app.get('/', requiresAuth(), (req, res) =>
    res.render('index', { title: 'Hey', message: 'Hello there!' })
);

• 在index.ejs中直接引用变量即可：

<h1><%= title %></h1>

方案2：不改动HTML后缀，手动替换占位符 #

如果不想使用模板引擎，可以手动读取HTML文件替换自定义占位符：

• 先在你的index.html中写好占位符，比如：

<h1>{{title}}</h1>

• 修改路由代码，读取文件后替换占位符再返回：

const fs = require('fs')
app.get('/', requiresAuth(), (req, res) => {
  fs.readFile('/db_auth_site/index.html', 'utf8', (err, htmlContent) => {
    if (err) return res.status(500).send('文件读取失败')
    // 替换占位符为实际变量值
    const renderContent = htmlContent.replace('{{title}}', 'Hey').replace('{{message}}', 'Hello there!')
    res.send(renderContent)
  })
})

方案3：前端异步获取变量 #

你也可以单独写一个接口返回变量，前端加载完HTML后通过接口请求获取数据，再动态插入到页面中：

• 新增返回变量的接口：

app.get('/page-data', requiresAuth(), (req, res) => {
  res.json({ title: 'Hey', message: 'Hello there!' })
})

• 在index.html中新增JS逻辑动态赋值：

<h1 id="title"></h1>
<script>
fetch('/page-data')
  .then(res => res.json())
  .then(data => {
    document.getElementById('title').innerText = data.title
  })
</script>

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